display:block and scrolling overflow width problem

[Simon Dean]

Hi,

Im trying to learn CSS and putting a website in effect. Just getting
used to DIV's and SPAN's and using the proper formatting of H1 H2 H3 etc
to format HTML documents and using different stylesheets to control
formatting.

So far it's going pretty well, and Im just ripping up everything I knew
about tables and starting with DIV's. Though I seem to be having a hell
of a time working with padding and margins, then trying to realise if I
add a one pixel border, then a div I give a width of 150px to, will
actually be, 152px width including the border.

I dunno. Anyhow, i think what I have is a pretty good working model now.
Not the best, but not bad for a first attempt (seems CSS has an initial
shallow learning curve that anyone can pick up how to apply different
fonts, then an incredibly steep learning curve if you want to use it
properly).

Now Im just dumbfounded by the differences between IE and FireFox and I
was hoping maybe someone can help.

http://www.acutec.co.uk/test/s3/home.php

First of all, in Firefox, the menu on the left. Looks good. Doesn't use
JavaScript but if you click on say the About Us Link and drag to the
right, the content shifts.

I have had to do this, Im not quite sure what I did, but the roll overs
weren't working in Internet Explorer, only when the mouse was waved over
the link. I think it involved changing the width of the a element to 100%

Which then seemed to work, but the consequence, there was extra space
showing over the edge after the 175 width I had initially asked for on
the div container.

So I kind of fixed this momentarily with overflow:hidden; on the div,
but I didn't notice the scrolling until now.

Im looking for guidance and a fix if at all possible.

Any ideas?

Thanks
Simon

[Simon Dean]

Think I may have sussed it, but a more seasoned developers advice would
be much appreciated:

#menu>ul>li>a.itemon { /* ie win cannot correctly parse child selector
rule */
width:auto;
}

#menu>ul>li>a.item { /* ie win cannot correctly parse child selector rule */
width:auto;
}

#menu { /* take advantage of underscore hack bug to not show clipped
data in ie*/
_overflow:hidden;
}
The width settings should in theory reset the width of the links for
Firefox/Mozilla, I've removed the overflow:hidden from the #menu div and
applied it down here only fo IE. This seems to make both work...

Firefox:
Width:auto; overflow:visible;

IE:
width:100%; overflow:hidden;