css, overflow auto and font sizes

[obanite]

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>ipsumlore ndictowhateveri psumlorendictow hateveripsumlor endictowhatevea sdasdripsumlore ndictowhatevera sdasdasdjasjdio asjiosdjasiojdo asjisdojiasojdo
</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">
ipsumlorendicto whateveripsumlo rendictowhateve ripsumlorendict owhateveasdasdr ipsumlorendicto whateverasdasda sdjasjdioasjios djasiojdoasjisd ojiasojdo
</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!

[drhowarddrfine]

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.

[obanite]

Hi,

This is the complete source of the page:

<html>
<body>

<div style="overflow : auto">
<div>ipsumloren dictowhateverip sumlorendictowh ateveripsumlore ndictowhateveas dasdripsumloren dictowhateveras dasdasdjasjdioa sjiosdjasiojdoa sjisdojiasojdo</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* :(

[drhowarddrfine]

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.

[obanite]

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_mo de