469,366 Members | 2,366 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,366 developers. It's quick & easy.

css, overflow auto and font sizes

Hi!

I'm having issues with css in FF and IE regarding overflow: auto and font-size.

If I have a div like this:

<div style="overflow: auto">
<span>ipsumlorendictowhateveripsumlorendictowhatev eripsumlorendictowhateveasdasdripsumlorendictowhat everasdasdasdjasjdioasjiosdjasiojdoasjisdojiasojdo
</span>
</div>

I get a nice horizontal scrollbar in the div as expected.

However if I add a font-size declaration like:

<div style="overflow: auto">
<span style="font-size: 12px">
ipsumlorendictowhateveripsumlorendictowhateveripsu mlorendictowhateveasdasdripsumlorendictowhateveras dasdasdjasjdioasjiosdjasiojdoasjisdojiasojdo
</span>
</div>

It seems to revert to "overflow: hidden" behaviour (in FF - IE seems to add a horizontal scrollbar to the whole page). Further testing seems to indicate if the font is on the larger side, you might get a scrollbar, but smaller settings you lose it, so I'm thinking it might be some kind of browser issue with it miscalculating the width of the content inside the div.

Has anyone else encountered this, and figured out a way around it? Preferably not a JavaScript hack :)

Thanks a lot!
Nov 19 '07 #1
4 4576
drhowarddrfine
7,435 Expert 4TB
There must be more to it than what you show. I would not expect a scrollbar on any div based on what you have and the font-size doesn't matter either.
Nov 19 '07 #2
Hi,

This is the complete source of the page:

<html>
<body>

<div style="overflow: auto">
<div>ipsumlorendictowhateveripsumlorendictowhateve ripsumlorendictowhateveasdasdripsumlorendictowhate verasdasdasdjasjdioasjiosdjasiojdoasjisdojiasojdo</div>
</div>

</body>
</html>

I just tested it on a Windows Server 2003 box as well with the same results. Firefox gives me a scrollbar on the div when the text overflows the horizontal size of the page (might need to make browser a bit narrower depending on resolution). IE just gives the page a horizontal scroll bar.

Regardless of the effect, do you have any idea how I could implement this behaviour correctly? :) All I want is to stop posts stretching the page in phpbb, and the only solutions I've found on the web have been JavaScript hacks. The css spec leads me to believe overflow: auto should add a scrollbar if the content is too wide for the div. *confused* :(
Nov 19 '07 #3
drhowarddrfine
7,435 Expert 4TB
Ok, going back to your first post, then:
1) Remember that the normal font size is 16px so making the font size smaller will affect this.
2) You will never get IE to attempt to act like a modern browser without a proper doctype. See the article about doctypes under Articles above. Use strict.
3) A browser cannot break a word that doesn't have any spaces in it. That's why it reverts to 'hidden' cause there is no known place to jump to the next line.
Nov 19 '07 #4
Ok, going back to your first post, then:
1) Remember that the normal font size is 16px so making the font size smaller will affect this.
2) You will never get IE to attempt to act like a modern browser without a proper doctype. See the article about doctypes under Articles above. Use strict.
3) A browser cannot break a word that doesn't have any spaces in it. That's why it reverts to 'hidden' cause there is no known place to jump to the next line.
Excellent - doctype has fixed both problems - firefox now always has a scrollbar, and IE has one too (though it's buggy, the horizontal scrollbar causes it to add a vertical scrollbar). Thanks for the suggestion :)

Unfortunately it seems like phpbb doesn't declare its doctype properly, and when I make it so it does not use quirks mode it screws up the layout. Argh! Going to have to see if I can hack it a bit more to make it work in compliant mode.

Thanks again - I learned something today about doctypes.

If anyone else is interested in reading up on them, these links were very useful:

http://www.alistapart.com/stories/doctype/

http://randsco.com/index.php/2007/03/12/about_quirks_mode
Nov 19 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Andrew Poulos | last post: by
5 posts views Thread by Aidan | last post: by
1 post views Thread by books1999 | last post: by
60 posts views Thread by deko | last post: by
4 posts views Thread by reycri | last post: by
2 posts views Thread by kaczmar2 | last post: by
2 posts views Thread by Csaba Gabor | last post: by
3 posts views Thread by Justin England | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.