All geek questions in one place

IE7 rendering error: header before floating list

Can someone explain this IE7 error to me? This happens in standards and Quirks rendering mode, it does not happen in Firefox, Chrome or IE8 (although this can cause the rendering engine to start through the IE8 developer tools). Here is the HTML to reproduce the behavior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> /* h1 { margin: 0px; } */ ul { padding: 0; margin: 0; list-style-type: none; } ul li { float: left; width: 140px; padding: 3px; } div { clear: left; padding: 3px; } div, li { background-color: OrangeRed; } /* ul { border: 1px solid blue; } */ </style> </head> <body> <h1>Heading 1</h1> <ul> <li>bla 1</li><li>bla 2</li><li>bla 3</li> </ul> <div>yada</div> </body> </html>
  • This displays a floating <ul> above a <div> (assuming this is a tabbed user interface).
  • There is an inexplicable gap between <div> and <ul> .
  • Now do one of the following:
    • Uncomment the CSS rule for <h1> . The gap disappears and the list is displayed with <div> , but is also very close to <h1> .
    • Alternatively, uncomment the CSS rule for <ul> . Now a narrow blue border is displayed above the <ul> , but the abyss disappears.

My questions:

  • How can the marker <h1> (I believe that some block-level element with a specific field) affect the space below the list?
  • Can I prevent this by not setting the header field to 0 or entering the borders of the <ul> borders (setting border-width: 0; BTW does not work)?

I believe that he is connected with <ul> , who has no height, because he only swims with children. Maybe someone who has more understanding of IE7's features than mine can explain what the rendering engine does here. Thanks!

+4
source share
3 answers

I came up with a solution that seems like a good compromise. This is based on the fact that setting the border to <ul> solves the problem, while the margin-bottom element of the pre-sibling level block element obviously calls it.

Thus, setting border-top: 1px solid transparent; <ul> shifts it by one pixel, which is good with me. Since BalusC rightly points to comments, setting margin-top: -1px; will counteract bias.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> ul { padding: 0; margin: 0; border-top: 1px solid transparent; list-style-type: none; } ul li { float: left; width: 140px; background-color: red; } div { clear: left; background-color: red; } </style> </head> <body> <h1>Heading 1</h1> <ul> <li>bla 1</li><li>bla 2</li><li>bla 3</li> </ul> <div>yada</div> </body> </html>

I admit that this is also hacking; he must remember what the dummy border is for, which is not much better than regular CSS tricks (but not much).

Previous version of the answer: I fixed it as it is now (it seems to work in browsers and does not require CSS hacking)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> div.t ul { padding: 0; margin: 0; list-style-type: none; } div.t ul li { float: left; width: 140px; background-color: red; } div.c { background-color: red; } </style> </head> <body> <h1>Heading 1</h1> <div class="t"> <ul> <li>bla 1</li><li>bla 2</li><li>bla 3</li> </ul> <br style="clear: left;"> </div> <div class="c">yada</div> </body> </html>

I do not really like this solution, because it requires additional elements. But I don't like CSS dirty tricks anymore.

+1
source

This is an invalid floating point error. This article explains this issue. It also affects IE6 btw.

As Sjaak Priester, the person Gerard Talbot gives away for the error, is that IE first displays the moved item on the same line as the previous one, and then sees clarity and clears it, but does not redraw the text.

One common solution is to hack clearfix , as someone else said here, or to place an empty cleanup element after a block with floats, for example, <br style="clear:left;"> . Put it between ul and div . Thus, IE will force clarity before reaching the div .

+1
source

This is a really strange problem, IE seems to be full of these charms. I have not found exactly why he decides to do so, but with proper cleaning of the floats you can usually avoid all these problems. The following code seems to give some consistency (in other words, the same with or without the H1 css rule).

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> h1 { margin: 0px; } ul { padding: 0; margin: 0; list-style-type: none;} ul li { float: left; width: 140px; padding: 3px; } div, li { background-color: OrangeRed; } ul { border: 1px solid blue; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */ </style> </head> <body> <h1>Heading 1</h1> <div class="clearfix"> <ul class="t"> <li>bla 1</li><li>bla 2</li><li>bla 3</li> </ul> </div> <div>yada</div> </body>
0
source

Source: https://habr.com/ru/post/1308511/

More articles:


All Articles