CSS problem

HTML & CSS
1

Hi,

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

http://glr.designbits.de/referenzen/

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.

2

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

3

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.

4

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.

Ant

5

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.

6

Hey,

Thanks for your help.

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

Can anybody think of another solution?