ansaurus

Question

Why does the dark blue background not appear in FireFox (it does in IE)?

Answer 1

+3 A:

Your #main div is floated, and a container doesn't automatically expand to contain floated children. However, if you apply overflow:auto to #page, it should expand like you were expecting:

#page 
{
  background-color:#082d47;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 0;
  width: 970px;
  overflow:auto;
}

Tim Stone 2010-08-18 18:24:42

Hi Tim - that works - you are awesome thank you!!! :-) SO won't allow me to accept it as an answer for another 3 mins. Until then I will sit and twiddle my thumbs :-)

Techboy 2010-08-18 18:30:04

Glad it's working! This is one of the few times where IE's incorrect behaviour actually was in the direction you wanted to go, thankfully. Much easier to get Firefox to do things as intended than to try and force IE to stop misbehaving, heh.

Tim Stone 2010-08-18 18:39:44

@Tim: This is one of the few cases where one can actually make Firefox behave like IE with a simple CSS addition. Usually that would be very difficult, and circumventing the quirks in IE is normally the way that you solve problems like this.

Guffa 2010-08-18 19:27:49

@Guffa - Yeah, unfortunately I'm all too familiar with that scenario. In the past I've spent many long nights getting frustrated trying to figure out which IE quirk was causing which inconsistency...Luckily these days, I don't have to double as a designer so much anymore. :)

Tim Stone 2010-08-18 19:44:36

Answer 2

+2 A:

As usually, when there is a difference in how Internet Explorer and Firefox renders a page, it's Internet Explorer that gets it wrong.

In this case it's a well known bug in Internet Explorer. When an element has floating elements that are larger than the element, IE will adjust the size of the element according to the children.

This is wrong, and Firefox does render the code correctly.

However, you can add CSS to the page element so that it should get it's size from the floating children. You just specify a value for the overflow attribute, like overflow: hidden;, to the #page rule, and you will get the background all the way.

The overflow rule doesn't change how content overflow is handled, as you haven't specified any height there is no overflow, but it affects how the element is sized.

Guffa 2010-08-18 18:29:51

Thanks for the explanation :-)

Techboy 2010-08-18 18:36:32

ansaurus

tags:

views:

answers:

Why does the dark blue background not appear in FireFox (it does in IE)?

related questions