DIV positioning problem

Why does this DIV shift to the right in Moz and FF? It shows correctly in IE. See it at work here (<!-- m --><a class="postlink" href="http://www.alpinetrekking.com/test/en/expeditions/introduction_overview.php">http://www.alpinetrekking.com/test/en/e ... erview.php</a><!-- m -->).

cheers, Jochem :cool:

#MENU{padding:0; margin-top:0; font:8pt 'Trebuchet MS',Helvetica,Arial,Verdana,sans-serif; color:#fff;}
#MENU .mainhead{padding:1px 0px 2px 0px; background-color:#579; text-align:center; font-weight:bold; width:130px;}
#MENU ul{margin:0; list-style:none; border-top:1px solid #7aa3cf; float:left;}
#MENU li{margin:0; list-style:none; list-style-image:none;}
#MENU li a{padding:1px 0px 1px 4px; display:block; width:100%; border-left:3px solid #7aa3cf; border-right:3px solid #7aa3cf; border-bottom:1px solid #7aa3cf; background-color:#96bfeb; color:#fff; text-decoration:none;}
html>body #MENU li a{width:auto;}
#MENU li a:hover{border-left:3px solid #de0000; border-right:3px solid #de0000; color:#579;
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#96bfeb,endColorStr=# ffffff);}First, you are using Microsoft proprietary code which won't work in any other browser. Second, you have 27 html validation errors.
Third, your CSS has 7 validation errors.Thanx for your reply. About the errors, please note that this is a TEST version, full of bugs. I'm working on it. For now, I need some help on the positioning of the menu. Please adjust the CSS code so it will position properly.

cheers, Jochem :cool:Try adding "padding:0" to "#MENU ul {...}".That's it, easy does it! Thanx!

cheers, Jochem :cool:If your code is full of errors it could just as well have been the cause of your problems. Always validate your code as you write it.7 Validation errors in 7 lines of CSS? Holy hellfire!

I never validate my code as I write it, those validation tools do nothing but check the basic syntax which, in something as simple as HTML, you can do visually.

What you should be doing is coding for Firefox/Safari 1.2/Safari 2/Camino/Shira/Netscape/Opera (they're all pretty much the same when it comes to rendering CSS/XHTML) and then tweaking for Internut Exploder 6 and, if you're feeling brave, 5.5 or even 5.0.

The other benefits of Firefox come in the form of the Web Developer Toolbar which has more useful functions than you could shake a pointy stick at. Including.. validation!
 
Back
Top