scriptygoddess

04 May, 2004

CSS: quirk in Firefox with backgrounds?

Posted by: Jennifer In: Lessons learned

Not sure this is the right category for this – as I STILL don't understand WHY. I should probably add a special category for my CSS issues and name it "Dazed and very very confused"

I wanted the background of the page one color – and I wanted the area behind a sidebar and a main content area a DIFFERENT color (same goes if you try to use images).

When I created the HTML and CSS for this – it worked fine in IE (believe it or not!) but didn't in Firefox. The color for the background would NOT go behind the inner divs.

After A LOT of playing around – I realized, while the two inner divs (the sidebar and bodytext divs) were floated left – the outer "main" div (where I had specified this DIFFERENT color) was not indicated with any kind of positioning. Simply by adding the float: left; to that "main" div – and then suddenly the background I wanted shows up.

Ok. Now, can someone explain to me WHY?!?!?!

Here's an example of what I'm talking about. The top section shows how it looked when I was pulling my hair out. The bottom shows how it looked after many hours of hair pulling. (View source to see the code – obviously)

Again – the page behaves in both cases as I would have expected, in IE. It was Firefox that was having the problem.

16 Responses to "CSS: quirk in Firefox with backgrounds?"

1 | Daynah

May 4th, 2004 at 2:08 pm

Avatar

Well, the page looks great. I just noticed the "move up" options on the side navigation. How nifty is that?! :) Keep up the great work Jenn!

2 | kartooner

May 4th, 2004 at 2:58 pm

Avatar

Try adding a height attribute to your #main div.

Like so;

#main { background-color: rgb(0, 51, 153); width: 751px; height: 500px; padding-top: 8px; clear: left; }

3 | Jennifer

May 4th, 2004 at 3:09 pm

Avatar

kartooner – however, the design didn't have a consistent height – it all depended on the length of the text… and if the text ran LONGER than the height I specified – the problem would return at that point. (This was one design applied to several pages – some had a short block of text – some had a very long block of text)

As well – if I over estimated the height, then you'd have the option to scroll – when there wasn't anything to scroll to.

4 | Jennifer

May 4th, 2004 at 3:10 pm

Avatar

Also – I wasn't actually talking about the design of THIS page… it was another project I was working on…

5 | kartooner

May 4th, 2004 at 3:13 pm

Avatar

This is an issue I run into a lot when designing sites. When you have a #div with text, if you don't assign a height attribute the text will spill outside the divider.

Is there a way around this? I noticed in IE it doesn't do this. The text stays within the container.

Hopefully that makes sense.

6 | gabriel

May 4th, 2004 at 3:18 pm

Avatar

jennifer… i really suck at explaining these things… or of any kind ;)… but here's an url for you with the page + a fix
http://thought-space.com/temp/jennifer.php

7 | kartooner

May 4th, 2004 at 3:23 pm

Avatar

By sandwiching the spacer div inbetween the two main divs it solves the problem? But how?

;P

8 | Julik

May 4th, 2004 at 3:27 pm

Avatar

I think a visit here can answer your question.
http://www.complexspiral.com/publications/containing-floats/

The short answer is that floated blocks DO NOT expand their container block(!), you have to clear them with something else for the container to spread. If the container is floated it will expand for the floated children elements. This is by the spec. IE does it wrong, that's all.

9 | Jennifer

May 4th, 2004 at 3:42 pm

Avatar

ok – well that makes sense now :) Thanks!!

10 | Dasme

May 4th, 2004 at 5:46 pm

Avatar

When you float elements on your page they are taken out of the regular flow of your document. ie. they don't have width and heights when they are interacting with other elements. You can always add a break and clear after the 2 floated divs, and they will then make the container stretch in height to contain them eg.

<div id="container">
<div id="float1"> sidebar </div>
<div id="float2"> main text </div>
<br clear="all" />
</div>

11 | Bob S

May 4th, 2004 at 7:01 pm

Avatar

Thanks, Jennifer! I'd been having the same problem with my blog since I made my own stylesheet for it last August; I assumed, like you, that it was a Mozilla bug and threw up my hands.

I've employed the "float: left;" fix you discovered, and that will probably be good enough for my pathetic little blog.

BTW, what is the behavior in other browsers (Opera, Safari, Lynx… OK, just kidding about Lynx). I somehow don't remember what it looked like when I tried Safari (and am away from my home computer ATM).

12 | Julik

May 4th, 2004 at 7:15 pm

Avatar

I repeat – this is NOT a bug.
What you see in IE is a bug.

13 | Sherri

May 7th, 2004 at 10:07 am

Avatar

"Ok. Now, can someone explain to me WHY?!?!?!"

I found that designing for Firefox first, then checking it in IE, *usually* had less browser conflicts.

I'm going to have to learn the "hide from IE" hacks to overcome IE's weird handling of font sizes though.

14 | damian

May 7th, 2004 at 6:01 pm

Avatar

I have been having this problem too, but I couldn't really figure out what the problem was, I'm glad you posted about this. I used Dasme's solution of &ltbr clear="all" /&gt .

15 | damian

May 7th, 2004 at 6:17 pm

Avatar

I have been having this problem too, but I couldn't really figure out what the problem was, I'm glad you posted about this. I used Dasme's solution of &ltbr clear="all" /&gt .

16 | One idiot's blog

May 4th, 2004 at 6:32 pm

Avatar

Scriptygoddess Fixes my Blog on the Lizard
When I launched my current stylesheet last August, it had a problem when being viewed in Mozilla, which I never…

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements