I recently encountered something in my work that kinda baffled me. Apparently some (make that lot) people don't know one fundamental thing about inline and block-level elements.
The fact is that you are not allowed to nest them.
This seems to be a small matter, but it has all sorts of consequences for the styling of the front end. What a lot of people don't get is that if you serve the browser invalid html, which is what you do if you nest a block-level element ( div) inside an inline element (span), you are at the mercy of it. A browser, and lets not name names, has a though job as it is when rendering valid html. What it is supposed to do with invalid code is anybody's guess.
So to test this I created a small test page with some invalid HTML and some simple CSS. What I did is that I nested a block-level element, in this case a div, inside an inline element, a span. Below that I swapped the div with the span. Both examples got a unordered list with one li.
HTML
<span class="foo">
<div>
<ul>
<li>list item</li>
</ul>
</div>
</span>
<div class="foo">
<span>
<ul>
<li class="">list item</li>
</ul>
</span>
</div>
CSS
I than gave it some simple css, which is below:
body {
margin: 0 auto;
width: 40em;
font-size: 1.2em;
font-family: helvetica,arial,sans-serif;
}
#test {
border: 4px dotted #ccc;
width: 200px;
height: 200px;
margin-top: 5em;
}
.foo {
border: 1px solid red;
padding: 1em;
position: relative;
}
.foo div,
.foo span {
background: #dee2ee;
margin-bottom: 1em;
padding: 1em;
}
span.foo li {
background-color: #ccc;
}
.foo li {
position: absolute;
left: 100px;
top: 5px;
}
div.foo {
border-color: blue;
}
The results
The results where surprising, some browers tried to interpret the css and succeeded ( in a way ), while others failed in nice and surprising ways. Mind you, I am not blaming browsers here. Let me repeat that:
I AM NOT BLAMING BROWSERS HERE
not even ie6, really not this time.
If you serve a browser invalid HTML, you get everything you deserve, in my not so humble opinion
Screen shots
Let's get on with the screen shots, which I will present without any comment. Again, if you serve a mess to a browser, you deserve all the trouble you get...
Conclusion
Always validate your code, it will help you. I know that proper front end developers will do this without thinking and I will agree that using stuff like WAI-ARIA tags will invalidate your code, but when you do that stuff I hope you know your basics. Stuff like this I see primarily in html rendered by some back end system put together by someone who doesn't know what they are doing. I will tell (and have told) you what you're doing, you're overly complicating the work of the front end developer.
I mean, we could work around these quirks, but why should we work to correct mistakes easily avoided? It would only mean adding extra lines of code to the css, thus making it harder to maintain...
My proposition is that we, as front end developers, simply refuse to work with invalid code. It is only a source of trouble and will cause more work which will cut into the budget and so on.
Now my question to you all, do you see this and/or have any nice examples you would care to share in the comments or tell me about on twitter I would love to see them.
This is really good news, I ( and with me every web developer in the world ) hope that this will start a wave in the corporate world. The last dominion of IE6 that is keeping the web from reaching it's full potential...
I read an interesting tweet just now by 
