CSS problem


Can anybody tell me why my heading backgrounds do not look right in IE 6 & 7?


This is the CSS I am using:

.heading {background: url(../images/heading-left.png) left top no-repeat; padding: 0;}
.heading h2 {display: block; font-size: 1.2em; font-weight: normal; color: #fff; text-shadow: 0 1px 0 #000; height: 30px; line-height: 30px; text-transform: uppercase; letter-spacing: .1em; background: url(../images/heading-right.png) right top no-repeat; padding: 0 10px;}

Thanks for any help.

try playing around with the “float” css attribute, it may help.
Let’s say, give your h2 a width and float:left; or right…

Hey Rayzur,

that did the trick. Thanks a lot for your help.

I remember running into this problem about a year ago, but I simply couldn’t figure out the solution by myself this time.

One option would be to create a conditional comment that points to a different css file for ie6 / ie7 users and fix the issue in that file so it does not affect users with modern browsers.


You have ran into the IE6/7 broken float model.
Bring the floated spans before the text in your h2

<h2>[COLOR=Blue]<span>2007</span>[/COLOR]Dorint-Hotel in Binz</h2>

As a general rule of thumb floats should always come first in the source when they need to sit on the same line as other elements that are not floated.


Thanks for your help.

I’ve already tried using floats on both elements, but to no avail.

Can anybody think of another solution?