Jump to content

Problem with margins between different browsers


Recommended Posts

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

 

 

 

 

Link to post
Share on other sites

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%

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

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...