I got a problem with Safari browser on last 2 days. The browser couldn’t understand my ‘float: left’ CSS rule. As a result, my website page wasn’t able to be displayed as it should have been. I’d tried to modify the rule and change the layer position, but it didn’t work. However, when I tried to use the rule on IE, Firefox, Opera, SeaMonkey and Camino, it worked well.

I went to discussion forum and mailing-list to ask for the others’ help dealing with this problem, but I couldn’t get the answer. The other people seemed to get the same problem with me.

Frustated, I started to debug the layer one by one. The ‘float’ didn’t work, however- the previous layer was too wide and “kicked down” the next layer. I didn’t know why the column A was displayed in full width on the Safari, while I had adjusted it to be only 740 pixel. See figure 1:

(column A is too wide)

Though it is already specified on the rule that column A should be 740 in pixel width, but on Safari it is displayed in full width (880 pixels).

Then I added the unit used (px), and whoaaa.. it worked! I got the correct design, as on Figure 2:

(the correct display)

This is the rule:

#column_a {
width: 740px;
height: auto;
float: left;
}

 
Moral of the story: be dicipline to add the unit of any rule values.