I habe this css:
.Bottom {
width: 240px;
background: #fff url('backgroundTable.jpg') repeat-x bottom;
}
For some reason, it looks nice in IE but FF doesn't show the background image. What can I do?
Thanks!Originally posted by weee
What can I do? Post the URL so that we can see what else is going on.More than likely, the element to which the background image is applied only contains floated elements. IE will stretch the bounds of a box to contain floated elements inside, but that's not according to W3C spec (hence why Firefox looks "broken" when in fact it's IE that's broken).
Since I'm not sure what's going on in your page, I second Charles' suggestion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.holder {
width: 234px;
border-left: 3px solid #3e0055;
border-right: 3px solid #3e0055;
}
.holder p {
padding: 10px 27px 4px 20px;
font-size: 11px;
text-align: left;
margin: 0px;
}
.bottom {
width: 240px;
background: #fff url('background.jpg') repeat-x bottom;
}
.cornerBL {
background: #fff url('cornerLeft.jpg') no-repeat 0px;
width: 30px;
height: 16px;
float: left;
}
.cornerBR {
background: #fff url('cornerRright.jpg') no-repeat 0px;
width: 30px;
height: 16px;
float: right;
}
</style>
</head>
<body>
<div class="holder">
<p>
Text Text Text Text Text
Text Text Text Text Text
</p>
</div>
<div class="Bottom">
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</body>
</html>
I also uploaded a screen shot.
Thanks guys!Your HTML is invalid. Run it through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) and then see if you still have problems.Don't float .cornerBR so that it stays in the block element flow and gives .Bottom a height. For a quick and dirty explanation of floats, visit this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->).
.Bottom {
width: 240px;
background: #fff url('backgroundTable.jpg') repeat-x bottom;
}
For some reason, it looks nice in IE but FF doesn't show the background image. What can I do?
Thanks!Originally posted by weee
What can I do? Post the URL so that we can see what else is going on.More than likely, the element to which the background image is applied only contains floated elements. IE will stretch the bounds of a box to contain floated elements inside, but that's not according to W3C spec (hence why Firefox looks "broken" when in fact it's IE that's broken).
Since I'm not sure what's going on in your page, I second Charles' suggestion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style>
.holder {
width: 234px;
border-left: 3px solid #3e0055;
border-right: 3px solid #3e0055;
}
.holder p {
padding: 10px 27px 4px 20px;
font-size: 11px;
text-align: left;
margin: 0px;
}
.bottom {
width: 240px;
background: #fff url('background.jpg') repeat-x bottom;
}
.cornerBL {
background: #fff url('cornerLeft.jpg') no-repeat 0px;
width: 30px;
height: 16px;
float: left;
}
.cornerBR {
background: #fff url('cornerRright.jpg') no-repeat 0px;
width: 30px;
height: 16px;
float: right;
}
</style>
</head>
<body>
<div class="holder">
<p>
Text Text Text Text Text
Text Text Text Text Text
</p>
</div>
<div class="Bottom">
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</body>
</html>
I also uploaded a screen shot.
Thanks guys!Your HTML is invalid. Run it through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) and then see if you still have problems.Don't float .cornerBR so that it stays in the block element flow and gives .Bottom a height. For a quick and dirty explanation of floats, visit this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->).