Home/ Questions/Q 9314001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T02:01:18+00:00

Here is a code: <!DOCTYPE html> <html> <head> <style> li div { border: 1px

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
}
    • 0