471,874 Members | 1,869 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,874 software developers and data experts.

display:block and scrolling overflow width problem


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

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

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


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?

Feb 3 '06 #1
1 6250
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 */

#menu>ul>li>a.item { /* ie win cannot correctly parse child selector rule */

#menu { /* take advantage of underscore hack bug to not show clipped
data in ie*/
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...

Width:auto; overflow:visible;

width:100%; overflow:hidden;
Feb 3 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Jeff Thies | last post: by
18 posts views Thread by David Morris | last post: by
7 posts views Thread by Marc | last post: by
2 posts views Thread by ruby_bestcoder | last post: by
25 posts views Thread by Dave | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.