I have a problem that I can't fix. I'm guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a happy
compromise that doesn't require javascript I'll be a happy camper.
I have a banner that is basically a list with 3 elements. The CSS is below:
li.banner {
margin:10px 0 0 0;
list-style-type:none;
padding:0;
}
li.banner h1 {
text-align:center;
/* background-color:#FFFFFF; */
background-color:transparent;
border-bottom:1px solid #FF0000;
border-top:1px solid #FF0000;
height:68px;
margin:0 118px 0 20px;
padding:30px 10px 0px 0px;
overflow:hidden;
}
..banner span {
background:url(img/BannerBoxRt.gif) right no-repeat;
display:block;
}
..banner span span {
background:url(img/BannerBoxLeft.gif) left no-repeat;
margin:0;
display:block;
}
The HTML to generate the banner looks like this:
<li class="banner"><span><span><h1>Banner</h1></span></span></li>
This technique works beautifully in FireFox. However, in IE6 it leaves a gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have a
suggestion how I might be able to fix this problem?