IE7 Plays Up in List

HTML & CSS
1

Hi - under an h2, I’ve got a ul, and IE7 uniquely displays the dot of the first list item above the h2 instead of below it.

Please could you go to this page:

http://www.greensmoothie.com/1gs/

scroll down to the right-hand side <h2> “Eat Raw Foods from a Sprouter”

you’ll see IE7 displays the dot of the first list item “Organic home-grown” ABOVE the h2 on right, when in all other browsers, including IE6 + IE8, it displays correctly below the h2 on left.

Please do you know how to fix this?

html:

<div class=“leafh2”>
<h2>Eat Raw Foods from a Sprouter</h2>
</div>
<blockquote>
<ul>
<li><span class=“high”>Organic home-grown</span>…

css:

.leafh2 {
float:left;
width:100%;
background:transparent url(imgpg/leaf25.gif) no-repeat scroll 25% 50%;
margin:20px 0 30px;
}
.leafh2 h2 {
float:right;
width:45%; /or 350px/
background:#e5ffbf;
padding:12px 10px;
margin-right: -50px; /txtbox padng/
font:bold 1.2em Helvetica,sans-serif; color:#f00251;
text-align:center; vertical-align:middle;
position:relative;
}

thank you! - Val

2 
<ul style="clear:both;">
3

thank you! that works, I went with:

<div class=“leafh2”>
<h2>Eat Raw Foods from a Sprouter</h2>
</div>
<blockquote class=“clear”>
<ul>…

.clear {clear:both}

But to avoid it ever cropping up, I’d rather place the clear in the css. I tried this but it does not work:

.leafh2, .leafh2 h2 {
clear:both;
content: “.”;
display:block;
height:0;
}

Do you know how I can tell those 2 floats in .leafh2 + .leafh2 h2 to clear themselves from next line on?

thanks, Val

4 
.leafh2 ul {
clear:both;
}
5

Yes but that makes it specific to ul’s only. I’m thinking there may be other instances where the floats don’t clear - so I wanted to apply the clear to everything that comes after them - or are ul’s the only thing that will be fussy?

thanks, Val

6

actually .leafh2 ul {clear:both} does not work! The dot is back up above the h2

7

Apply it directly ul {clear:both} overflow:hidden works as well, but you then lose the bullets in IE

8

For one thing that CSS there must include the :after pseudo class (content property only works with :before and :after)

Try something like this

.leafh2:after {
	clear:both;
	content: ".";
	display:block;
	height:0;
}

It’s the same technique as the clearfix ;). IE will need haslayout set though since it doesn’t understand the :after psueodo class (IE6/7 need haslayout I mean :))

9

Hi -

>Apply it directly ul {clear:both}

Problem is I don’t want to apply it randomly to every ul. I think I’ll just stick with class=“clear” in the first element below the h2 whenever I see the h2 floats are not clearing.

Ryan I tried this but it has no effect on the IE7 problem:

.leafh2:after {
clear:both;
content: “.”;
display:block;
height:0;
}
.leafh2 {zoom:1.0}

many thanks for everyone’s input - Val

10

Well then just give the .leafh2 overflow:hidden; instead (it needs some sort of clearing mechanism :))