div backgrounds

@zingmatterOct 13.2004

I know I’m missing something here, but I have a problem with a div element background that works in IE but not in Firefox (see ~~[URL=http://i.1asphost.com/xerxiam/xerx_sub.asp?target=port_doodlebus]~~xerxiam[/URL]

In IE the cream-colored background extends with the content beyond the graphic, whereas in Firefox there’s no bg color. The CSS is valid (or at least it was when I last checked) but I don’t seem to be able to fix it.

Here’s the relevant CSS:

[code] #subcontainer { position:absolute; background: #FDFCF7 url(‘../images/xerx_bg_sub.jpg’); background-repeat: no-repeat; top:60px; left:50%; width:750px; height: 560px; margin-top:-45px; margin-left:-375px; padding:10px; border-left:1px solid #B5B2BF; border-right:1px solid #B5B2BF; border-bottom:1px solid #B5B2BF;

} [/code]

Within the contain div is a content div with CSS:

[code] #content { float: left; font-family: “Trebuchet MS”, arial, san serif; color: #6D6B77; font-size: 12pt; width: 450px; top: 80px; text-align: justify; padding-left: 80px; padding-top:80px; left: 10px; z-index: 50; } [/code]

Any ideas? Thanks

to post a comment

CSS

8 Comments(s) _↴

@hastalavistaOct 13.2004 — #i don't know how firefox responds to invalid css, but an error can halt css evaluation.

you write

font-family: "Trebuchet MS", arial, san serif;

which should be

font-family: "Trebuchet MS", arial, sans-serif;

regards

@FangOct 13.2004 — #height: 583px; in #subcontainer, or is it #containersub.

You are confusing yourself!

Increase the height. IE will stretch a container if it is too small, Moz. will not.

If the user increases font size the problem will re-occur. This is the down side of position:absolute.

@zingmatterauthorOct 13.2004 — #Indeed I have been confusing myself - I changed to containersub (defined in the page header, the bg image dependent on a randomiser ASP script), and was confusing this with the original subcontainer definition in the common.css

Still haven't figured out the original problem but at least I know which CSS style to be playing with.

@FangOct 14.2004 — #Just remove the [i]height[/i] declaration from #subcontainer, that way the div will stretch to fit.

@zingmatterauthorOct 14.2004 — #Hi

I did just as you said Fang. Sure enough, in Firefox all is as should be, but the bg image gets cropped in IE. Is there a CSS hack around this?

I've had to do a compromise solution...for pages where the content is shorter than the graphic box there's one div style, and another div style for content the extends downwards. Not very satisfactory but luckily the content is these pages is unlikely to change significantly over time. I'd be more annoyed if content was totally dynamic and was unable to predict page length.

Thanks for your help

@FangOct 14.2004 — #I couldn't see the image cropping.

Do you have a gif and browser version/OS ?

@zingmatterauthorOct 14.2004 — #This problem is something I've seen before, where for a div with its style defined

<i>
 </i>.bgpic {background: #ffffff url('myimage.gif'); 
 background-repeat: no-repeat;}

unless I use - height: 999px; (or whatever) then I don't get the full image being displayed, at least in IE

I'm using IE6 (which gives the problem) on XP pro

The site ([URL=http://www.xerxiam.co.uk]here[/URL] ) current won't show any cropping as I've used a height: 563px in a div definition specifically for pages where content that doesn't extend below the background image. So there are now 2 div types:

for "short" content:

<i>
 </i>#shortcontent {
 float: left;
 font-family: "Trebuchet MS", arial, san-serif;
 color: #6D6B77;
 height: 583px;
 font-size: 12pt;
 width: 450px;
 top: 80px;
 text-align: justify;
 padding-left: 80px;
 padding-top:80px;
 left: 10px;
 z-index: 50;
 }

and for "long" content:

<i>
 </i>#content {
 float: left;
 font-family: "Trebuchet MS", arial, san-serif;
 color: #6D6B77;
 
 font-size: 12pt;
 width: 350px;
 top: 80px;
 text-align: justify;
 padding-left: 80px;
 padding-top:80px;
 left: 10px;
 z-index: 50;
 }

You'll notice the height definition is not present in this one.

Both these are wrapped in another div that defines the bg image:

<i>
 </i>#container {
 position:absolute;
 background: #F2F2ED url('../images/xerx_bg_index.jpg'); 
 background-repeat: no-repeat;
 top: -40px;
 left:50%;
 width:750px;
 height: 600px;
 margin-top:10px;
 margin-left:-375px;
 padding:0px;
 border-top:0px solid #B5B2BF;
 border-left:0px solid #B5B2BF;
 border-right:0px solid #B5B2BF;
 border-bottom:0px solid #B5B2BF;
 background-color:#BCF2F5;
 }

If I remove height: 600px; from this then again, the bg image gets cropped.

Hope this makes sense.

@FangOct 14.2004 — #If the element with background image is not defined as having a height => image height then the image will be cropped

if the content does not stretch the element to the height of the image.

So, not enough content; image is cropped.

Also in #CSS _↴

Floating issue with navi/content columns Div's overlapping CSS Dropdown Help

Success!

Help @zingmatter spread the word by sharing this article on Twitter...

Tweet This

div backgrounds

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

div backgrounds

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴