-6

I'm now developing my site and was considering FireFox as the main testing zone, but while I tested it on Chrome and IE9 the results were different. On Chrome one of the layers doesn't sit in its place once I open the page but once I refresh it fits exactly where I want it to be. Strange? While on IE one of the divs (the left one) appears to have a higher margin to the left making it too far from the other divs and the font is different which makes some of the words bigger and doesn't fit in the borders. What's the best idea to make my sire looks good on all browsers and which browser should I consider my main testing zone.

P.S: Why people are voting down for my question? We're all learning.

mkiller1001
  • 3
  • 2
  • 7
  • When you have problems with floating divs in IE, chances are you should check your doctype and header. See http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 – Denys Séguret May 20 '13 at 09:47
  • I think the reason people are down voting your question is that are basically asking. Why doesn't my site look good in all browsers when we can't see any code. If you provide a link I think it will help people answer your problem easier. –  May 20 '13 at 10:10

3 Answers3

0

Without seeing the code cant say exactly, but you have missed best practices while develop. You should have check the side while developing in IE and other browser scope, then you could have fixed them while rising.

  • Check your document type.
  • re-set elements
  • Identify IE box model issue.
Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
0

First off,

You should use a reset / normalize script in your css. A good one is Eric Meyers's.

Include this at the beginning of your stylesheet.

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0; 
}
  • I included this but things got a little worse, floating divs floated more away from other divs. I also noticed that the bottom div is also floating exactly with the left one. – mkiller1001 May 20 '13 at 10:02
  • yeah, you should include this first, then begin to code your css. It basically removes inconsistencies between browsers e.g. margins and padding etc. Then there could be issues with your code in general. Do you have a working example? –  May 20 '13 at 10:04
  • do you have a jsfiddle or working example? http://jsfiddle.net/ –  May 20 '13 at 10:07
  • no, I'm developing it locally on my pc – mkiller1001 May 20 '13 at 10:09
  • ok, can you create a jsfiddle and I can try and help? –  May 20 '13 at 10:11
  • I tried it and it fixed everything except for the div on the left which has a left floating. The site now looks the same on Firefox and chrome but IE9 still messing with the left div. – mkiller1001 May 20 '13 at 10:27
  • 1
    like i said, if you can create a jsfiddle I will be able to help, until then there really isn't much I can do. –  May 20 '13 at 10:29
0

you should use something like boilerplate to start every project or just use some css reset.

That way those minor differences btw browsers (paddings, margins etc etc) can be fixed.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
...

more at: http://meyerweb.com/eric/tools/css/reset/

About the browsers you should test at the most important ones... In a long term (week by week) i test in some minor relevante browsers just to make sure its works as well.

José Pacheco
  • 21
  • 2