Now I'm playing with Internet Explorer I discover all kinds of funny things that might help designers, developers and myself. Especially on having layout is opening my eyes. I discovered quite early that you could fix annoying rendering using height:1% and I'm actually almost always using that property in a slightly different way (_height:1%) for my CSS files. However, the concept that was behind it explained in the above mentioned article was not really one I had a clue about.
With some further testing of contenteditable today (see also contentEditable and more on contenteditable), I reached list items. Look at the following document:
<!DOCTYPE html>
<title>Testing layout on list items in Internet Explorer</title>
<style>
li{border:solid black}
</style>
<div>
<ol>
<li>test<br>test</li>
<li style="height:1%">test<br>test</li>
</ol>
</div>
For you convenience I also published it online. The placement of the numbers and the numbering of list items is actually dependent on whether or not hasLayout returns true. Fun stuff.
Another side effect. Look at what happens if you assign "layout" to a <ul> element:
IE decides not to generate P elements in a LI. The developers have chosen to insert a new LI on enter and insert a BR on shift+enter.
To my mind there must be a way to insert P elements in a List Item. I wrote a small document on how browsers should behave.
In a few days I will rewrite this document and describe the exact behaviour more precise.
I am curious what other people think of my idea...
Hey, that explains the design issue we've had for Snelsite Comments...
Anne, are you not cringing from all this horror?
It sucks (I mean IE, not your testing). It resets the counter and affect the vertical alignment…
Thats another example of the layout misconception:
"If a layout element has contents, the layout of its contents is determined by its bounding rectangle."
Draw a border around any non-layout ul/ol, and you'll see that the bullets/numbers are outside of the boundary, and clipped when the ul/ol gains layout. Sorry bullets, but that's the mission of "layout".
A margin-left:1em brings them back into view.
For browser-specific tests, is it not possible to include a screenshot? I wouldn't normally mind, but I'm on Linux with no access to IE without a restart (and yes, I've tried Wine; I can't get IE to install on it).
Hey Anne, don't really get it anymore here. Why do you use non-standard markup to demonstrate anything weird? Thanks for clarification ;)
The borders are basicly the same as in Mozilla, but the "bullets" are more like this:
+-------+ 1. | test | | test | +-------+ | test | 1. | test | +-------+
The placement of the bullet is at the bottom of the list item when it has layout. Any list item that has layout will have the number 1, without affecting the rest of the list. If you would put another list item to the list, it would have the number 3.
Jens, which part is non standard? According to HTML 5 this is correct. And as the parts of that "standard" (it is actually a specification, not a standard; URIs are a standard) I used here are basically what is already implemented (also in Internet Explorer) I do not see any problem.
Why can't some of the IE developers just write sensible information about all this, instead of coming up with groundbreaking ideas?
Krijn, the problem is that they really believe it made perfect sense, and we believe that it doesn't.
This little communication problem will be hopefully one of the first things the WASP is talking about with MS.
The following fixes the bug numbering bug in OL for IE6, but not for IE5.5:
li {width:480px; display:list-item; }
Does anyone have an improvement on this?