[CSS] List items worden te laag geplaats

[Verwijderd]

Ik heb een simpele layout in css

header
navigatie
contents
links
rechts
footer

Het gaat om de navigatie div.

in de navigatie heb ik een rijtje horizontale list items.

In FF moet ik de list items een margin geven van -10 en dat werkt dan wel ( al blijf ik met een rand van 2 pixels zitten

in IE6 ziet het er helemaal niet uit, daar wordt een stuk van de text afgekapt en worden de kolommen in de volgende div er door in de war geschopt


Ik heb heen en weer zitten schuiven met een grotere navigatie en padding en margin etc, maar ik blijf met die list items zitten. ziet iemand wat ik verkeerd doe?

hier is de link waar de pagina staat :

en hier is de css (list items gedoe staat onderaan

edit:

wat ik verder heb geprobeerd:

ik heb een hack gebruikt maar ie plaatst dan nogsteeds de kolommen door elkaar

Cascading Stylesheet:

html>body ul#nav, ul#nav li
{
margin-top: -10px;
}

Cascading Stylesheet:

body {
 margin:20px;
 background:#999;
 color: #999;
 text-align:center;
 padding:0;
}

#outer {
 text-align:left;
 border:1px solid #666;
 width:750px;
 margin:auto;
 background:#999;
}

#hdr {
 height:40px;
}

#bar {
 height:25px;
 
}

#bodyblock {
 position:relative;
 width:730px;
 padding:0;
}

#l-col {
 float:left;
 width:350px;
}

#cont {
 width:350px;
 text-align:left;
}

#ftr {
 height:25px;
  margin:0;
}
 
 #hdr, #bar,#l-col, #bodyblock, #cont, #ftr
 {
  background:#99C;
  border:1px solid #666;
  margin: 10px;
  color: black;
 }
 
 ul#nav, ul#nav li {
float: left;
list-style: none;
margin-top: -10px;
padding: 0;
}
ul#nav {
font-family: Verdana, Geneva, Helvetica, sans-serif;
font-size: .82em;
background-color:#9999CC ;

}
ul#nav li a {
border-color: #666;
border-width: 0px 1px 1px 0px;
border-style: solid;
display: block;
float: left;
padding: 3px;
}

[ Voor 5% gewijzigd door Verwijderd op 11-09-2006 23:04 ]

[Rowanov]

De negatieve top-margin op je li (in ul#nav li), veroorzaakt heel logisch het afkappen, aangezien je de li binnen de ul 10px omhoog zet

Die negatieve left-margin zou helemaal nergens voor nodig moeten zijn als je de margin en padding van je ul op 0 zet, en hetzelfde doet voor de li.

[crisp]

Verder hoef je enkel je LI-elementen te floaten; je UL en de anchors binnen je LI kan je gewoon static positioneren. Zorg wel dat je op een of andere manier je floats cleared.

[Verwijderd]

als ik die -10 weghaal en margin en padding op nulzet krijg ik het zo:



de list items beginnen dus ergens onderaan in het kader.....ik weet niet hoe ze omhoog te krijgen, vandaar die -10 top margin

[ Voor 33% gewijzigd door Verwijderd op 12-09-2006 01:19 ]

[crisp]

Lijkt een renderbugje mbt whitespace; ik kan zo niet direct zien of er misschien no-breaking-spaces in de sourcecode zitten maar anders is het wel op te lossen dmv:

Cascading Stylesheet:

#bar {
  line-height:0;
}
#bar ul {
  line-height: normal;
}

edit: vergeet bovenstaande, het is een no-breaking-space: javascript:alert(document.getElementById('bar').firstChild.nodeValue.charCodeAt(0))

[ Voor 22% gewijzigd door crisp op 12-09-2006 08:16 ]

[Verwijderd]

yup ik heb hem gevonden, helaas zet ie6 ook nu nog steeds de 2e kolom onder de eerste, nog even verder puzzelen....

edit:

en dan dit maar gedaan....

ik heb de kolommen maar iets mnider breedgemaakt, technische gesproken zou het al meoten passen, maarja. css , wat een gedoe

Bedankt allemaal!

[ Voor 46% gewijzigd door Verwijderd op 12-09-2006 16:24 ]