0

I seem to have the following CSS issue only in Firefox 3.0, Firefox 3.6. With newer versions of Firefox, like 3.6.6 for example, my layout works fine.

enter image description here

Unfortunatelly, I can't upload a full screenshot. Here is the code:

#header { width:100%; }
#header div.container { width:980px; margin:0 auto; }
#presentation { width:100%; background:red; }
#presentation div.bg { background-image:url(../images/img.png) no-repeat center top; }
#presentation div.container { width:980px; margin:0 auto; }

<div id="presentation">
<div class="bg">
<div class="container">
[content here]
</div><!-- end .container -->
</div><!-- end .bg -->
</div><!-- end #presentation -->

FF3.0 cuts my background image found in div.bg to the width of div.container, altought its parent div, #presentation is set at 100% and only its children div has the width of 980px. (no logical reason why my background image is set to 980px)

This seems to be only in FF. Chrome, IE, etc. displays my background image with no problem and it doesn't cut anything.

I've tried: width:100%, height:100%, min-width, min-height to both the #presentation div, #presentation div.bg, overflow:hidden, html > #presentation, clearing div after #presentation or it's inner children.

Mostly everything I could find on the Internet so far.

My HTML document validates with XHTML Strict mostly, except a few errors that I'm required to make (a div inside a UL) - errors that aren't inside the #presentation div.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Max
  • 841
  • 1
  • 12
  • 25

1 Answers1

0

I think it might be due to the repeating of the bg image

this is what it should be like by the way:

#presentation div.bg { width: 980px; background:url("img.jpg") no-repeat top center; }

Maybe the background is not big enough and leaves some empty space?

Depending on what kinda of bg image you have, you might want to use repeat-x instead of no-repeat

By the way.. Its a good thing to have width and height attributes for the divs with css background images, or at least width if not heigh. In some cases making the browser window smaller than the wrapper may cause cutting of the background image if theres no set width though that shouldnt be the case here.

Joonas
  • 7,227
  • 9
  • 40
  • 65
  • Hello. I've updated my previous post with an image trying to explain my issue and the HTML code for #presentation. – Max Jul 24 '11 at 09:25
  • Also, removing `width:100%` doesn't work. I've already tried with min-width, min-height, etc. The only way to work on width, is to set a fixed width, like 2000px. But I can't do that, I don't want scrollbars. – Max Jul 24 '11 at 09:29
  • I dont see any problem in the code really. Well why dont you set the same width as your wrapper? or this is fluid layout? – Joonas Jul 24 '11 at 09:33
  • The code seems to work perfect in all browsers, except FF. Even in IE6 works fine. It's a fluid layout. The #presentation div needs to be fluid, so it's set to 100% (it has a background color). The div.bg inside #presentation is an image that is centered in the layout. The div.container centers my content to my general width of website: 980px. – Max Jul 24 '11 at 09:37
  • @Max One thing though.. in the `.bg` youve put `background-image` but with the values youve put in there it should be `background`. Edited the answer. – Joonas Jul 24 '11 at 09:37
  • Yes, I'm sorry. I didn't copied the full CSS code, but my background code is: `background:url(../images/bg-presentation-hp-w.png) no-repeat center top; }`. – Max Jul 24 '11 at 09:42
  • what happens if you change the positioning of the bg to `top left` – Joonas Jul 24 '11 at 09:47
  • It still cuts the image at the same position when changing to `top left`, only thing that's changed it my image position inside the div. – Max Jul 24 '11 at 09:49
  • Without actually seeing your code, i am out of ideas. the code you have given works like a charm asuming that the bg image is wide enough. – Joonas Jul 24 '11 at 09:54