CODEWITHSUNDEEP
htmlcssinternet-explorer
Lars Hanke
Lars Hanke

Reputation: 624

IE8: float inside li

IE is driving me crazy - once again. In the real application I want to have an image on the left, some links on the right and the standard text in between. The example below just has 3 divs inside another one, but it is sufficient to show the problem.

The example has 2 times the same construct. One time bare, one time encapsulated in a list. Firefox shows 

|Left text|Center text<-->|Right text|

, the list indented, but generally the same.

IE8 shows the same for the bare construct. But for the encapsulated code things go awry:

|Left text|<-->|Right text|
|Center text<-->          |

with the upper gap being yellow, i.e. the containing div.

Since to me CSS behaviour is not always intuitive, I'd like to know whether my code below collides with any standards. And if it is sufficiently conforming, is there any way to help IE8 to render it as intended?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Float Test for IE</title>
 <style>
  .meta-left {
    float: left;
    background-color: red;
  }
  .meta-right {
    float: right;
    background-color: blue;
  }
  .meta {
    background-color: green;
  }
  .meta-container {
    background-color: yellow;
  }
  ol {
    clear: both;
    list-style: none;
  }
  p {
    padding: 0;
    margin: 0;
  }
 </style>
</head>
<body>
 <div class="meta-container">
  <div class="meta-left">
   <p>Left text</p>
  </div>
  <div class="meta-right">
   <p>Right text</p>
  </div>
  <div class="meta">
   <p>Center text</p>
  </div>
 </div>
 <ol><li>
  <div class="meta-container">
   <div class="meta-left">
    <p>Left text</p>
   </div>
   <div class="meta-right">
    <p>Right text</p>
   </div>
   <div class="meta">
    <p>Center text</p>
   </div>
  </div>
 </li></ol>
</body>
</html>

Upvotes: 2

Views: 380

Answers (2)

alonisser
alonisser

Reputation: 12068

try adding the http-equiv="X-UA-Compatible" content="IE=edge" meta tag? forcing IE to render with it's most advanced rendering engine

Upvotes: 1

Dan
Dan

Reputation: 550

Have you tried floating the centre text? IE is probably doing something because it doesn’t understand where to put it. Plus, IE is crap! : )

Upvotes: 0

Related Questions