1 reply [Last post]
chuckcheeze
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2003-05-30
Posts: 5
Points: 0

http://www.wrea.com/products/default_new.asp

OK in all but IE 5 and 5.5 this is acceptable. I know IE 5 has some margin and padding issues and that explains that, but basically here is the deal:

Main menu bar (Home, Products...) should space out to have the last item finish about 40 pixels left of where "ergonomics" begins in the logo. In gecko's and IE6 this is perfect, in IE 5 there is no spacing between the words, and in 5.5 it is spread out beyond that point. How can I code this to work?

Code:

<div id="menu">
<a href="/">Home</a>
<a href="/products/" onmouseover="MM_showHideLayers('MenuProd','','show')" onmouseout="MM_showHideLayers('MenuProd','','hide')">Products</a>
<a href="/ergonomics/" onmouseover="MM_showHideLayers('MenuErgo','','show')" onmouseout="MM_showHideLayers('MenuErgo','','hide')">Ergonomics</a>
<a href="/literature/" onmouseover="MM_showHideLayers('MenuLit','','show')" onmouseout="MM_showHideLayers('MenuLit','','hide')">Literature</a>
<a href="/company/" onmouseover="MM_showHideLayers('MenuCompany','','show')" onmouseout="MM_showHideLayers('MenuCompany','','hide')">Company</a>
<a href="/support/" onmouseover="MM_showHideLayers('MenuSupport','','show')" onmouseout="MM_showHideLayers('MenuSupport','','hide')">Support</a>
</div>

CSS:

div#menu {
margin: 3px 0px 0px 2px;
}

div#menu a {
color: #000;
font-weight: 900;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
margin: 0px 1px 0px 6px;
background: #FFF;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Margin issues in IE 5 &amp; 5.5 ... looks good in IE 6

Hi Chuckcheeze,
Have you tried setting a width div#menu a {width:40px; ...
You would then have to play around with the size and margins etc but may end up with the result you are after.