Pouvez-vous repérer ce bug d'affichage html?

J'ai suivi un tutoriel d'un livre sur html et css. J'ai essayé de faire un design d'en-tête clair comme celui d'youtube, mais je n'arrive pas à voir correctement le champ de recherche et le bouton. Le bouton est rendu 10 fois plus bas que le champ de recherche.Pouvez-vous repérer ce bug d'affichage html?

Peut être vu ici http://www.wourm.com/index.html Quelqu'un peut-il voir pourquoi cela se passe?

[EDIT: Ajout de HTML et CSS à cette page]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Awtunes.com</title> 
<link href="awtunes.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
    <div class="container"> 
     <div class="header"> 
      <div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div> 
    <div id="find-videos" class="search floatL" style="top:0px;" > 
        <form id="searchVideos" name="searchVideos" method="get" action="/"> 
    <input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" /> 

</form> 
      </div> 
       <div class="menu floatL"> 
        <ul> 
         <li>Videos</li> 
         <li>Music Videos</li> 
         <li>Trailers</li> 
         <li>Create Account</li> 
         <li>Sign in</li> 
        </ul> 
       </div> 
     </div> 

    </div> 
</body> 

</html>

et le css

.awtunes { 
     font-family: "Courier New", Courier, monospace; 
    } 
    .container { 
     width: 980px; 
     top: 0px; 
     margin-left: auto ; 
     margin-right: auto ; 
    } 
    .floatL { 
     float: left; 
     position:relative; 
    } 
    .floatR { 
     float: right; 
     position:relative; 
    } 
    .searchBox { 
     border-style:none; 
     border-width:0px; 
     width: 360px; 
     background-image: url(images/search_bar.png); 
     background-repeat:no-repeat; 
     height: 40px; 
     font-size: 18px; 
    } 
    .searchbutton { 
     border-style:none; 
     border-width: 0px; 
      background-repeat:no-repeat; 
     background-image: url(images/search_button.png); 
     background-repeat: no-repeat; 
     width: 55px; 
     height: 40px; 

    } 
    .logo { 
     width: 122px; 
     height: 50px; 
    } 
    .menu { 
     width:430px; 
    } 
    .search { 
     width: 425px; 
     height: 40px; 
    } 
    .split { 
     background-image: url(images/split.jpg); 
     background-color: #C0C0C0; 
     background-repeat: no-repeat; 
     width: 1px; 
     height: 18px; 
    } 
    ul 
    { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    } 
    li 
    { 
    background-image: url(images/split.jpg); 
    background-repeat: no-repeat; 
    float: left; 
    margin: 0 0.15em; 
    }

Source

2010-11-12 zcourts

Si ce code provient d'un livre, il vaut mieux en acheter un nouveau .. sérieux. Pour aligner le bouton, ajoutez simplement votre classe floatL aux deux champs de saisie.

Source

2010-11-12 23:13:05 tobiasmay

merci, en ajoutant floatL à la fois trié – zcourts

.searchbutton {vertical-align: top; }

Source

2010-11-12 23:08:49 babtek

Je suggère une réinitialisation CSS telle que la réinitialisation CSS YUI. Une vérification rapide dans IE et FF montre déjà une incohérence assez sérieuse. Si vous utilisez une feuille de style CSS reset, cela permettra au moins de définir votre code sur un terrain de jeu de niveau entre les navigateurs. YUI CSS Reset: http://developer.yahoo.com/yui/reset/

Une fois que vous avez une ressource comme celle-ci en place, beaucoup de bizarreries de mise en page sont déjà traitées.

Source

2010-11-12 23:10:57

a pris votre recommandation et a ajouté la réinitialisation, voir déjà les effets – zcourts

Il va changer votre jeu lorsque les navigateurs commencent à agir comme s'ils venaient de la même planète, en particulier certaines versions IE vilipendés. Six. –

Il semble être à cause de .searchBox {font-size: 18px; } Si vous supprimez tous les autres styles de input.searchBox, vous pouvez voir que la modification de la taille de la police modifie la taille de l'ancienne entrée de texte, ce qui modifie la hauteur du conteneur de l'entrée de texte et du bouton.

Je pense aussi que ce serait une bonne idée d'ajouter votre HTML et CSS à cette question afin que si quelqu'un regarde cette question dans le futur et que votre site soit différent, ils peuvent toujours apprendre de votre question!

Source

2010-11-12 23:13:11 carols10cents

Une solution rapide à votre code actuel serait d'ajouter quelque chose comme:

.searchbutton { 
    position: relative; 
    top: -15px; 
}

Source

2010-11-12 23:25:53 garrettwinder

carolclarinet est ici - l'attribut de taille de la police est le problème (au moins dans FireFox). Je ne suis pas sûr si vous utilisez les outils de développement IE pour vérifier vos problèmes de CSS, mais je recommande de l'utiliser ainsi que FireBug pour FireFox. Ils vous permettront de jouer avec vos styles sans le fastidieux cycle modifier/enregistrer/rafraîchir.

Source

2010-11-12 23:26:01 jwiscarson

Pouvez-vous repérer ce bug d'affichage html?

Répondre

Questions connexes