Hi all, I'm just starting out with sites using only css and have come across the following problem. The code below renders OK in IE7 with the li elements hard against the left margin of the page, but in Firefox 2.0 and Opera 9.2 I get a space of around 40px on the left. What's going on? I would have thought that the display in IE7 is correct, so why are Firefox and Opera wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mainNav ul { margin: 0px; font-size: .8em; list-style-type: none; } #mainNav ul li { padding: 5px; } #mainNav a { color: #fff; display: block; background-color: #dc332a; padding: 0.2em; line-height: 1.4em; text-align: center; border: 1px solid #000; width: 12em; text-decoration: none; } #mainNav a:hover { color: #000; background-color: #baef19; } --> </style> </head> <body> <div id="mainNav"> <ul> <li><a href="page1.html">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> <li><a href="page4.html">Page 4</a></li> <li><a href="page5.html">Page 5</a></li> <li><a href="page6.html">Page 6</a></li> <li><a href="page7.html">Page 7</a></li> </ul> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
