Loading Blog Search...

Thursday, March 09, 2006

Problem of CSS float in IE

IE defined a no standard CSS attribute word-wrap, when it is set to 'break-word', IE divids a long word if it is too long. If it is set to 'normal', the word won't be divided.
An example is list below:

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

You can see the different render results in IE and firefox, firefox ignore this attribute and the whole word is in the same line. Both are OK for me.

The problem is, if IE does not divid the word, the right panel in my blogger pages will move down below the left panel, make them cannot appear in the same row. What a pity, and it is the reason of why many blogger's template layout will be corrupted in IE, if there is a long hyperlink (or dir name, or tag, etc.), where IE does not divid the word inside.

In my situation, I want the float left panel does not extend automatically with contents inside, and treat IE's method as a bug for me. But in certain situations, sb. may feel firefox's method is a bug, here is an example.

Fortunately, now, we can combine the word-wrap attribute and tips from http://www.positioniseverything.net/easyclearing.html to solve the problem you meet, although it cannot solve problem for all ppls. How to choose is up2u.

1 comment:

Anonymous said...

Interesting stuff... it's always nice to keep it in mind, for instance, I'm sometimes commenting to some friends' blogs about placing movies or something... so I place them the code from googlevideo or other sites.

Google Video urls are reeeeaaaaaally long.

And since some friends use wordpress and wordpress translates line breaks into <br />, placing code in a post can be bad, and also break a page's validation...