CODEWITHSUNDEEP
htmlcssinternet-explorerdoctype
Alexey Kosov
Alexey Kosov

Reputation: 3128

<div> inside <li> is displayed incorrect in IE

Here is a code:

<!DOCTYPE html>
<html>
<head>
<style>
    li div {
      border: 1px solid #FF0000; 
      width: 100px; 
      position:relative; 
      white-space: nowrap; 
      overflow: hidden;
    }
</style>
</head>
<body>
    <ol>
        <li>
            <div>111111111111111111111</div>
        </li>
        <li>
            <div>222222222222222222222</div>
        </li>
    </ol>
</body>
</html>

The page is displayed not as expected in IE8.

Firefox: (OK)

http://i45.tinypic.com/t6fexy.jpg

IE8: (wrong)

http://i47.tinypic.com/2naslqp.jpg

Could somebody explain why?

If remove <!DOCTYPE html> everything will be ok, but I want to find the reason and fix it via CSS.

Upvotes: 4

Views: 2397

Answers (2)

Nick Kline
Nick Kline

Reputation: 8030

You could also style the div to display as an inline element:

li div { 
  display:inline;
}

Upvotes: 2

Jamir Khan
Jamir Khan

Reputation: 397

You can add position relative to 'li' tag and change position relative to absolute for 'div' tag and add 'top: 0; left: 0;' to div tag.this will work fine.

Try this css:

li {
  position:relative;
}
li div {
  border: 1px solid #FF0000; 
  width: 100px; 
  white-space: nowrap;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0
}

Upvotes: 0

Related Questions