Hi, I'm working on a drop down menu for my site navigation which is supposed to be located in a horizontal block that spans the entirety of the page. I have the menu set up as a <UL> and the navigation links are then placed in <LI> tags. The way I have things set up, the navigation links are positioned differently across the three browsers I am testing in (Firefox 3, IE 7, Chrome). For example, in FF one pixel from the navigation bar is shown above the links, while in Chrome it is below the links. IE seems to be rendering the page the way I would like, .i.e no vertical space between the top or bottom of the link and the top or bottom of the navigation bar or the links positioned exactly the same vertically across browsers. This vertical discrepancy is throwing off the drop down menu I am writing. Any help appreciated! Here's the code: <html> <head> <title>Test</title> <style type="text/css"> body { margin: 0px; padding: 0px; } .navigation { display: block; width: 100%; margin: 0px; list-style: none; background-color: #CCC; border-top: 1px solid #111; border-bottom: 1px solid #111; } .navigation li { display: inline; position: relative; } .navigation li a { background: #666; } </style> </head> <body> <ul class="navigation"> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> </ul> </body> </html>
Hi, Different browsers sometimes set different defaults for certain elements, one of those being margin and padding added to UL and LI. So simply stating: .navigation ul{ margin:0; padding:0; } .navigation li{ margin:0; padding:0; } Resets it across all browsers so they have no gaps as they are appearing to you.