I'm trying to get a fairly basic design working and I've got an issue with my menu. url: http://logan.uk.net/newlayout.php css: http://logan.uk.net/css/new2.css (Ignore the colours - they're just bright so I can see where everything sits) Renders fine in IE 6.0, but not in firefox. The background to the menu (bright green) should fill the gap between "item 4" and "login". Any ideas appreciated!
Code: <body> <div id = pagewrapper> <div id = contentwrapper> <img src="layout/headers/header13.jpg" width="750" height="150" border="0" id=header> <div id=nav> <ul id=navigation> <li class=left><a href="#">item 1</a></li> <li class=left><a href="#">item 2</a></li><li class=left><a href="#">item 3</a></li> <li class=left><a href="#">item 4</a></li> <li class=right><a href="#">login</a></li> <br class="clear" /> </ul> </div> <div id=content> <p>content </p> <p>test test</p> </div> </div> </div> </body> Code: <br class="clear" /> Add that ^^ Into the html before the </ul> and add this to your css: Code: .clear { clear:both; } VOILA! edit: Just noticed, that you havn't given your <ul> a height, this would also solve it. edit again: clean up your css, remove everything your not using and always format it the same way. Its a lot easier to read. Also, I would avoid floating things right as a rule... I dunnow, but its my rule anyway, seeing as its fixed width you could just give it a margin-left:
Cheers, went for setting the height of the ul property - the <br> statement seemed to cause an extra blank line in IE. Good advice on the keeping the css clean (helps loading times if nothing else!) - just messing around with some options but I'm such a lazy coder at the moment Keeping the float right until i've decided if I'm keeping it fixed width or not, depends how the content looks. Thanks again for the help - and for being so quick too!
