Spacing (margin?) issue in IE

[okrogius]

Currently working on a full CSS based layout. The site looks nice in Firefox, but whenever rendered in IE it seems to receive significantly more spacing. As if all display: block; items just got a double top/bottom margin sort of.

The difference is notable on all pages, but particularly on pages with forms. Examples:
http://www.cgshock.com/temp1/spacing-firefox.jpg (firefox, as intended)
http://www.cgshock.com/temp1/spacing-ie.jpg (ie - )

You can see the source of that page at http://www.cgshock.com/temp1/spacing-source.txt

Primary stylesheet is at http://www.cgshock.com/assets/styles/main.css
There are two alternate sheets, but they do nothing but change font-sizes.

I'd greatly appreciate any help with this.

[Paul O'B]

Haven't had time to look at your page but there's a few things you can try first

All elements have default margins (and sometimes padding) and its up to you to control them explicitly as browsers vary greatly in the amount they apply.

IE adds large margins around its forms and you can set all browsers on an even level by specifying.

form {margin:0;padding:0}

You also gave to control elements such as <p> and <h1> h2 etc.... These have greatly differing defaults between browsers.

Just set them to zero or to the exact amount of margin as required.

If this doesn't cure it then post again and I will look later.

Paul

Edit:


Had a quick look and this should help.

form {margin:0;padding:0}
form p {margin:0}

[Gibb]

i'm trying to get this to work with div tags and it's not removing the newline after the /div. I have two buttons at the bottom of a page for "Download" and "Print". I want them to be on the same line, and i have a specific code of CSS block for the buttons. Code looks like this:

<div class="btnBorder">
<input type="submit" class="hoverBtn" value="Download" ...etc />
</div>
<div class="btnBorder">
<input type="submit" class="hoverBtn" value="Print" ...etc />
</div>

the btnBorder class just puts a 2px solid border around the buttons. The above code will put the Print btn on a newline tho, and i need them to be on the same line. I've tried putting margin: 0; padding: 0; into my CSS for DIV, as well as in my btnBorder and hoverBtn classes, but i still get the newline.

[Paul O'B]

Hi,

A div is a block level element and will insert a newline automatically. That's its job so thats what it does

Why don't you just put them on the same line in the same div?

<div class="btnBorder">
<input type="submit" class="hoverBtn" value="Download" ...etc />
<input type="submit" class="hoverBtn" value="Print" ...etc />
</div

Alternatively if you have them styled in some other way as well then you can add display:inline to the class or add float:left to the styles.

Paul

[okrogius]

Thanks Paul, your fix worked wonderfully . Rather unfortunate that there is no standard "defualt" browser css settings though .

On a related note it seems I have more margin/padding issues. This time the issue in un-ordered lists on a sidebar (right of the screenshots). I tried alterint margin/padding for both the ul and li items, but it didn't seem to produce much results. If you can help that would be much appreciated.

Source: http://www.cgshock.com/temp1/spacing-source2.txt
Picture in firefox: http://www.cgshock.com/temp1/review.jpg
Picture in IE: http://www.cgshock.com/temp1/review-ie.jpg
(Note things in the 3rd column sidebar, under "Game Info". <li> items appear to have very large padding or margin values set, yet I tried altering that as I mentioned above and it didn't seem to change much) [Ignore the <h3> size discrepancy, I fixed that already.]

Thanks

[Paul O'B]

Hi,

Agaian this is margin/padding issues. Mozilla uses padding for its bullet spacing and ie use margin so you need to set both.

This will collapse all the spaces in the list.

ul.nav, ul.nav li {margin:0;padding:0;}

Now you can just set the exact spacing that you require.

Paul