2009-08-23 9 views
2

Ich entwickelte ein CSS-Menü und es hat über alle Browser in meinem Test (pure HTML/CSS) funktioniert. Als wir den Code in unsere Entwicklungsumgebung brachten, die auf cakePHP läuft, haben wir manchmal in Firefox (3.5.2) gesehen, dass der Menü-Bug herauskam. Es passiert in keinem anderen Browser. Ich habe die Quelle, wenn der Fehler auftritt, und das ist, was es sieht aus wie (der andere li Block darunter ist, wie es aussehen soll):Firefox Rendering HTML inkorrekt manchmal

<div class="nav1"> 
<ul id="dropnav"> 
    <li id="dashboard"> 
     <a href="/businesses/dashboard"/> 
     <div> 
      <span class="white caps"> 
       <a href="/businesses/dashboard">Dashboard</a> 
      </span> 
      <a href="/businesses/dashboard"> 
       <br/> 
       <small>At-a-glance view of all your stuff</small> 
      </a> 
     </div> 
    </li> 
    <li id="listing" class="active"> 
     <a href="/businesses/edit_profile"> 
     <div> 
      <span class="white caps">Listing</span> 
      <br/> 
      <small>View and edit your listing</small> 
     </div> 
     </a> 
    </li> 
</ul></div> 

Hier ist der relevante CSS:


span.caps { text-transform:uppercase; } 
.white{color:#fff;} 
.nav1 { background: url('../images/gradients/nav1.gif') repeat-x; height:50px; } 
.nav1 #dropnav { list-style-type:none; margin:0; height:50px;float:left;line-height:1; } 
.nav1 #dropnav li { padding:8px 10px 7px 10px; border-left: 1px solid #3ba2da; border-right: 1px solid #1f74a3;float:left;position:relative; } 
.nav1 #dropnav li div { position:relative; float:left; padding-top:5px; } 
.nav1 #dropnav li a { padding:0 0 6px 40px; float:left; text-decoration:none;} 
.nav1 #dropnav li:hover, .nav1 #dropnav li.active { background: #3b3b3b; } 
.nav1 #dropnav li#first:hover, .nav1 ul li#last:hover {background:none;} 
.nav1 #dropnav li:hover small, .nav1 #dropnav li.active small{ color:#fff; } 
.nav1 small { line-height:1.2em; color:#111; } 
.nav1 span { font-weight:bold; } 
.nav1 #dashboard a{ background: url('../images/icons/nav134.png') no-repeat 0 -102px; } 
.nav1 #listing a{ background: url('../images/icons/nav134.png') no-repeat 0 -68px; } 
.nav1 #messages a{ background: url('../images/icons/nav134.png') no-repeat 0 -34px; } 
.nav1 #tools a{ background: url('../images/icons/nav134.png') no-repeat 0 0; } 

Ich weiß, dass es eine Reihe von Problemen geben könnte, aber ich versuche es einzugrenzen.

+0

Es würde helfen, wenn Sie würde beschreiben, was seine „nervt out“ besteht aus genau. – chaos

+1

Ich denke nicht * Sie dürfen Block-Level-Elemente (div) innerhalb von Links (a) haben, gemäß w3-Standards. – mpen

+0

Ja, W3C-Validator erstickt daran. – chaos

Antwort

4

Sie dürfen keine div innerhalb einer Verbindung haben. Firefox korrigiert das automatisch so, wie es Ihrer Meinung nach gemeint ist. Natürlich kann eine Maschine nicht wirklich erraten, was Sie ausprobiert haben, so dass sie aus der Fassung kommt.

Tatsächlich ist FireFox anscheinend der einzige Browser, der sogar sieht, dass Sie einen Fehler gemacht haben. Die anderen Browser ignorieren einfach Ihr falsches HTML.

Versuchen Sie, das Div zu entfernen, und geben Sie einfach die <eine> eine Anzeige: Block-Eigenschaft im Stylesheet.

+0

Danke, das funktioniert! –

4

Nun, was bei mir springt, ist, dass in der ersten <li>, Ihre äußere <a href="/businesses/dashboard"/> nichts umschließt und /> geschlossen mit, das scheint nicht, wie es wahrscheinlich zu sein, was Sie wollen. Möglicherweise ist Firefox 3.5.2 dafür aus irgendeinem Grund empfindlicher als andere Browser, aber es scheint, als ob das Problem in dem liegt, was dieses HTML generiert.

+0

Ja, aber wenn es richtig funktioniert machen, sieht die html wie:

  • \t \t
    \t \t Dashboard \t \t
    \t \t At-a-glance view of all your stuff \t
    \t
  • +0

    Recht. Heißt das, dass das "Korrekte" (nicht nach HTML-Standards, aber egal, vorerst) HTML für jeden Browser erzeugt wird, außer Firefox 3.5.2? Denn wenn das der Fall ist, ist das ein Problem in dem, was HTML produziert, nicht in Firefox. Browser schreiben Ihr HTML nicht um. – chaos

    +0

    Ja. Dein Problem ist mit CakePHP, nicht mit Firefox. –

    2

    Wie in den Kommentaren erwähnt, ist Ihr Markup nicht streng gültig (leer a oder div in a). Für mich bedeutet das, dass es zwar in den meisten Browsern so dargestellt wird, wie Sie es möchten, es ist jedoch sinnlos zu sagen, dass es hier und nicht dort korrekt dargestellt wird.

    Mein Rat ist, Ihr Markup so zu reparieren, dass es zuerst validiert. Sobald Sie ein gültiges Markup haben, können Sie erwarten, dass nette Browser wie der aktuelle Firefox es "richtig" rendern und dann alle browserspezifischen Probleme beheben, die noch bestehen.

    w3c validator: http://validator.w3.org/