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 class="grid_6">
grid 6
<div class="grid_1">
grid 1
<div class="grid_2">
grid 2
<div class="grid_4">
grid 4
<div class="grid_5">
grid 5

css :

.grid_1 {

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.


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.