Topic: IE5.01 CSS offest rollover problems

This a little cross post from sister GN. Here is the page in question

Please kind persons have a look at this in IE5.01 Win. This is the only browser treating it poorly. What's it doing you ask?

1. the background image offsets for the rollovers are off

2. when you rollover one of the links in question, the div that they are in expaaaaands/moves down the page, chase it all you want, you'll never catch it. Not good for purposes of navigation.

There's a bit more foo regarding the problem (apparently irrelevant) on the example page text and style comment... I had aa go for a while at this last night and it drove me nuts, is now time for a break. I'll pick it up later and start again later today but I hope and pray in the meantime someone can spare me a bit of pain and my computer for that matter, she dun like being kicked

thanks

Jason: I think your running into a problem with IE5 calculating the box widths differently than the other browsers do. This (I'm sure you know) is called the box-model problem. I haven't had time to play with your site, but the behavior I see looks like the same effect I saw when designing other pages.

Try adding
width:80%;
voice-family: "\"}\"";
voice-family:inherit;
width:100%;
}


to the snav class. See if that will change the behavior.


Maybe this link will help.


<edit>Added link</edit>


-- not necessarily stoned... just beautiful.


[This message has been edited by hyperbole (edited 03-18-2004).]

ta-friggin-da!

I *know* you're on the right track, I was on the same track but it drove me absolutely nuts so I started over. I decided to try the regular pixy method that doesn't involve the extra divs and spans and I was able to jockey everything around (almost perfectly =\) so it works in IE5-6 and Mozilla.

There is one interesting thing in this new ^example I'm looking at that's got me puzzled. If you look at the CSS omment for #nav a's margin you'll see what I mean, it doesn't make sense to me, if anyone can exaplin WHY that happens I'd love to know.

thanks hyperbole

Again your dealing with the box-model hack. IE uses width and height to specify the width (height) of the content area of a block. The standard says that width (height) should specify the width (height) of the entire block. When you add the 5px margin to block IE adds the extra 10px (top and bottom) to the size of the div. All the other browsers keep the div height the same and reduce the amount of space allocated to the content area.

There may also be some rounding error involved when the browser is renders the blocks. That may be what is causing the jumping when you only specify the bottom margin.

In any case it is these differences between IE and the standard that cause differences in the way the divs are displayed.

I try to avoid the use of both margin and display in the same layout. If i need margins, I set the padding of all blocks to 0 and only give margins for any blocks. And vice versa.




-- not necessarily stoned... just beautiful.