[css] List staat heeft in IE verticale ruimte - Softwareontwikkeling

zaterdag 3 juni 2006 18:09

Acties:

Topicstarter

Op mijn adult weblog heb ik het probleem dat de links naar andere sites e.d in <li> staan.
Deze staat in de css als:

Cascading Stylesheet:

#vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0 0 0 10px;
    border: none;
    height:auto;
}
#vertmenu ul li {
    margin: 0px;
    padding: 0px;
}
#vertmenu ul li a {
    font-size: 90%;
    display: block;
    border-bottom: 1px dashed #C39C4E;
    padding-top:5px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #666666;
    width:156px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {

    color: #000000;
        font-size: 90%;
    background-color: #eeeeee;
}

In firefox is deze precies zoals ik het wil. IE moet jammer genoeg mij weer plagen..
Wie kan de fout vinden? Het adres is btw: http://www.stout.is

[ Voor 10% gewijzigd door crisp op 03-06-2006 22:02 . Reden: Er zit dus een typo in TT ]

zaterdag 3 juni 2006 18:32

Acties:

Rowanov

Kop eens wat anders...

Waarom sluit je je tags zo af: <li />?

Verander dat eens in </li> en kijk nog eens. Ik zoek ondertussen in de reference of het zo wel mag, want het kan ook een gebrek in mijn kennis zijn.

Edit: in html 4.01

The element's name appears in the start tag (written <element-name>) and the end tag (written </element-name>); note the slash before the element name in the end tag. For example, the start and end tags of the UL element type delimit the items in a list:

Aangezien jij xhtml gebruikt gaat dit niet op, maar het zou er best aan kunnen liggen dat IE het niet begrijpt. Sterker nog, als ik met de webdeveloper toolbar in IE je list-items omlijn, dan geeft hij aan de li gedurende de hele lijst doorloopt, waar in FF afzonderlijke blokjes zichtbaar zijn. In xhtml mag je alleen empty tags zo afsluiten als jij nu doet.

[ Voor 65% gewijzigd door Rowanov op 03-06-2006 18:44 ]

zaterdag 3 juni 2006 18:35

Acties:

ACM

Software Architect

Werkt hier

Gelieve geen links naar dat soort sites te plaatsen, zelfs niet in deze context. Je zult in dit geval een of andere voorbeeldpagina moeten klussen als je je html wilt demonstreren.

zaterdag 3 juni 2006 20:59

Acties:

crisp

Devver

Pixelated

Het is heel simpel: als je je XHTML page als text/html verstuurd dan is het voor de browser gewoon HTML en gelden ook de syntax-rules voor HTML. Je zou dan dus gewoon kunnen stellen dat het een HTML document is met een verkeerde doctype

Note dat op zich dit niet verkeerd is in HTML:

HTML:

<li />

de end-tag voor het li-element is optioneel en / sluit je start-tag af; dit is dan je parsetree:

code:

1
2
3

ELEMENT START: li
  TEXTNODE: >
ELEMENT END: li (implied)

alleen is er geen enkele browser die het ook zo geimplementeerd heeft

[ Voor 7% gewijzigd door crisp op 03-06-2006 20:59 ]

Intentionally left blank

zaterdag 3 juni 2006 21:12

Acties:

Rowanov

Kop eens wat anders...

@Crisp; het werd op zijn pagina toch heel anders gebruikt, namelijk zo:

HTML:

1	<li>menu item<li />

IE heeft dus alle reden om over de zeik te gaan. Dit verklaart trouwens gelijk het gedrag van de webdev outline functie.

[ Voor 23% gewijzigd door Rowanov op 03-06-2006 21:15 ]

zaterdag 3 juni 2006 21:50

Acties:

crisp

Devver

Pixelated

Nee, IE heeft geen reden om over de zeik te gaan want het is in feite valid HTML (aangenomen dat er wel een list omheen stond)

Probeer maar:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title/verplichte title/
<ul>
  <li>tralala<li />
</ul>

[ Voor 50% gewijzigd door crisp op 03-06-2006 21:53 ]

Intentionally left blank

zaterdag 3 juni 2006 21:57

Acties:

Rowanov

Kop eens wat anders...

Dat weet ik ook wel, maar wat je in feit doet is een list-item openen, bij de <li /> wordt vervolgens aangenomen dat er een nieuw list-item begint. Dan kom je dus in de knoei met je markup (hoewel het valid is) omdat er dan feitelijk tussen elk gevuld list-item een lege komt.

Ik zie nu trouwens in dat IE het waarschijnlijk wel goed weergeeft en dat firefox kennelijk de lege list-items niet weergeeft

zaterdag 3 juni 2006 22:01

Acties:

crisp

Devver

Pixelated

In firefox krijg ik ook 2 bullets maar vlak onder elkaar op dezelfde lijn; je zou kunnen zeggen dat IE het inderdaad beter doet. Zo'n beetje alle browsers negeren de > na de / (of eigenlijk andersom, ze negeren de / en zien > als close-delimiter voor de tag) dus dat wijkt verder niet zoveel af.

Intentionally left blank

zaterdag 3 juni 2006 22:26

Acties:

Rowanov

Kop eens wat anders...

Dan zijn we er wel ongeveer uit wat de TS als oplossing kan gebruiken

Bedankt voor je toelichting Crisp, altijd leuk om wat nieuws op te pakken!