Wednesday, September 12, 2007

The div vs. table conundrum: blocks, inline-blocks and those damned dimensions

First off, all visit this please.

(My desktop wallpaper for the past days)

I love this bit: Time spent trying to get the layout to work using only CSS before giving up and using tables (besides, swearing and getting the bastard to work in Internet Fucking Explorer!)

I would give up tables for div's any day. The only thing which eventually gets me in the end is that div's are bloody block level elements!

Which basically means that they will span the entire containing block - and not wrap the inner content. Here's an example:

This is a div

{Some following content}
This is a table

{Some following content}

What do I do if I want it to wrap the content?
a) float:left Then I have to start worrying about clearing floats - for which there is no single multiple browser compatible CSS-only solution.
b) display:inline Which means I can't apply any dimensions. No width, height, margin or padding [only left and right margin/padding apply if specified]
c) display:inline-block Not many takers (browsers)

Thus, which brings me back to tables: the only element which behaves as a block but wraps the inner content.

Tuesday, June 26, 2007

IE6 double margin bug

Bug: Apply a 'margin-left' to a 'float:left' element. The margin doubles in IE6.
Solution:
http://www.positioniseverything.net/explorer/doubled-margin.html

Basically you add a 'display:inline' to your style.

My concern was - I had applied a 'display:block' declaration to that element earlier - won't making it inline screw up the element behaviour? Well, it doesn't. As per the same article.

"Those who are familiar with the specs on floats are aware that floats automatically become "block" elements, no matter what they were before becoming floats... That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE."

Alternatively, you can use conditional comments, which for some reason are not working for me right now! (Found out why they don't work: conditional comments have not been implemented in CSS syntax - and thus can't be in an external file: they have to be used on the page where they have to apply). Link