CSS: New IE bug with floats..

..disappearing background?

[Wertigon]

Hey all. Doing the following for a client, and I seem to have stumbled upon a new bug. It appears when I float the image to the right, it flunks the background for everything the float touches. I don't see anything over at
[positioniseverything.net...] that explains this wierd behavior, so a little help would be appreciated. ^^;;

Here's the basic rundown (HTML, CSS):

<div class="newsitem">
 <h2><img src="blah.png" alt="Something">Something</h2>
 <p>Written by: xyz</p>
 <p>This is great stuff!</p>
</div>

.newsitem {
 border-bottom : 1px solid #000;
 text-align : justify;
}
.newsitem h2 {
 color : #fff;
 font-size : 1.5em;
 background : #000 url(/images/news-top.png) no-repeat;
 margin : 0.5em 0 0;
 padding : 0.1em 0 0 20px;
}
.newsitem h2 img {
 float : right;
 margin : 0 0.2em 0 0.5em;
}
.newsitem h2 + p {
 text-align : right;
 margin : 0;
 font-size : 1em;
 background : #eee;
 padding : 0.1em 0.2em;
}
.newsitem p , .newsitem ul , .newsitem ol {
 border : 1px solid #000;
 border-width : 0 1px;
 margin : 0;
 padding : 0.5em;
}
.newsitem ul , .newsitem ol {
 list-style : box inside;
}

Any ideas how to fix it? If it can't be reproduced by the above means, PM me and I'll send the site URL to you.

Regards,
- Per

[bedlam]

Hi,

I couldn't take time to test your code, but I assume you're talking about the h2's background, right? If so, i'd guess that this isn't a bug, but that it's correct float behaviour. When you float an element, it is removed from the document flow, and its parent item takes no account of the size of the floated element (though I wonder what happens to the text in your example?)

Anyhow, there are several solutions to force the float's parent container to contain or appear to contain the float:

1. give the h2 an explicit height - it will appear to contain the float
   
2. assign 'overflow:auto;' to the h2 - IE probably (wrongly) encloses the float already, so I guess it's a problem for you in other browsers. Depending on what else is going on, this may fix things (but it may also trigger bugs in Firefox).
   
3. go back to PIE [positioniseverything.net] for an in-depth treatment of the subject :-)
   

Another technique that I used the other day for a similar situation would be to try this:

h2 { position:relative; }

h2 img { position:absolute; right:0; }

...this should absolutely position the img at the right edge of the h2.

-B

[Wertigon]

Nope, I floated it over the right to give the image a neat "hanging" style (first there is the header which is white-on-black, then the first paragraph which is black-on-gray, and finally the content itself which is black-on-white, and the image touches all three areas). I'm well aware of the box collapsing with a floated element, but the text keeps it from doing so, just like I want it to. However, the backgrounds dissapear while the text remains - It's really wierd.

I'll see if that position thing does the trick though. Thanks. :)

- Per

[bedlam]

Hi,

I see that the question I answered was not quite actually the question you asked, sorry :^)

I think I've got it this time; you're referring to the 'background : #eee;' declaration, right (I assume this because all other backgrounds work here in my tests)?

In any case, can you make the css you've listed work in IE without the image? I doubt it; IE apparently does not support adjacent sibling selectors [google.ca], which means that this declaration:

.newsitem h2 + p {
text-align : right;
margin : 0;
font-size : 1em;
background : #eee;
padding : 0.1em 0.2em;
}

...has no effect, or at least not the intended effect.

-B

[createErrorMsg]

Bedlam is right. The reason that paragraph doesn't get the gray background is because IE doesnt' support the selector used to target it. Give each paragraph a class or id and style it that way instead...

html:
<p class="first">Written by: xyz</p>

css:
.newsitem p.first {
text-align : right;
margin : 0;
font-size : 1em;
background : #eee;
padding : 0.1em 0.2em;
}

cEM

[Wertigon]

Well, that'd be true normally, but I'm using Dean Edward's IE7 JavaScript to move around that little shortcoming. And yes, I've tried it without the script, too - no dice. The problem I'm having is with that black background... :/

Doing the position : absolute; trick actually solves that particular problem, but now I have the nice problem of IE interpreting the rule right : 0; as using the parent element's dimensions, so the image ends up at the right side of the page instead of the box. >_<

[bedlam]

Hi again,

Baesed on your code above, all backgrounds and background images worked for me in IE except the light grey (#eee) - presumably 'cause I'm not using 'IE7'.

Doing the position : absolute; trick actually solves that particular problem, but now I have the nice problem of IE interpreting the rule right : 0; as using the parent element's dimensions, so the image ends up at the right side of the page instead of the box.

Are you sure? It works here. Be sure to include 'position:relative;' on the parent element - the h2 in this case. If you don't do this, or if you apply it to the wrong element, the result will be as you describe.

-B