3

I'm having a problem similar to the one described here (without a resolution):

IE7 float and clear on the same element

The following HTML renders as intended in Firefox but not in (both) IE7 and IE8:

<html>
<head>
<style>
ul {
    list-style-type: none;
}
li {
    clear: both;
    padding: 5px;
}
.left {
    clear: left;
    float: left;
}
.middle {
    clear: none;
    float: left;
}
.right {
    clear: right;
    float: left;
}
</style>
</head>
<body>
<ul>
    <li>1</li>

    <li class="left">2</li>
    <li class="right">3</li>

    <li class="left">4</li>
    <li class="middle">5</li>
    <li class="right">6</li>

    <li>7</li>
</ul>
</body>
</html>

This is a form layout, and in Firefox the results appear like:

1
2 3
4 5 6
7

That's what I'm going for. In IE7 and IE8 however, the results are:

1
2 3 5 6
4
7

[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]

Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.

Any ideas? I've spent a few hours reading and trying different options without success.

Community
  • 1
  • 1
TK-421
  • 10,598
  • 3
  • 38
  • 34

4 Answers4

3

Try this, demo: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>list floats</title>
  <style type="text/css">
  li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style>
</head>
<body>
<ul>
    <li class="">1</li>
    <li class="clearer">2</li>
    <li class="">3</li>
    <li class="clearer">4</li>
    <li class="floater">5</li>
    <li class="">6</li>
    <li class="clearer">7</li>
</ul>
</body>
</html>
graphicdivine
  • 10,937
  • 7
  • 33
  • 59
  • graphicdevine: Thanks! This seems to be working correctly in IE7 and IE8. The spacing is a bit funkier in IE (and not FF, of course!) because I'm not using an XHTML document type, but I can add a little padding if necessary. – TK-421 Apr 12 '10 at 11:40
  • BTW, does anybody think this approach is getting too tricky? Would this be structuring my forms in a way that is likely to break at some point? As mentioned I tested in IE 7/8 and FF and it looks okay (and in this case I really only need to support IE), but I don't want to try to do too much with the form, only to have it break later. – TK-421 Apr 12 '10 at 11:55
1

You can simply use a <br class="clear" /> with a br.clear{ clear: both; }

Josh K
  • 28,364
  • 20
  • 86
  • 132
  • Josh: Thanks for answering. Do you mean add a break element right in the middle of my list? In-between list-items ("ul" followed by "li" followed by "br" followed by "li")? – TK-421 Apr 10 '10 at 19:12
  • If they are all floated and you need to clear a float yes you could do that. – Josh K Apr 10 '10 at 19:15
  • 1
    It just seems like bad markup to me. My base list items are clearing now so I could add an empty list item to the list and achieve the same result. Either way it seems like if I have to go this route then I might as well use tables to format my forms. I'm on a team with other developers not as familiar with CSS so I'm already out on a limb and thought if I could demonstrate a logical layout with CSS then I might go a ways toward convincing them it's not all that bad. But stuff like this will drive them crazy as it's already done me. ;) – TK-421 Apr 10 '10 at 19:21
  • I've worked with people bent on using tables too. Mildy frustrating. Best of luck! – Josh K Apr 10 '10 at 20:53
1

I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.

.clear {
    clear: both; 
    margin:0px;
    padding:0px ;
    font-size:1px;
}
.solo {
    clear: both; 
}

<li class="solo">1</li> 

<li class="left">2</li> 
<li class="right">3</li> 
<li class="clear"></li>
Ray
  • 21,485
  • 5
  • 48
  • 64
  • Ray: Thanks for responding. I can add an empty list item with my current markup and it clears because it has "clear:both" set. But adding empty elements for formatting purposes just seems wrong. ;) – TK-421 Apr 12 '10 at 11:31
  • 1
    I agree - unfortunately, the quirks of html and css layouts sometimes leave us no choice but using extra markup - or even those "evil" tables :) – Ray Apr 12 '10 at 11:51
  • Ray: Good point, and I may have to reconsider just using tables for this because they just plain work and other programmers may understand a table layout better than some of the trickier aspects of CSS layout that I seem to have encountered here (tricky enough to confuse IE, anyway!). – TK-421 Apr 12 '10 at 12:02
-1

try following code. much simpler but a little hard to understand! 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>
Daniel
  • 135
  • 8
  • 1
    Hi Daniel, Stack overflow is not a forum, so please don't post questions as an answer. Make a new question instead. – Neograph734 Mar 30 '13 at 18:35