Hi,
I'm having problem with Mozilla (Firefox) to show my CSS markup correctly (usually it's the other way around ...).
Here is my source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#leftCol {
background: #e6e6e6 url("http://img126.exs.cx/img126/9219/leftcol_bot.gif") no-repeat bottom right;
position:absolute;
width: 250px;
height:100px;
left:0;
}
#leftCol .top {
background: url("http://img64.exs.cx/img64/4285/leftCol_bg_top.gif") no-repeat top left;
width: 250px;
height: auto;
position: absolute;
}
#leftCol .content {
padding:0 10px 15px 10px;
color: #000;
font-size:85%;
line-height:135%;
}
-->
</style>
</head>
<body>
<div id="leftCol"><span class="top"></span>
<div class="content">
</div>
</div>
</body>
</html>
The image "leftCol_bg_top.gif" in ".top" class is shown under IE like I want it: above the <leftCol> div-tag.
But somehow Firefox doesn't show this image at all. Only when I put in some text within the <span> tags.Try replacing the SPAN with a DIV; the CSS width property doesn't apply to non-replaced inline elements.Originally posted by Paul Jr
Try replacing the SPAN with a DIV; the CSS width property doesn't apply to non-replaced inline elements.
Thanks for your advice. But I alreday tried that and it didn't chance anything.
#leftCol .top {
background: url("http://img64.exs.cx/img64/4285/leftCol_bg_top.gif") no-repeat top left;
width: 250px;
height: auto;
position: absolute;
}
I'm willing to bet the auto height is the reason. Since .top is positioned absolutely, it's width and height are only as wide and tall as the widest and tallest contents. Since your <span> tag contains nothing, it has a zero height. That's the reason it doesn't display.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">http://www.w3.org/TR/CSS21/visudet.html ... aced-width</a><!-- m -->
It's a lot of mumbo-jumbo that says what the above paragraph does.
I'm having problem with Mozilla (Firefox) to show my CSS markup correctly (usually it's the other way around ...).
Here is my source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#leftCol {
background: #e6e6e6 url("http://img126.exs.cx/img126/9219/leftcol_bot.gif") no-repeat bottom right;
position:absolute;
width: 250px;
height:100px;
left:0;
}
#leftCol .top {
background: url("http://img64.exs.cx/img64/4285/leftCol_bg_top.gif") no-repeat top left;
width: 250px;
height: auto;
position: absolute;
}
#leftCol .content {
padding:0 10px 15px 10px;
color: #000;
font-size:85%;
line-height:135%;
}
-->
</style>
</head>
<body>
<div id="leftCol"><span class="top"></span>
<div class="content">
</div>
</div>
</body>
</html>
The image "leftCol_bg_top.gif" in ".top" class is shown under IE like I want it: above the <leftCol> div-tag.
But somehow Firefox doesn't show this image at all. Only when I put in some text within the <span> tags.Try replacing the SPAN with a DIV; the CSS width property doesn't apply to non-replaced inline elements.Originally posted by Paul Jr
Try replacing the SPAN with a DIV; the CSS width property doesn't apply to non-replaced inline elements.
Thanks for your advice. But I alreday tried that and it didn't chance anything.
#leftCol .top {background: url("http://img64.exs.cx/img64/4285/leftCol_bg_top.gif") no-repeat top left;
width: 250px;
height: auto;
position: absolute;
}
I'm willing to bet the auto height is the reason. Since .top is positioned absolutely, it's width and height are only as wide and tall as the widest and tallest contents. Since your <span> tag contains nothing, it has a zero height. That's the reason it doesn't display.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">http://www.w3.org/TR/CSS21/visudet.html ... aced-width</a><!-- m -->
It's a lot of mumbo-jumbo that says what the above paragraph does.