Extra Spacing Added In Some Browsers

Get Started
1

Hi All

I am having various issues with various websites and think that it might all be related.

Basically it is a spacing issue. IE everything is fine however in the other browsers it is not.

An example is the contact form. I have it in a table and it appears that in the other browsers a pile of padding is being added to it.

Also in my shopping cart the information in IE works fine but in the other browsers it is all spread out. Again all of this is in a table.

Also with the checkout area. Each part between tables look like they have padding too.

This used to work fine in all browsers as the code I am using I have been using for years.

Any ideas or suggestions?

Thanks for any help…

mrmbarnes

2

What most do is use a conditional stylesheet for IE and then a style for everything else. Googling “Conditional Stylesheet” will get you plenty of tutorials.

3

So run 2 stylesheets for each website?

4

You may or may not be aware that IE is a very poor browser, and so it can be a really bad sign when something “works” in IE but no other browser. Too often, it means that you’ve learned how to do something the wrong way by learning to code for IE. The normal workflow for web designers is to build a site properly so that it’s working in modern browsers, then check the site in IE and fix all the IE-specific bugs. (Mind you, you should check the site regularly, not just at the end, but the principle still applies.)

In terms of padding etc, each browser has its own default paddings and margins on various elements, so that can come into it. Many designers start their stylesheet by zeroing out a lot of the default margins and paddings like so:

html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

This can save you a lot of confusion and misery.

Note also that laying out a site with tables is a bad idea anyway. So you may be experiencing problems you could avoid with a more modern layout strategy.

Beyond that, we would need to see your page (or at least the code) to help much more. There are ways to target styles and style sheets specifically to the IE browsers, but that should be considered a last resort.

5

Awesome, thanks