Closed Bug 340865 Opened 19 years ago Closed 19 years ago

Firefox's CSS Rendering Wrong with 100% Height

Categories

(Core :: Layout, defect)

1.8 Branch
x86
Windows XP
defect
Not set
major

Tracking

()

RESOLVED INVALID

People

(Reporter: labrie0, Unassigned)

References

()

Details

Attachments

(5 files, 1 obsolete file)

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4 Whenever there is something set to be 100% height, Firefox renders it as if it was 100% of the viewing window instead of 100% of the page. This is not the way to render CSS properly. Moreover, if I use for a DIV in my CSS, for instance: "position: absolute, bottom: 0px;", Firefox will put this DIV at the end of the viewable window, but not at the end of the page, causing this DIV to be over some of the content of the website. Reproducible: Always Steps to Reproduce: 1. Simply putting 100% height to any tag (div, body, etc.) or 2. Position: absolute, also affected by this bug. Actual Results: A DIV set to "position: absolute; bottom: 0px;" overlaps the content of the page, because it is simply put at the end of the viewing window. Expected Results: The DIV should have been at the end of the page, not overlaping with the page's content.
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.8 Branch
Ok here's my take on interpreting the spec (CSS 2.1) for the absolute positioning. I pull a couple of sentences out from: Visual formatting model details http://www.w3.org/TR/CSS21/visudet.html "The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block ..." So in the case of having an absolute positioned div that is contained by the body, the div will use the initial containing block. "The containing block in which the root element lives is a rectangle with the dimensions of the viewport, anchored at the canvas origin for continuous media, and the page area for paged media. This containing block is called the initial containing block." So that's why the absolutely positioned div in the case I gave above is positioned with respect to the viewport. I'll attach a sample which I hope is something like what you're trying to accomplish.
Attached file Using positioning
Attachment #224917 - Attachment mime type: text/plain → text/html
Ok, I have seen your example. You tried to put the "position absolute; bottom 0px; height: 200px;" DIV inside another DIV which had "position: relative; padding-bottom: 200px". Now this puts the "absolute DIV" at the bottom of the "relative DIV", not at the bottom of the page. Your fix only gives the illusion that the "absolute DIV" is at the bottom of the page because you have specified the content to be 1000px high, thus higher than my and most people's resolutions. Change the height of that containing DIV you put in the attachment from 1000px to 100px, and you will see what happens. Let's say I were to put "position: relative; padding-bottom: 200px" to the body tag, it would put the "absolute DIV" at the bottom of the body tag. Logically, if you apply "height: 100%;" to the body tag, it should take up the whole page, putting the "absolute DIV" at the bottom of the page. Nope, this command would make the body tag 100% height of the viewing window of the Firefox browser, known bug amongst webmasters: http://www.siteexperts.com/forums/viewConverse.asp?d_id=17779 http://archivist.incutio.com/viewlist/css-discuss/58670 There is not such display trouble with Opera. Any feedback?
does the reporter have a testcase or website?
Here's a solution to the question posed here: http://archivist.incutio.com/viewlist/css-discuss/58670 I tested it in Firefox 1.5.0.4. and a trunk nightly, Opera 8.54 and IE 6. With the caveat that in IE 6 the scrollbar is inside the borders but otherwise works. The min-height 100% makes sure that the border is at least the height of the viewport but doesn't limit it to height of the viewport. The height of the content div likely forces scrolling but I did also test it with that div with no height set so it is smaller than the viewport.
Yes, but I'm currently building it, so it might change. Here is the link: http://www.alexandrelabrie.ca/website/fr/parti.php Please check in both Opera and Firefox, you will notice the difference (if you don't see the problem, it might be better if you lower your screen resolution).
(In reply to comment #5) > Created an attachment (id=224952) [edit] > a solution to one question Darn I missed one testcase. That fails in Opera when the div is smaller than the viewport.
Attached file Altered testcase (obsolete) —
I changed the testcase some from comment #6. I made the CSS link absolute so it'll work as an attachment here. The footer now ends up at the bottom of the page instead of the bottom of the viewport. I added a new div because it didn't work when I tried using div#mid. I guess because it's display is table. The footer's layout isn't right in Opera 8.54. But that seems to be a bug because it does work in Opera 9 beta 2 like it does in Firefox. Is that what you're looking for?
No, you've done the same thing as the first attachment. The DIV is set to appear at the bottom of the DIV and not at the bottom of the page. If you take the text out, the DIV will simply be right after the content instead of being at the bottom of the page. (Attachment #224963 [details]) And see how it looks in Opera even if there is no content. (Please look at it BOTH in Opera and Firefox): http://www.alexandrelabrie.ca/website/fr/
(In reply to comment #10) I just want to comment the link I have just given (http://www.alexandrelabrie.ca/website/fr/). It will look fine in Opera and Firefox, but this is only because Firefox, by putting the DIV at "position: absolute; bottom: 0px;", puts the DIV at the bottom of the viewing window. If you then look at http://www.alexandrelabrie.ca/website/fr/parti.php where there is content, you will notice that Opera keeps the DIV at the bottom of the page whilst Firefox has it in the middle of the page, height of the viewing window. This is clearly a CSS rendering problem from Firefox. Putting the "absolute DIV" inside another DIV and trying to make a CSS hack will simply not do the job unless Javascript is used to counter this Firefox bug (which I will not do). I have just tried to apply "height: 100%; position: relative; paddin-bottom: 25px;" to the body tag, and it did not work either. In a page where there was no content, "height: 100%" was interpreted simply as the height of all the content the body tag contained. I think someone should confirm this bug.
Attachment #224962 - Attachment is obsolete: true
As for setting the height of the body or html to 100% that should be equal to the height of the viewport. "A percentage height on the root element is relative to the initial containing block." Which I already established that the initial containing block is the viewport. I don't think Opera is following the spec.
(In reply to comment #12) You have just named the problem. The viewport is *not* a containing block. However, Firefox interprets it this way. Is the viewport of the Firefox browser part of the website coding? Not at all. Firefox should interpret absolutes in regards to the web page, not in regards to its own viewing window. It should interpret it as the whole page, scrolling from up to down, and the "position: absolute; bottom: 0px;" really should be at the end when you have completely scrolled down. There is already another code to put something at the end of the viewing window and it is called "position: fixed;". Why would anyone want to use "position: absolute, bottom: 0px;" if it puts a DIV specified with this at the end of the viewport and then if you scroll, the DIV stays at the same place you see more of the page? Not a single webmaster would want to do that, this is completely illogical. He would use "position: fixed;" instead, where the DIV would be fixed at the bottom of the window. Position absolute bottom should, therefore, be at the bottom of the page. This is misinterpreted by FF.
The next version of opera (the beta version) does exactly what ff does now. So this bug has a ~higher probabability~ of being invalid. It may actually doing what you're asking it to do, however odd that may seem be. Frustrating perhaps. -- Some parts of css are rarely clear at first glance ... It does no help to rail about it though, one needs to carefully learn it before their criticism can be seen as valid ... I'm no expert. -- I am pretty sure there is css that can do what you want (which is to have your footer at the bottom of the viewport, no matter how you scroll). I suggest asking at http://forums.mozillazine.org , in the web development section. They are some fair experts there :).
Well it's very odd to see it shows like that on the Opera 9 beta. It is so illogical. First of all, absolute positioned DIVs are supposed to be over all the other containers since their position is set to be absolute. If you are right, and that it was in fact a bug in Opera 8.5, then this interpretation of CSS is of no use at all for making websites, and it restrains the possibilities in layout building.. Assuming this was a bug in Opera 8.5: "position: absolute;" would simply be a version of "position: fixed" that is not fixed. Therefore: completely useless. Here are the words about absolute positioning from W3 Schools: "With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page." Notice here the use of the word "page", and not viewport.. Who's right?
If I think about it for a second, I would have to use CSS to set the min-height of the body tag to 100% (100% stands, in Opera 9 and FF, for the percentage of the viewport). And then, I would have to use "position: relative;" on the body tag, in order to make it after the content if there is a lot, and 100% of the viewport if there is no content. However, when "position: relative;" is applied, "min-height: 100%;" or "height: 100%;" is cancelled. Shouldn't 100% height be the height of the page, and absolute positioning relative to the page instead of the viewport, just like W3 Schools says? I just don't see the link between the website and the viewport! Making a standards compliant website can be such a pain.. =(
I just found out something. The body and html tags' "height: 100%;" is interpreted by all browsers as 100% of the content it contains, *except* if the content is not high enough, the tag is somewhat expanded (background color) to 100% height of the viewport. However, only the background color is expanded. If I choose to take a DIV and make it "vertical-align: bottom;", it will be at the bottom of the content, not at the bottom of the page. Isn't that incoherent? Shouldn't 100% height always be interpreted at 100% of the content it contains OR 100% of the viewport if there is not enough content, just like it does for the background colour?
I found the solution to MY problem, but Firefox still has one. I found the solution to my problem here: http://www.alistapart.com/articles/footers (Connecting the container to the viewport) However, it required the use of a CSS hack. Here is A List Apart's comment on the issue: "What about the W3C DOM cavalry? Unfortunately, the W3C did not create any specifications on how to calculate the height of both browser window or document elements. They probably should have; standards exist so browser makers don’t have to create these specifications themselves. In this case browser makers were forced to create their own proprietary attributes. So if you want to use scripting to position elements relative to the browser window, you are condemned to use non-standards-compliant proprietary techniques. The question is: Is it a bad practice to use these techniques in an area where there is a lack of standards? In my opinion, this depends on how internally consistent these techniques are. If they are able to fill in the gaps of web standards and are used in a consistent way, I think they should be treated the same way as W3C specifications. If you have the choice between a pure CSS solution and one that combines CSS and scripting, it is wise to use CSS only. In principle, CSS should take care of style and JavaScript of behavior. However especially in the cases where standards are supported poorly or seem to be insufficient, using the DOM and JavaScript can enrich the way you style your web documents. In this case, a combination of CSS and scripting techniques can be justified." Will Firefox adopt any standard?
From the site given before: http://www.siteexperts.com/forums/viewConverse.asp?d_id=17779 I used one of the comments as a starting point for this testcase: <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;"> CONTENT </div> I think this testcase fits the requirements. At least in Firefox. Opera doesn't handle it the same way. Firefox's way seems right to me. I think the question that the browsers are answering differently is whether the min-height : 100 % on the div#artificialbody should apply or should it end up being changed to auto.
Try using position fixed --> http://css-discuss.incutio.com/?page=FooterInfo http://cookiecrook.com/bugtests/fixed.htm putting position fixed on the footer gets you halfway there.
(In reply to comment #20) >I think this testcase fits the requirements. At least in Firefox. Opera >doesn't handle it the same way. Firefox's way seems right to me. Opera fixed this between beta 2 and the version 9.0 final release. So you can use the testcase in comment #20 to get the result you want. Unless, like the times before, I'm missing something. I'm closing this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: