Background not aligning to span boundaries

CSS problem in Internet Explorer

[liquidiced]

Hi all,

I have been having some CSS problems with compatibility between browsers!

Works fine in Firefox, mozilla, Opera and Safari as well as IE7 but having a small problem in IE6.

The gradient is not associated correctly to the "titler" span and such the gradient is repeated vertically and is stretched to the boundaries of the "post" span.

Extract of CSS:

.post .titler span {
display: block;
height: 18px;
padding: 5px 5px 5px 5px;
}
.post .story {
padding: 18px;
margin-top: -20px;
background: url(gradient.gif) repeat-x;
}

I am running out of ideas, have tried a lot of things but nothing seems to work.... It looks like I might have to get rid of the gradient?

The problem only seems to be shown in IE6....

Any help or guidance appreciated...

[edited by: jatar_k at 2:02 pm (utc) on Sep. 11, 2007]
[edit reason] no urls thanks [/edit]

[jatar_k]

Welcome to WebmasterWorld liquidiced,

any luck getting this working?

[Setek]

Hi liquidiced,

Your code is a little confusing to see what the problem is, would you be able to post a small block of HTML too?

I think it might be bleeding out because of the negative margin, so while you're at it, try adding

zoom: 1;

in an IE-only section (though it doesn't affect standards-compliant browsers, it's just neater to have it in an IE-only area) and see if that helps.

Yeah, just a bit of HTML so we can see the order of the elements and which are parents/siblings etc :)