background color bug in FF3 with fixed-fluid layout.

[Sarahc]

1) Script Title: CSS Liquid Layout #2.1- (Fixed-Fluid)

2) Script URL (on DD): http://www.dynamicdrive.com/style/la...1-fixed-fluid/

3) Describe problem:

My problem only exists in FireFox 3. The background color of the left column displays the same as the background color of the main content column. In FF2 and IE7 everything displays alright.

Site link for example: http://www.unfocused.org/combined

If you register (free) you can see change layout colors and see that the issue is on all the layout color themes. If I need to provide the code Im using to get help thats fine, just let me know. I dont know what else to try, Ive gone through everything and dont see what is making FF3 act like this.

Thanks in advance for your help.

Sarah

[Sarahc]

As an alternative to registering you can log in with the username: test and the password: test to take a look.

[jscheuer1]

Technically speaking, there is often no height:100% style as you have set for #outer in your stylesheet. When this is the case it is because 100% height would mean 100% of the height of the parent element, which itself might not have any height. I'm not sure if this is a bug in this case or just other browsers not following the specification correctly. In any case, Opera 9.5, which is considered a pretty standards compliant browser, shows it the same way as FF 3. Using FF 3's developer tools, I was able to see the #aaaaaa color background if I set an actual height, like 600px instead of 100%. I was also able to see the #aaaaaa background without changing the height by inserting a clear:left division here:

 . . . s-blue.png" alt="Valid CSS!" title="Valid CSS!">
</a>
</p>
    </div>
  
  </div>
  <div id="clearfooterleft"></div>
  </div>
  </div>
  <div style="clear:left;"></div>
  </div>
  </div>
  </div>
  <div id="footer">
  <div id="subf . . .

Which is just before the closing </div> tag of the #outer division. What this does is allow the #outer division to assume the natural height of its content, much if not all of which is (presumed to be, since this sort of works) floated left. It is this use of float (if in fact it is used here) that is in part at issue. Technically a floated element has no layout height.

Now, the best solution though seems to be to just (ignore all of the other suggestions I've made and) add the same % height to the container (#wrapper in this case):

#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
height:100%;
}

Assuming that is, that this doesn't mess it up in other browsers. It did get it closest to how it looks in IE 7 and FF 2.

[Sarahc]

Thanks for your help. Ive applied the fix and so far it seems to be working cross browser, at least for the ones I can test. I have a computer with IE 6 and FF2 and then I have another with FF3 and IE7. I checked the newest version of Safari on a co-workers computer and that seems to render alright as well.

For being completely self taught on CSS I think Im doing ok.