Problem with margins between different browsers

[gussiglo21]

Dear people

I'm new here and I'm making my first steps in responsive design.

I'm not english speaker and I will try to explain my problem in my better english.

 

I'm testing a simple grid of 4 columns using 4 divs with width = 23 % (each div) and left and right margins = 1 %........ margin: 0% 1% 15px 1%; padding: 0% 0% 0% 0%;

In other words.....

1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% = 100 %

------------------- ------------------- -------------------- -------------------

 

All this works fine in Internet Explorer, Mozilla, Opera and Safari and each div have the same separation respect the neighbor div,..... ... BUT THIS NOT HAPPENS IN CHROME!!!!

 

After this, I tried usig PADDING: margin: 0% 0% 0% 0%; padding: 0% 1% 15px 1%;

and the results are different.

 

With "Padding" it works fine in Internet Explorer, Chrome, Mozilla and Opera and each div have the same separation respect the neighbor div... ... BUT THIS NOT HAPPENS IN SAFARI!!!!

 

I can't understand why this happens because it is a very basic concept... margin... padding.... there are no complicated things.

 

I attach the TESTING MARGINS AND PADDINGS.zip file containing a folder with html and jpg files to you can view it. HTML files contains the CSS code into each html file.

 

I think the margin solution is better, but my question is:

How to make only for Chrome ...... that the CSS code specify the use padding in place of margins??

Do i need to use some prefix like -webkit- , etc?

 

I hope you can help me to solve this.

Thank you in advance!TESTING MARGINS AND PADDINGS.zip

 

GusSiglo21

 

 

 

 

[Ingolme]

The browser has to turn percentages into pixels before rendering the page. The CSS specification doesn't say what to do with the decimal part of a pixel. Some browsers truncate, some browsers round and some might round up to the next value.

 

if 1% is 4.9 pixels, some browsers might round it down to 4 pixels while other round up to 5.

 

Try something like this instead:

 

0.95% 23% 0.95% | 0.95% 23% 0.95% | 0.95% 23% 0.95% | 0.95% 23% 0.95%

-------------------- ---------------------- ---------------------- ----------------------

[gussiglo21]

The browser has to turn percentages into pixels before rendering the page. The CSS specification doesn't say what to do with the decimal part of a pixel. Some browsers truncate, some browsers round and some might round up to the next value.

 

if 1% is 4.9 pixels, some browsers might round it down to 4 pixels while other round up to 5.

 

Try something like this instead:

 

0.95% 23% 0.95% | 0.95% 23% 0.95% | 0.95% 23% 0.95% | 0.95% 23% 0.95%

-------------------- ---------------------- ---------------------- ----------------------

 

Hi Foxy Mod

I will try at Monday using your suggestion.

Hope it can work better.

After try I will notice you about the results

Thank you !!!!!!!!!!!!!!

From Buenos Aires, Argentina...

GusSiglo21