Try using a CSS reset, I use Eric Myer's CSS reset list. http://meyerweb.com/eric/tools/css/reset/index.html
This should reset the browser defaults to your definitions. Hope this helps. Phillip B On Mar 3, 11:13 pm, WhyNotSmile <[email protected]> wrote: > Hi, I'm building a site with a horizontal drop down menu. It works > fine in Firefox & IE8, but in other browsers I'm having problems, as > follows: > > Chrome & Safari - the drop down menus are much wider than they need to > be, as if there is loads of extra padding to the right (in one case, > the menu is about 3 times as wide as it needs to be) > > IE7 - width of drop-down is fine, except that it is always at least as > wide as the main top-level item, and if the sub-items are short, there > are sometimes 2 on one line. > > IE6 (not that bothered about this, but I've included it in case it's > significant) - drop downs are really wide, and always extend to a > particular point on the screen. > > I would really appreciate help on this - I've looked online, but can't > find anything that helps. Even a link to somewhere that could help me > out would be gratefully received. Thank you! > > Here's the basic HTML: > > <div id="hmenu" class="clr"> > <ul> > <li class="thisPage"><a href="/newSite/pages/1">Menu Item 1</a> > <ul> > <li><a href="/newSite/pages/14">Sub Item 1</a></li> > <li><a href="/newSite/pages/15">Sub Item 2</a></li> > </ul> > </li> > <li><a href="/newSite/pages/2">Menu item 2</a> > <ul> > <li><a href="/newSite/pages/10">Sub Item 1</a></li> > </ul> > </li> > </ul> > </div> > > And the relevant css: > > #hmenu { > display: block; > height: 24px; > width: 730px; > padding: 8px 0 0 0; > margin: 0 0 10px 0; > > } > > #hmenu ul { > list-style: none; > padding: 0; > margin: 0; > > } > > #hmenu ul li { > float: left; > margin: 0 0 0 0; > white-space: nowrap; > list-style: none; > position: relative; > padding: 0 0 4px 8px; > > } > > #hmenu ul li a { > display: block; > padding: 0; > margin: 0; > text-decoration: none; > > } > > /* Sub links */ > #hmenu ul li ul { > clear: both; > display: none; > position: absolute; > left: 9px; > top: 22px; > > } > > #hmenu ul li:hover ul { > display: block; > > } > > #hmenu ul li:hover ul li{ > display: block; > width: 90%; > > } > > /* General style rules */ > .clr { > clear: both; > > } -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
