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.
