CSS fluid 12 grid design problem

Is there any possibility that some browsers calculate % width differently?

Here is the code: http://jsfiddle.net/yuliantoadi/9eqMg/2/

html :

<div class="grid_6">
grid 6
</div>
<div class="grid_6">
grid 6
</div>
<div class="grid_1">
grid 1
</div>
<div class="grid_2">
grid 2
</div>
<div class="grid_4">
grid 4
</div>
<div class="grid_5">
grid 5
</div>

css :

[class^=grid_]{
    float:left;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:5px;
    background-color:red;
}
.grid_1 {
    width:6.333%;
}
.grid_2{
    width:14.666%
}
.grid_4{
    width:31.333%
}
.grid_5{
     width:39.666%;
 }
.grid_6{
    width:48%;
}

12 grid design is ok in Firefox, then I check in Safari and I found the problem. You can see it if you open the code in Safari or Chrome, there is a little space after grid 5.

Answers


My experience is, that width in percentage IS handled differently - some browsers round up, some round down, some just remove any trailing decimals from the actual PIXEL width (remember, you can't render half a pixel). But ask me not why or when.


I would say this is happening because Safari is rounding the 39.666% UP, whilst firefox is rounding it DOWN. I would recommend forcing the rounding. Instead of going to 3 decimal places, goto none. However you may end up with an uneven grid. Give it a try and lemme know.


There are sub-pixel problems in browser's current implementation. Read more: ejohn.org/blog/sub-pixel-problems-in-css/


Need Your Help

The Definitive Silverlight Book Guide and List

silverlight xaml silverlight-4.0

So started developing an app with Silverlight. I am learning very quickly it is not like anything I am used to. The problem now because Silverlight is so new and fresh I am kind of lost in terms of...

using same code to specific blocks of checkboxes

jquery checkbox

I have 7 different blocks of checkboxes in a form, with about 8 checkboxes in each block.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.