[CSS] Wie ziet de fout?

Ben bezig aan deze site http://www.unitedbaseline.be/index.php?id=15 en het submenu aan de rechterkant wordt altijd naar onder 'gepusht' (natuurlijk in IE op pc).

Ik heb al vanalles geprobeert maar nog niets met succes.
Waar kijk ik over?

Heb je al de vertical-align op "top" gezet voor de div waar dat menu in zit?

Dat maakt absoluut niks uit.

ikkke.... zie het gewoon boven aan staan :sealed:

In internet explorer op pc?

Voeg eens dit toe aan je CSS:

[code:1:38699d188a].leftcol {
float: left;
}[/code:1:38699d188a]

edit
sry, te snel geweest, dat staat er al

edit2
De breedte van je leftcol + rightcol vormt samen 640px, terwijl je container er maar 601px is… even gelijk afstellen en kijken wat dat geeft? :slight_smile:

En dan is er nog de 3pixel float bug in IE geef dan een height: 1%; aan de #leftcol voor alleen IE 6 [code:1:38748ff94b]* html body #content #leftcol { height: 1%; }[/code:1:38748ff94b]

Waarom gebruik je niet overal position:absoluut; (of relative) om te positioneren. Daar is het immers voor bedoelt. Margin en padding zijn daar niet voor gemaakt en pakken vaak verschillend uit bij verschillende browsers.

Vanwege de rare manier waarop IE de breedte van een div class berekend, denkt IE dat je linker en de rechter kolom samen groter zijn dan de container waar ze in staan. Als je de breedte van de rechter kolom kleiner maakt, dan is je probleem verholpen denk ik. :)

Misschien een tip om deze breedte aangepast in een aparte IE-only stylesheet te zetten, zodat mensen met een ‘echte’ browser er geen hinder van ondervinden.

[code:1:6dfde805ff]
<!–[if IE]>
@import url(ieonly.css);
<![endif]–>
[/code:1:6dfde805ff]

of iets in die richting. Succes dr mee! :wink:

Bedankt al, morgen eens testen op een pc.

[quote:94a0b4ce66="nipro"]Vanwege de rare manier waarop IE de breedte van een div class berekend, denkt IE dat je linker en de rechter kolom samen groter zijn dan de container waar ze in staan. Als je de breedte van de rechter kolom kleiner maakt, dan is je probleem verholpen denk ik. :) [/quote:94a0b4ce66]

Dat is het geval voor IE5 of wanneer IE6 in Quirsmode rendert, anders niet.

Ik heb de CSS op een aantal punten verandert:

[code:1:94a0b4ce66]
#content {
width:601px;
background-image:url(http://www.unitedbaseline.be/images/5.jpg);
background-repeat:no-repeat;
margin:0;
padding:0;
}

#content #leftcol {
width:350px;
position:relative;
float:left;
margin:0;
padding:0;
}

#content #rightcol {
margin: 0 0 0 0;
position:relative;
padding:13px 0 0 0;
}

#rightcol ul {
list-style-type:none;
margin:0;
padding: 0;
}

#rightcol li {
display:block;
width : 169px;
height:30px;
line-height : 30px;
background-image:url(http://www.unitedbaseline.be/images/8.jpg);
background-repeat:no-repeat;
margin : 0 0 5px 0;
padding: 0 0 0 15px;
float : right;
clear : right;
}
[/code:1:94a0b4ce66]

Belangrijkste verschil is dat de #rightcol nu geen breedte meer heeft, en daardoor als gewone content wrapt rond de gefloate #leftcol en automatisch de breedte heeft van de #container

Vervolgens moeten de menu-items tegen de rechtermarge gezet worden, wat bereik wordt door de li’s binnen de #rightcol te floaten.

Beetje rommelen met margin’s en paddings in de verschillende id’s en dan zoet het er weer uit zoals bedoelt. Deze code heb ik getest op een WinXP bak met IE6 en Firefox 1.5