Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

overflow:auto works in IE, not in Firefox 1

Status
Not open for further replies.
j0em0mma

j0em0mma

Programmer
Jul 31, 2003
131
US
In IE, as the browser window shrinks, the purple boxes on the side meet their limit, and the scrollbars pop-up. Firefox just scrolls the whole browser, ignoring the internal DIV's overflow property. I have tried adding a doctype 4.01 transitional, strict, etc... to no availe. I have tried setting the html, body selectors to height:100%, to no avail.

the Code:
Code: 
<HTML>
    <HEAD>
        <TITLE>test</TITLE>
    </HEAD>
    <BODY style="margin:0px;background-color:#FFFFCC;">
        <FORM id="Form1" name="Form1" style="margin:0px;">
            <INPUT type="hidden" ID="Frame_Name" value="main_console_TR_IFRAME">
        </FORM>
        <TABLE style="height:100%;width:100%;background-color:#FF7744;" border="0" cellspacing="0" cellpadding="0">
            <TR>
                <TD style="height:64px;width:64px;background-color:#4477FF;">TL</TD>
                <TD style="height:64px;background-color:#44FF77;"><div style="height:100%;width:100%;background-color:#0000FF;">TM</div></TD>
                <TD style="height:64px;width:64px;background-color:#4477FF;">TR</TD>
            </TR>
            <TR>
                <TD style="height:100%;width:64px;background-color:#44FF77;">
                    <div style="height:100%;width:100%;background-color:#0000FF;overflow:auto;">
                        <div style="height:300px;width:100%;background-color:#BB00BB;">ML<BR><BR>
<BR><BR><BR><BR><BR><BR></DIV>
                    </div>
                </TD>
                <TD style="height:100%;">MM</TD>
                <TD style="height:100%;width:64px;background-color:#44FF77;">
                    <div style="height:100%;width:100%;background-color:#0000FF;overflow:auto;">
                        <div style="height:400px;width:100%;background-color:#BB00BB;">ML<BR>
<BR><BR><BR><BR><BR><BR><BR></DIV>
                    </div>
                </TD>
            </TR>
            <TR>
                <TD style="height:64px;width:64px;background-color:#4477FF;">BL</TD>
                <TD style="height:64px;background-color:#44FF77;">BM</TD>
                <TD style="height:64px;width:64px;background-color:#4477FF;">BR</TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>

Is this possible in Firefox? If not, why not?
 
Sort by date Sort by votes
A good page to look at (which describes the box model very well) is:


Have a read of that and see if that helps describe how browsers interpret the margin and padding.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
but it's frustrating
Click to expand...
I agree with you 110%, but there's a silver lining - it gets much easier as you start to understand.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
Little late on the reply....

I didn't think my last (technically 2nd to last) reply held too much venom - other than the last line which was merely thrown in for the amusement factor I guess.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
I'm not a blind proponent of any technology.
I'm not anti-MS or anti-Open Source.
I don't automatically assume that Firefox is always going to do everything right (I have found a bug or two myself).

The problem is that Firefox hits the standards much more closely then IE does. When I started using Firefox I too was building in IE first then hacking to make it work in Firefox. The problem is that that method is possibly the most painful way to do it. The reason being that you get used to the way a browser renders and unfortunatly that leaves you in a bad position to write for browsers that are more compliant because you have to unlearn or relearn several things.

That said,
the point of my example post above, where I took out the portion of your code that supposedly wasn't working and tried it on 3 differant versions of Firefox on two OSs (tried FF 1.5 later on both Windows XP and Linux 2.6-ish). As wa spointed out by at leats one other poster, the issue is likely something to do with your layout. I don't understand your exampled and see at least 5 differant things that should be breaking more horribly then they actually are.

According to standards, a row height (and thus it's internal cells) is determined to be the largest value required to contain the specified cell heights OR the minimum required height to contain the contents of those cells. Example:
Code: 
<html>
<body>
<table>
	<tr>
		<td style="height: 100px; background-color: blue; overflow: auto;">
			<div style="height: 200px; background-color: green;">Oversize Cell Contents</div>
		</td>
	</tr>
	<tr>
		<td style="height: 100px; background-color: red; overflow: auto;">
			Plain cell contents
		</td>
	</tr>
</table>
</body>
</html>

Now, the problem with your example is that you have enclosed a fixed size div inside a div with a dynamic height inside a table cell with a dynamic height. The first issue your seeing (the text falling outside the div) is the proper behaviour. You have defined a fixed width for the div so extra text is not supposed to cause that element to inflate. This is a known bug in IE with various work arounds posted on several major sites.
Now the rest, I don't know what to tell you. I am not a master of the HTML DOM model and you have a very confusing setup going on. As far as I can tell the logic for most doctypes will be:
Since the div has a height of 100% it's actual height will be determined by the minimum size required to hold it's contents. Since it's contents consist of one div with a fixed height, the original div adopts that height and attempts to adopt the height of the text that is overflowing out of that div if the space is available. This is all done before any overflow is calculated. The table cell is then calculated to be the height of that top div as it need to be large enough to hold it's content. The table row then adopts that size, being the cell with the largest height requirement.
IE, on the other hand, is doing things a little backward. It is first calculating the 100% height of the table cell based on the height of the table. The table is 100% so the height is determined to be the size of the viewport. After removing space for the other two rows the remainder is then assigned to the middle row. Up until this point it is doing things incorrectly. Now, by stretching the rules and assuming a non-strict doctype, it is correct in making the height of the first inner div be the size of it's parent container (based on the incorrect logic that preceded this). The rest is also incorrect, as the inner div should not be stretched beyond it's 300px fixed size, the content should overflow out (though my preference would be for it to take a default of overflow: hidden rather than overlapping lower cells like FF).
And thats why your model is broken.

Oh, and span tags are not block elements. IE is rendering that incorrectly as well. If you wish to treat it as a block element you will need to set the display attribute to "block". By default spans are inline elements.

barcode_1.gif
 
Upvote 0 Downvote
Tarwn,

thank you for your post, that was most insightful. I am aware that the standard is to render only what is necessary to show the minimum content. That is the basis of my irritation, and the thing no one has been able to clearly defend: why in the world interpret it this way? I want the darn thing to be 100% of its parent space. I was always infuriated when MS Office would autoformat something on me and wreck what I was doing. I feel this is somewhat similar. Why impose this? It causes all kinds of problems. I don't see any value myself. As an aside, why differentiate between height and width as far as behvior is concerned. What purpose is being served to limit the height styling? Why not make it possible in css standard to align vertically like text-align does horizontaly? If they did these two things, I could scale the heck out of anything I wanted. As it, I must now resort to javascript to absolutely position and re-size a series of divs everytime the page loads or reloads, because Firefox is looking in weird places for where the parent height element should come from, in my opinion.



I thought the layout pretty simple. There are 9 cells. three rows and three columns. This, as far as I know, is the only way, without using client or server side script, to make a fully scaling site in all dimensions. The intent is that the table fill the viewport, and use the 8 cells on the outside to create a "border" of 64 px. The center should thus be screewnWidth - 128 px wide, and screenHeight - 128 px tall. The left and right outside cells are going to hold scrolling content (if it over flows). I'd like to use the built in scroll bars as opposed to making a clientside script scroll bar, which I have done, but requires too much maintenance. I should be able to throw anything I want into these cells and, as soon as the div reaches maximum, have it bring up scrollbars. Who cares if it's a span, a div, a table, an iFrame, whatever. The center should then give me a canvas to place an iFrame to hold content and functionality. If you then place tiling images in the N,W,S,E dimensions that match up with images in the corners, and voila, you have a stretching console. This method works great in IE. I have tried the simpelest examples, and it doesn't work this way with doctype on or in Firefox. You all may be correct, this is the way the Standards say it's supposed to be, I read it to. But I assumed I must be missing something, because it seems like such an unneccassary, and illogical limitation to place on the layout, so I ignored and went for it. Since IE was the only place I saw it work the way I assumed it logically must, I based my efforts on what worked there and tried to port it.

Just in case I actually am completely ignorant and off in left field, Can anyone see a way to do what I am describing the RIGHT way? 3x3, do it with divs, do it with tables, don't care. Make it scale, make the cells scroll when the page scales below the dynamic cells' and divs' heights.

Anything should be possible in 2 dimensions right? Time to put yer money where your mouths are. No client side script.
 
Upvote 0 Downvote
ca8msm,

A good page to look at (which describes the box model very well) is:


Have a read of that and see if that helps describe how browsers interpret the margin and padding.
Click to expand...

This is what I couldn't believe when I read it the first time two years ago.

Even the authors say:

Microsoft had decided to flout the standards and create their own box model. It must be said, their one is more logical than the standardised W3C model...
Click to expand...

The weirdness in the CSS2 standard box model causes a lot of problems. Can anyone tell me what advantage the current CSS2 standard has over the Microsoft quirksmode box model?
 
Upvote 0 Downvote
Just for the heck of it, here's my stab at your layout without any tables. Works until you make the browser really really small. Wierd things happen at less than 128px tall and about 140-ish wide.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>
/* play with the viewpane height */
body{
	padding: 0px;
	margin: 64px 0px 64px 0px;
}
/*	setup some generic column classes	*/
.lcol{ float: left; width: 64px; height: 100%;}
.rcol{ float: right; width: 64px; height: 100%;}
.ccol{ width: auto; height: 100%; margin: 0px 64px 0px 64px;}

/* setup the CSS for the three major IDs */
#top{ position: relative; margin-top: -64px; width: auto; height: 64px; background-color: blue;}
#middle{ position: relative; width: auto; height: 100%; background-color: blue; clear:both;}
#bottom{ position: absolute; width: auto; height: 64px; background-color: blue;}
/* apply some additional colors */
#top .lcol, #top .rcol, #bottom .lcol, #bottom .rcol{
	background-color: red;
}
#middle .ccol{
	background-color: purple;
}
/* set overflow on the middle left andright columns */
#middle .lcol, #middle .rcol{
	overflow: auto;
}
</style>
</head>
<body>
<div id="top">
	<div class="lcol">TL</div>
	<div class="rcol">TR</div>
	<div class="ccol">TC</div>
</div>
<div id="middle">
	<div class="lcol">ML
		<div style="height: 400px; background-color: gray;">this is a fixed height div</div>
	</div>
	<div class="rcol">MR
		<span style="display: block; height: 400px; background-color: gray;">this is a fixed height div</span>
	</div>
	<div class="ccol">MC</div>
</div>
<div id="bottom">
	<div class="lcol">BL</div>
	<div class="rcol">BR</div>
	<div class="ccol">BC</div>
</div>

</body>
</html>

Oh, and you'll notice an IE calculation error in a couple places with some extra margins that don't appear to belong to anything.

barcode_1.gif
 
Upvote 0 Downvote
I stand 100% corrected. Burly!!! Very, very cool. Thanks everyone, particularly you, Tarwn, for putting in the time, even after I was a jerk. Kudos!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
756
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
174
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top