margins different in different browsers

[james438]

I am working on designing a calendar page for my church here: http://www.sovgraceopc.org/calendar.php

What I am having trouble understanding is why there is a subtle difference in the heights of the cells. This is most easily seen when rapidly changing back and forth between viewing the page in Opera and then in Chrome.

Firefox and Opera appear as they should, but in Chrome and ie8 heights are larger than they should be by about 1px. I cleared away some of it by setting the padding of the cells and rows to 0px, but that did not entirely clear up the problem.

Any thoughts?

[jscheuer1]

If you have to rapidly switch browsers to really see it, it's not a problem.

[james438]

fair enough.

[traq]

in most cases, I'd say that a problem that's hard to notice is still a problem
...but I'll side with John on this one. :D

If you ever have more serious cross-browser CSS issues, you might look into normalize.css (http://necolas.github.com/normalize.css/).

[james438]

No worries. The spacing issue does not bother me either. I was able to take care of most of the problems myself, but the person I am doing this for can be rather picky. If he is satisfied with the corrections I have made then I won't bring it up. In short, the three of us agree :)

[djr33]

You can (try to) explain the nature of HTML to your client: it's presentational markup suggesting how it should look. For example, a text-only browser is still completely valid, by taking the suggestions of the HTML and doing its best to make the page presented well and follow the way that the code makes some items important, etc. Here, the different browsers just seem to be interpreting the table differently. I don't see the problem in that. HTML isn't in pixels. It's in shapes, relationships and relative sizes.

On the other hand, I can see this being a problem if you're trying to make an exact fit, such as a certain screen size or trying to fit this in a statically-sized layout (eg, 800px wide) and it starts to break the elements around it.

[ankush]

you can try this and use different stylesheet for IE


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->