[RESOLVED] IE Centering Bug

[Joseph Witchard]

My site disclaimer in my footer centers perfectly in every browser I've tested it in, except for, of course, Internet Explorer. On Internet Explorer, it doesn't center right on some of the pages.

Here's my CSS:
/* style elements for the wrapper */

#wrapper {
width: 1025px;
}

/* style elements for the headers */

#headers {
width: 990px;
height: 150px;
}

#header1 {
float: left;
width: 735px;
height: 150px;
margin-bottom: 15px;
background-image: url(/images/misc/rebirth_banner_3.jpg);
}

#header2 {
float: left;
width: 250px;
height: 150px;
padding-bottom: 80px;
}

#headerAd {
width: 234px;
height: 60px;
margin: 20px auto;
}

/* style elements for the navigation buttons */

img.button3 {
border: 0px;
width: 145px;
height: 65px;
}

/* for the site URL image */

#hogwarts_rpg {
border: 0px;
width: 165px;
height: 70px;
}

/* style elements for the navigation menu */

#navigation {
width: 150px;
margin-right: 15px;
position: absolute;
top: 155px;
left: 0px;
}

/* for the navigation ad */

#nAd {
width: 120px;
padding-left: 17px;
}

/* this HTML division contains all of the
design elements for the right side of
the page */

#right {
padding-left: 5px;
padding-right: 5px;
width: 300px;
height: 1400px;
margin-left: 10px;
position: absolute;
top: 175px;
left: 690px;
}

#rightAd {
width: 160px;
height: 600px;
margin-left: 43px;
padding: 15px 15px 15px 15px;
}

/* this area will contain the center of the page */

#center {
padding-left: 5px;
padding-right: 5px;
width: 500px;
height: 2500px;
position: absolute;
top: 175px;
left: 160px;
}

/* for the current poll */

#current_poll {
width: 180px;
margin-left: 50px;
}

/* for the disclaimer */

#disclaimer {
width: 275px;
position: absolute;
top: 2200px;
padding-left: 120px;
font-size: 8pt;
text-align: center;
}

/* for the news post ad */

#npAd {
width: 200px;
height: 200px;
margin-top: 20px;
margin-left: 298px;
}

/** Coded by: Jeffrey (Joseph Witchard)
** Created on: 01/16/09
** Last modified: 02/28/09
** Purpose: To group the main pages
** structure into one file
** so that it can then be
** included. */

My post was way too long to fit, and I'm still having trouble fitting it even by separating it into several posts, so here's some links:
http://www.uhrebirth.com/rules.php (pages that doesn't center correctly)
http://www.uhrebirth.com/affiliates.php (page that DOES center correctly)

[NXInteractif]

Joseph-

I believe the issue is that for some reason, the actual page does not render at 100% width and height in IE (for PC users at least).
The most common CSS method to resolve this issue is simply add all the following code to your stylesheet:


/* hide from ie on mac \*/
html {
width: 100%;
height: 100%;
}


Hopefully thatll work out for you

-j.

[Joseph Witchard]

I'm sorry, but I don't understand what you mean. I haven't reported any CSS issues when it's viewed on a Mac:confused: (Which might only be because I don't have access to a Mac in which I can test my site on.)

And my wrapper div is not set to 100% width and height.

[NXInteractif]

The code i gave you works on PCs, not Macs, because the centering problem only occurs on PCs.
So in simply adding those lines of code to your CSS file, it should resolve your problem. And by resizing the width and height to 100%, its expanding to be 100% of the browser size.

[Joseph Witchard]

The code i gave you works on PCs, not Macs, because the centering problem only occurs on PCs.
So in simply adding those lines of code to your CSS file, it should resolve your problem. And by resizing the width and height to 100%, its expanding to be 100% of the browser size.

But it won't affect my wrapper, right?

[NXInteractif]

No it will not.
Study up on your CSS. The code I gave you only affects your outer-most element i.e. "html"

[Joseph Witchard]

Thanks:)

[NXInteractif]

No problem.