473,372 Members | 1,011 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

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 5046
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

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

Similar topics

6
by: Andrew Poulos | last post by:
Say I have a text area. When the user clicks a button the entered text displays in a DIV. If there's too much text to fit in that DIV then the overflow text (the text that doesn't fit in the first...
5
by: Aidan | last post by:
Greetings all, I'm trying to build a div based layout for a mambo template (work in progress), and I'm having a strange problem, 2 acctually, with scroll bars in IE. I've tried everything I can...
1
by: books1999 | last post by:
Hi there, I have a problem with this css/div and i cannot work it out. I would like either container to be able to push the background box to grow but in Firefox it overflows. Can someone find a...
60
by: deko | last post by:
As I understand it, most browser manufacturers have agreed on 16px for their default font size. So, this should be an accurate conversion for percentages: px % 16 = 100 14 = 87.5 13 =...
8
by: speralta | last post by:
I'm playing around with a test page that uses a <div id="main"within the context of a body with a width of 100% to center a fixed width field on a page. For some reason, the page is not centering...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
2
by: kaczmar2 | last post by:
I have a webpage that has 2 main DIVs - a title div and a content div. I want the title dive to always "stick to the top of the page and not scroll, regardless of the size of the window. The...
2
by: Csaba Gabor | last post by:
I have a table that sizes to take up most of the page's width. The (mostly empty) rightmost cell of a particular row starts off as wide as it can, but it might be that it gets something that...
3
by: Justin England | last post by:
Background: I am working for a client putting a textbook online. The layout of the textbook is straight forward and is easy enough to style with <h?>, <p>, <uland <oltags. The text book also...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.