Partage

Problème CSS avec chrome

1 janvier 2018 à 16:52:42

Bonjour à tous et bonne année! Je dois faire un site internet pour dans deux semaines, je l'ai fini et il s'affiche comme je le souhaite sur Firefox mais pas sur Chrome. Les deux problèmes majeurs sont pour les input qui sont différents d'une version à une autre et des bordures qui font n'importe quoi. Merci pour votre aide

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
1 janvier 2018 à 18:31:07

Bonjour,

Il s'agit probablement des styles par défaut des différents navigateurs. Cependant impossible de confirmer ou d'infirmer cette hypothèse vu le peu d'informations que tu nous donnes. 

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
1 janvier 2018 à 20:04:35

Je peux vous mettre a disposition mon code en css et mon code en html ainsi que ce que cela donne sur chrome et sur mozilla

css :

@media screen and (min-width: 1000px)
{	

		.left{
	   		font-weight: bold;
		   	color: #ffffff;
		   	border-right: 1.5px solid ivory;
		   	margin-right: 6%;
		   	padding-right: 5%;
		}
		article span{
			color: red;

		}
		h4{
			font-family:Noto Sans, sans-serif;
    		text-align: center;
	    	color: #075a58;

   		 }
		/*gesiton des champs*/
		#civilité{

			display: inline;
			margin-left: 2%;
		}
		input{
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #979893;
			width: 180px;
		}
		/*disposition des differents champs*/
		.tel{
			vertical-align: text-top;
			margin-top: -13.5%;
			text-align: right;
		}
		.civil{
			margin-right: 10%;
			margin-top: -1%;
			text-align: right;
		}
		.message{
			padding-bottom: 10%;
		}
		/*systéme de notation du site*/
		.notation {
		   direction: rtl;
		   margin-top: -5%;
		   margin-right: 32.5%;

		}
		.notation a {
   		   color: #aaa;
   		   text-decoration: none;
   		   font-size: 260%;
   		   transition: color .4s;
   	   }
   		   .notation a:hover,
   		   .notation a:focus,
   		   .notation a:hover ~ a,
   		   .notation a:focus ~ a {
   		   	color: orange;
   		   	cursor: pointer;
   		}
   		.note{
   			text-align: center;
   		}
   		/*bouton envoyer*/
   		#envoyer{
   			display: block;
   			box-shadow: none;
   			border: 1px solid black;
   			margin-top: 5%;
   			padding: 1%;
   			font-weight: bold;
   			color: #ffffff;
   			background-color: black;
   			width: 210px;
   			transition: color .4s;
   		}
   		#envoyer:hover, #envoyer:focus{
   			color: orange;
   			cursor: pointer;
   		}
   		
   		
}

 html :

<form method="post" action="http://www.iut-fbleau.fr/sitebp/post.php">
		<fieldset>
			<p>
				<label for="nom"><span>*</span> Nom :</label>
				<input type="text" name="nom" id="nom" placeholder="Ex : Dupond" size="12" maxlength="15" required="Veuillez compléter ce champ." />
			</p>
			<p>
				<label for="prenom"><span>*</span> Prénom :</label>
				<input type="text" name="prénom" id="prénom" size="12" maxlength="20" required="Veuillez compléter ce champ."/>
			</p>
			<p class="tel">
				<label for="téléphone"> Téléphone :</label>
				<input type="tel" name="tel" id="tel" min="10" pattern="0[67]\d{8}" size="12" placeholder="06/07...">
			</p>
			<p class="civil">
				<label for="civilité"><span>*</span> Civilité</label>
				<select name="civilité" id="civilité">
					<option value="0">Sélectionner</option>
					<option value="homme">Homme</option>
					<option value="femme">Femme</option>
				</select>
			</p>
			<p class="email">
				<label for="email"><span>*</span> Email : </label>
				<input type="email" name="email" id="email" size="16" maxlength="25" placeholder="exemple1234@gmail.com" required="Veuillez compléter ce champ." pattern="[a-zZ-A0-9]+[@][a-z]+[.][a-z]+"/>
			</p>
			<p class="objet">
				<label for="objet"><span>*</span> Objet :</label>
				<input type="text" name="objet" id="objet" size="12" maxlength="15" required="Veuillez compléter ce champ"/>
			</p>
			<p>
				<label for="message">Message :</label><br><br>
				<textarea name="message" rows="10" cols="50" placeholder="Laisser un message"></textarea>
			</p>
		<p class="note">Laissez une notation si vous le souhaitez</p><br>
		<div class="notation"><!--
   --><a href="#5" title="Donner 5 étoiles">☆</a><!--
   --><a href="#4" title="Donner 4 étoiles">☆</a><!--
   --><a href="#3" title="Donner 3 étoiles">☆</a><!--
   --><a href="#2" title="Donner 2 étoiles">☆</a><!--
   --><a href="#1" title="Donner 1 étoile">☆</a>
		</div>
			<p>
				<input type="submit" value="Envoyer" id="envoyer"/>
			</p>
			</fieldset>
			</form>




chrome :

mozilla :

3 janvier 2018 à 20:42:05

Personne n'a de solutions pour mon problème?

Problème CSS avec chrome

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown