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
Firefox just scrolls the whole browser, ignoring the internal DIV's overflow property.
Click to expand...

Without looking into too much detail, I'd say that Firefox is getting it right, and IE is getting it wrong.

Think about it for a minute... you have specified a DIV with a static height of 400px - so why should scrollbars ever appear on it unless its content exceeds 400px in height (which one line of text saying "ML" clearly won't do)?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
No, that is not the case. The purple boxes' (color: #BB00BB) specific heights are merely for testing, and they are not the scrolling divs, they are inside the scrolling divs. These may have 10 px of content or 1500px of height. Their container boxes, which are supposed to scroll when THEY have overflowed, don't in Firefox, do in IE. IE is doing what I envisioned. Firefox cannot be begged, pleaded with or cajoled into doing a darn thing about the overflowing content.

Just to be straight forward. If I set a div to be 100% tall and 100% wide and give it overflow auto, and put another div inside it with height:400 px and width:400 px, as soon as I make the window smaller than 400 px in either dimension, that outer DIV should start scrolling, right? It is hard to conceive of another way to interpret this, and this is a simple version of exactly what I'm trying to do with this sample.
 
Upvote 0 Downvote
Hmm, oddly enough it works for me in Firefox. Here was my test:
Code: 
<div style="width: 100%; border: 2px dashed green">
	<div style="overflow: auto; background-color: #33AA33;">
		<div style="width: 400px;">
			Nested Test Box
		</div>
	</div>
</div>
<div style="overflow: auto; background-color: #AA3333; width: 100%;">
	<div style="width: 400px;">
		Simple Test Box
	</div>
</div>
<div style="height:100%;width:100%;background-color:#0000FF;overflow:auto;">
	<div style="height:400px;width:100%;background-color:#BB00BB;">original testbox<BR><BR><BR><BR><BR><BR><BR><BR></DIV>
</div>
The first two show the horizantal scrollbar if the width of the browser forces it under 400px (and it makes a little extra room for those bars so you can still see the content). The last one is your own code for when the height overflows vertically. Both work on Firefox 1.0.7 for Windows and (amazingly, despite it's other issues) Firefox 1.0.4 for linux. Haven't tried 1.5 yet.

The first one does not work correctly in IE, the second one gets it's entire content overlayed by the scrollbar (though I guess that means it works), the third one works.

barcode_1.gif
 
Upvote 0 Downvote
This has Got to be a bug in Firefox.

Code: 
<HTML>
    <HEAD>
        <TITLE>test</TITLE>
        <STYLE>
            html,body {height: 100%; margin: 0px;}
        </STYLE>
    </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;background-color:#BB00BB;">ML<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>test point</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;">
                        <span style="height:200px;width:100%;background-color:#BB00BB;">MR<BR><BR>
<BR><BR><BR><BR><BR><BR></span>
                    </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>

I can get the stuff to work okay with widths, and outside of a table it is okay. The above example only works when you extend the content of the inner div past it's height. Then the scrollbar on the outer div comes in, but fails once it reaches the inner div's original height (without the overflow). It seems you can only get the outer div to scroll when you over-flow an inner div. This is really weird. If you remove the inner div and just do
Code: 
<BR>
to make some content height, the scroll fails in Firefox (all of these examples continue to function in IE.

I do not wish to speak to the merits and reputation of Microsoft or Netscape, but the "Firefox is doing it right" blind faith is starting to wear really thin. I do this all the time, and say what you will, when there's a problem, it is 9 times out of 10, in my experience, weird crap like this that Firefox can't handle. For example, adding the padding to the overall dimensions of the element?! What if I set the element to height or width of 100%? Won't that make it impossible to ever make something have both padding and be properly 100% of the height or width of its parent? I don't want to be mean, but let the mantra GO, firefox is not yet good enough, at least for the complicated stuff I want to do. The old concept of this being solely an information medium where a pixel here or there doesn't matter is dead. We are using this medium to make complex applications where that pixel does matter. Anytime the concept of "that's how it should work" overrides the thing actually doing what I conceive is ridiculous. I need precision, and firefox just isn't cutting the mustard.
 
Upvote 0 Downvote
firefox is not yet good enough, at least for the complicated stuff I want to do
Click to expand...
The only complicated thing I see you doing is using the overcomplicated table layouts that have been dead for years now. If you really think firefox needs to be brought up to speed then perhaps you should take a step back and look at your coding techniques first because that's what appears to be lagging behind - duplicate inline styles on multiple tags, using br's to create vertical space, and then of course the aforementioned table layout.

I wouldn't come preaching about the supposed "faults" of firefox when you don't have the first clue about why you're seeing the behavior that you apparently disagree with the w3c about why it is happening.

Here's my suggestion - get your pages to work in firefox first and then hack them to death to make them work for IE. That's what most other competent web developers do.

Additionally, you should learn to use a doctype, validate your code, and get away from using tables to layout your pages. Just because that's the method we all learned back in high school when we made our first webpage doesn't mean that we should still be using it.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
IIRC interpretation of this height thing also depends on DTD used... Transitional/Strict, HTML/XHTML ?

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)
[banghead]
 
Upvote 0 Downvote
weird crap like this that Firefox can't handle. For example, adding the padding to the overall dimensions of the element?!
Click to expand...

This is how it's defined to work by the W3C. The World Wide Web Consortium. Run by Sir Tim Berners Lee. As in the guy who invented HTML.

You'll find that this is also the way that IE7 behaves in standards-compliant mode. Even Microsoft admit that they got it wrong.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
I guess I was asking for it, I would like to tone this down, but you make a number of assumptions that are not true. As a matter of fact, I do use doctype as neccessary. This piece of code I provided is what is known in the forum world as a SAMPLE, modified from it's original after mass eforts to get it to function properly. If you must know, this page performed MOST poorly with all HTML 4.01 doctypes and had to be removed, which should tell you something. As a matter of fact, I did have this completely classed and styled with the minimal required css for what should have been an easy opperation. What you see now is me butchering it on Firefox's behalf, dude. Just because IE is the dark side doesn't mean it isn't better in a lot of ways (and worse in a lot of ways). I am a strong proponent of open-source, counter-Microsoft development. I was expressing frustration that now that I am into my foray of cross-browser compatible coding (only IE before), and I'm trying to do it right with Doctype that A) Firefox is really screwy in a lot of ways, and B) when you try to get help, you are instantly told (as if you even knew yourself) that you are a fool and must be doing it wrong. Where do you get your faith? In the simplest examples of scalable websites, Firefox continually drops the ball, whether doctyped or no (yeah, I really want the brower to only fill up the screen as far as I have content, not stretch the whole way like a real application) way to go, you've convinced me, it's totally superior.
 
Upvote 0 Downvote
This has Got to be a bug in Firefox
Click to expand...
I do this all the time, and say what you will, when there's a problem, it is 9 times out of 10, in my experience, weird crap like this that Firefox can't handle
Click to expand...
firefox is not yet good enough, at least for the complicated stuff I want to do
Click to expand...
With all due respect, I think you're completely wrong in all the above quotes.

What you are doing (and kaht put this this very well) is outdated, over complicated and the only reason why your page isn't being displayed as you want. Used properly, FireFox is perfectly capable (and conforms to the WC3 standards unlike Internet Explorer that for some reason you think does?) of any valid (X)HTML and CSS. By valid, I mean using the correct DOCTYPE (as you aren't even using one and just goes to show a lack of understanding on why the pages function differently on different browsers) and validating your code on the W3 website, which at the moment fails validation.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
The window is 600 px wide.

I have doctype 4.01 HTML transitional declared

I place a div on the page that is width:100%;padding:5px;

The pedigree is meaningless to me. You're telling me that this page should produce a scrollbar and that it is correct for it to render at 610px width?

This is correct?

 
Upvote 0 Downvote
the very first line of this thread:

...I have tried adding a doctype 4.01 transitional, strict, etc... to no availe....
Click to expand...

ca8msm writes:

By valid, I mean using the correct DOCTYPE (as you aren't even using one and just goes to show a lack of understanding on why the pages function differently on different browsers)
Click to expand...

sigh....
 
Upvote 0 Downvote
This piece of code I provided is what is known in the forum world as a SAMPLE, modified from it's original after mass eforts to get it to function properly.
Click to expand...
That's fine, and not a problem, but in order to get the best help you have to tell us! How are we supposed to know that you have a DOCTYPE if you choose not to tell us?

As a matter of fact, I did have this completely classed and styled with the minimal required css for what should have been an easy opperation. What you see now is me butchering it on Firefox's behalf, dude.
Click to expand...
You don't need to "butcher" anything for FireFox's sake. Show us your original code that doesn't use tables for page layout, is styled using CSS using classes and we will gladly point out where you are going wrong. There's no need to provide the mess above on our behalf.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Why not put margin on the child?
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
    <head>
        <title>test</title>
    </head>
    <body>
    	<div style="width:100%;">
    		<p style="margin: 5px; background-color: #f00;">&nbsp;</p>
    	</div>

    </body>
</html>
There's always a way, and once you understand standards-compliant development, it's really quite easy, and does make sense.

You can do amazing things with standards compliant HTML and CSS - just take a look at the CSS Zen Garden.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
Huh?

One red stripe, nothing related to 100% height and table-based design...

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)
[banghead]
 
Upvote 0 Downvote
vongrunt, my reply was in response to j0em0mma's post:
j0em0mma said:
The window is 600 px wide.

I have doctype 4.01 HTML transitional declared

I place a div on the page that is width:100%;padding:5px;

The pedigree is meaningless to me. You're telling me that this page should produce a scrollbar and that it is correct for it to render at 610px width?

This is correct?
Click to expand...

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
this page performed MOST poorly with all HTML 4.01 doctypes and had to be removed, which should tell you something
Click to expand...

Yeah... poor coding techniques comes instantly to mind.

I was expressing frustration that now that I am into my foray of cross-browser compatible coding (only IE before)
Click to expand...

I was there at one time too. A lot of us were. But where your problems arise is that you've learned by using poor techniques for so long that you'll have to train it out of yourself. Forget completely about what works for IE. You've got to get outside of that box or you're never going to get it. I'd suggest doing a lot of research in your free time. You'll really be surprised at how much better your pages will become - and most importantly - so will your boss.

As I mentioned before, don't code your pages to work in IE and then try to patch them to work in firefox. Do it the other way around. If microsoft is going to step up to the standards compliance plate like they've said they're going to, then I think you'll find that some of your old techniques aren't going to work once IE7 gains more popularity - which it inevitably will. And then hopefully - lo and behold those pages you coded to work in firefox will work the same in IE7 (take note that is a BIG hope).

Standards compliance is the way that the web market is heading, it's probably in your best interest to stay ahead of the curve. That's going to involve a lot of research and testing on your behalf, there's really no way around it.

And if you're still insistent with sticking to your old ways, then that's fine. That's more money for the rest of us.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
ca8msm writes:
By valid, I mean using the correct DOCTYPE (as you aren't even using one and just goes to show a lack of understanding on why the pages function differently on different browsers)
Click to expand...
sigh....
Click to expand...
So, if you tried to use them, why on earth would you post an example that doesn't use them and then claim that FireFox chokes on them?!

As I've said above, post your original code that was styled correctly without tables for page layout and we'll help.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
First, I would like to say I appreciate everyone's interest and effort. Kaht has given me some great tips in the past, and I recognize ca8msm from many threads. Thank you very much, sincerily. I did not keep the original, please allow me some time to put together the best example I can and I will get back to you.

To me, some of the W3C standards are really conter-intuitive. Manarth, what if I have content that needs to be displayed inline without margins sometimes, and with margins others? If the only way I can do this is to produce server or client side script to change the element's class OR two sets of html nuggets that work in either scenario, then this really limits what you can/have time to do. If this is the standard, why have a margin if the padding is going to define the outer limits of the element? It's just screwy. It should be an onion you peel away, not a weird edge that rides up over the external definition. That's my two cents... I accept that there are standards and to bay at the moon is pointless, but it's frustrating.
 
Upvote 0 Downvote
erggghhhh...... Khat! You are bright, but insufferable. Who are you to assume all of this? I've been trying to write compliant code for a long time. I have finally made a great deal of progress, simply because I had the time to screw around with it. I read the standards, I know it's best to not use inline css. I read all about doctypes. I have read javascript in a nutshell start to finish... I worked at a shop that didn't give us R&D time to figure this out, that doesn't mean I'm a sloppy lazy, know nothing without the first clue... ouch! I felt bad for firing the first shot, but you're using mustard gas! We're all on the same side here, folks! Why do you feel the need to be so presumptive and disdainful?
 
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