Thanks Philip... sorted now!
On Mar 6, 9:31 am, PhillipB <[email protected]> wrote: > 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]
