Another annoying Firefox/IE discrepancy

[GOAT2G]

I've just finished the main template for my little web project, all using CSS, but I have a few pixels of difference when I view it in IE. I'd say there was around 2 or 3 pixels of vertical space presented in FF that are not there in IE. Those few pixles make all the different unfortunately as I am trying to match up diagonal stripes!

I've uploaded my site to:
http://download.yousendit.com/22B37B1912846BDC

I have looked around the net for various solutions but none are really relevent to my situation. I have tried a few hacks but none of them have worked. Any suggestions would be welcome. I have to hand this in for an assignment on Friday! Very last minute of me, I know.

Here's my CSS:

@charset "utf-8";
.background {
background-image: url(Files/background_tile.gif);
background-position: center;
background-repeat: repeat-y;
background-color: #333333;
}
.logoposition {
margin-top: -300px;
margin-left: -149px;
position: absolute;
left: 50%;
top: 50%;
}
.redeembutpos {
margin-top: -115px;
margin-left: -180px;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
border: 0;
}
.aboutusbutpos {
margin-top: -115px;
margin-left: -91px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
}
.helpbutpos {
margin-top: -115px;
margin-left: -2px;
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
}
.logoutbutpos {
margin-top: -115px;
margin-left: 87px;
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
}
.blackboxpos {
margin-top: -54px;
margin-left: -242px;
position: absolute;
left: 50%;
top: 50%;
}
.legalboxpos {
margin-top: 218px;
margin-left: -180px;
position: absolute;
left: 50%;
top: 50%;
}
.legaltextpos {
margin-top: 230px;
margin-left: -92px;
position: absolute;
left: 50%;
top: 50%;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: lowercase;
color: #FFFFFF;
}

[_Aerospace_Eng_]

What is up with all of the absolute positioning? Also it would be easier if you could upload your site to an actual webhost rather than having us try to download your site and rebuild it.

[jcdevelopment]

a quick easy fix possibly, do you have



* {
margin:0px;
padding:0px;
}


in your code?

[GOAT2G]

What is up with all of the absolute positioning? Also it would be easier if you could upload your site to an actual webhost rather than having us try to download your site and rebuild it.

The absolute positioning is the best way I've found to center elements on a page both vertically and horizontally - in my limited experience.

I'm having trouble with my web host at the moment, that's the only reason I didn't give you a direct link.

I tried the padding and margin tip suggested by jcdevelopment, but that did no good.

Just to clarify, the problem seems to be with IE7 specifically. I just tried the site in IE6 and it displays fine.

:confused:

[felgall]

Using absolute positioning to center something is doing it the hard way.

See http://www.felgall.com/cshow03.htm for the easiest way to center the content.

[GOAT2G]

Using absolute positioning to center something is doing it the hard way.

See http://www.felgall.com/cshow03.htm for the easiest way to center the content.

I'll use that next time, thanks for your help :)

[Excavator]

Hello GOAT2G,
I'm not seeing anything wrong in IE7 compared to FF, in spite of what the validator says:Failed validation, 209 Errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.yousendit.com%2Ftransfer.php%3Faction%3Ddownload%26ufid%3D22B37B1912846BDC)

Maybe you could be more specific with what's wrong?