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 xerxiam (<!-- m --><a class="postlink" href="http://i.1asphost.com/xerxiam/xerx_sub.asp?target=port_doodlebus">http://i.1asphost.com/xerxiam/xerx_sub. ... _doodlebus</a><!-- m -->)
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:
#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;
}
Within the contain div is a content div with CSS:
#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;
}
Any ideas? Thanksi 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;
regardsheight: 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.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.Just remove the height declaration from #subcontainer, that way the div will stretch to fit.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 helpI couldn't see the image cropping.
Do you have a gif and browser version/OS ?This problem is something I've seen before, where for a div with its style defined
.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 (here (<!-- m --><a class="postlink" href="http://www.xerxiam.co.uk">http://www.xerxiam.co.uk</a><!-- m -->) ) 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:
#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:
#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:
#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.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.
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:
#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;
}
Within the contain div is a content div with CSS:
#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;
}
Any ideas? Thanksi 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;
regardsheight: 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.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.Just remove the height declaration from #subcontainer, that way the div will stretch to fit.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 helpI couldn't see the image cropping.
Do you have a gif and browser version/OS ?This problem is something I've seen before, where for a div with its style defined
.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 (here (<!-- m --><a class="postlink" href="http://www.xerxiam.co.uk">http://www.xerxiam.co.uk</a><!-- m -->) ) 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:
#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:
#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:
#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.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.