SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Forums
SiteExperts.com Forums
All Discussions

SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : HTML and CSS :

Previous DiscussionNext Discussion
 the well known height bug in firefox

ok, so what happens when html height is 100%, body height is 100%, every singly height i can find is 100%! but in firefox, 100% STILL remains only the height of the viewing window, so once you scroll down the pretty little background colours disappear?

can anybody offer any help as to why my left and right side panels don't stretch ALL the way down in firefox, and instead fill only one screenful?

I've tried using min-height to ff and using /height to give a different height to ie. but a) this doesn't work and b) i don't really understand the logic behind it so i figure it's best if i don't use it!

Doctype I'm using: <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(I use this one for no particular reason - it's just what I normally work with).

css:

<style>
html {
 height: 100%;
}
body {
 margin: 0;
 padding: 0;
 font: 75% geneva, arial, helvetica, sans-serif;
 color: #333;
 height:100%;
}
.container { /* contains all 3 divs */
 width: 100%;
 height: 100%;
}
.left { /* side panel on the left, contains a background image */
 width:5%;
 min-height: 100%;
 /height: 100%;
 float: left;
 position: relative;
 background-color: red;
 background-image: url(images/bgPanelSides.gif);
 background-repeat: repeat-y;
 background-position: right;
}
.leftTop { /*sits at top of left side panel, has a bg image which matches the height of the header */
 height: 157px;
 background-image: url(images/bgPanelTop.gif);
 background-repeat: repeat-x;
 width: 100%;
 position:absolute;
 top: 0;
 left: 0;
}
.right { /*side panel on right */
 width:5%;
 min-height: 100%;
 /height: 100%;
 float: left;
 position: relative;
 background-color: red;
 background-image: url(images/bgPanelSides.gif);
 background-repeat: repeat-y;
 background-position: left;
}
.rightTop { /*sits at top of right panel, contains a bg that matches the header */
 height: 157px;
 background-image: url(images/bgPanelTop.gif);
 background-repeat: repeat-x;
 width: 100%;
 position:absolute;
 top: 0;
 right: 0;
}
.centre { /*all my text sits in here */
 width: 90%;
 background-color:blue;
 float: left;
 position: relative;
}
</style>

HTML

<div class=container>
 <div class="left">
  <div class="leftTop"></div>
 </div>
 <div class="centre">This is where all my text etc goes </div>
 <div class="right">
  <div class="rightTop"></div>
 </div>
</div>

 

Started By meriwa on Sep 6, 2005 at 2:05:39 AM

17 Response(s) | Reply

Earlier Replies | Replies 11 to 17 of 17 | Later Replies
Goto Page: 3 2 1
kara_404 on Apr 26, 2006 at 1:45:53 PM (# 11)

I know I'm late to post a solution, but I had to resolve a similar problem on a site I was working on.

The problem:
My content was displayed in a centered, fixed-width div with a white background over a gray page. The height of the div was set to 100%. When the length of the browser window was shorter than the length of the page's content, Firefox would terminate the white div at the bottom of the browser window, and display the remaining content on the site's gray background. IE would continue the white div to the bottom of the page. (FF = 100% of browser window; IE = 100% of body length)

If I removed the 100% attribute from the height property, Firefox would display the white div to the end of the content, resolving the height issue for short browser windows, but would terminate the div at the end of the content, leaving empty gray space below the content if the browser window height was greater than the height of the content.

To resolve the issue, I nested 2 divs: #container and #main.

/* begin IE - Firefox 100% height hack */
#container {
margin: 0px auto;
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
width: 768px;
text-align: left;
height:100%
}

#main {
margin: 0px auto;
background-color: white;
width: 766px;
text-align: left;
}
/* end IE - Firefox 100% height hack */

The #main div allows the white background to display to the end of the content when the browser window is shorter than the length of the content in Firefox, while the #container div allows the white background to continue to the bottom of the window in both IE and Firefox.

It's ugly, but it works.*

*this has not been tested in Safari for Mac.


beedee78 on May 16, 2006 at 12:06:36 PM (# 12)
This message has been edited.

This fix worked perfect for me in all browsers, including firefox:


<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;">
CONTENT
</div>


MHenke on May 17, 2006 at 1:29:14 AM (# 13)

Hum, doesn't work for me in IE6/WinXP.


Locnar on Dec 29, 2006 at 9:08:58 PM (# 14)
This message has been edited.

This issue is driving me absolutely NUTS!! I have tried everything here in addition to everything else I could find online and nothing works.

Any help would be much appreciated!!

http://www.multisourcingchina.com/city

OR (having some DNS issues w/Yahoo)

http://cs2.simplehost.com/~harveym/city/

Thank you!

Locnar


jmbl on Feb 27, 2007 at 11:55:37 AM (# 15)
This message has been edited.

I made a little change of beedee78 suggest and works fine on FireFox and on InternetExplorer

<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; width:100%; height:100%">
CONTENT
</div>


PaddyCallaghan on May 23, 2007 at 8:48:05 AM (# 16)

I have recently had a similar issue, where i was adding a CMS to a web site.

I redid my framed design in CSS and therefore had a top, left and bottom set section, with my website appearing in the middle right viewport.

--------------------
| ________________|
| | |
| | |
| | site here |
| | |
| |_______________|
| |
--------------------

When i had a background image repeating on the middle cell, with FF when scrolling down, like in your problem it stopped the image at the edge of the viewport, and displayed a white background afterwards.

IE was fine.

Like another member said in an earlier reply when they were talking about a similar incident but horizontally, i changed the height setting in CSS from height: 100% to *height: 100%.

Making this an IE only value worked in both.

Best of luck with the award.


Steven Kuypers on Dec 2, 2007 at 2:55:28 PM (# 17)

I had the same problem: a background image did not repeat to a 100% in Firefox. Sometimes id did do it well after hitting the refresh key, but then after hitting F5 again it would be wrong again .. or not, a bit unpredictable.

It is somewhat buggy, a rare occasion of something that's better in IE then in FF.

Anyway, I did find a workaround, which does not explain much.. but it works.

On some pages of my website I had 3 columns, on others 2. I noticed that the background-image (in column one) didn't repeat to the length of the page on the 2 column-pages, but it did well on the 3 column-pages. The third column is an empty table with a height of 100% (and a color that differs from the rest of the page).

So, what I did: I added this to the 2 column-pages:

<td>
<table
class="withoutThisTableTheImageInTheLeftColumnDoesNotRepeatInFirefox" cellpadding="0" cellspacing="0"><tr><td></td></tr>
</table>
</td>

and this tot the css:

.withoutThisTableTheImageInTheLeftColumnDoesNotRepeatInFirefox {
border-collapse: collapse;
height: 100%;
width: 0px;
margin: 0px;
background-color: white;
}

And now.. it looks perfect, in IE and in FF


Earlier Replies | Replies 11 to 17 of 17 | Later Replies
Goto Page: 3 2 1

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password
Copyright 1997-2004 InsideDHTML.com, LLC. All rights reserved.