gussiglo21 Posted October 12, 2013 Share Posted October 12, 2013 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 comment Share on other sites More sharing options...
Ingolme Posted October 12, 2013 Share Posted October 12, 2013 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% -------------------- ---------------------- ---------------------- ---------------------- 1 Link to comment Share on other sites More sharing options...
gussiglo21 Posted October 13, 2013 Author Share Posted October 13, 2013 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now