• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Argggghhhh! I give up. Please help with centering a page in IE7

W

WildViper

Senior member
Hi,

I have spent the whole morning looking on the web for something that will allow me to apply a fix to get the pages of my site to "center" in IE 7. IE6, Firefox 2.0 are good to go. I can't check Safari(if you have, please let me know any alignment issues).

So how do I do this?

Here is the css:

/* CSS Document */
body{
margin: 20px 0 0 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
background-color:#ffffff;
background-image: none;
color:#fff;
scrollbar-face-color: #525252;
scrollbar-highlight-color: #B0B0B0;
scrollbar-shadow-color: #111111;
scrollbar-3dlight-color: #777777;
scrollbar-arrow-color: #D56C00;
scrollbar-track-color: #333333;
scrollbar-darkshadow-color: #111111;
text-align:center;
}

#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px; /*Height of frame div - Anand: 80px */
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color:#ffffff;
background-image: none;
color:#fff;
}
#menu{
position: absolute;
top: 80px; /* Anand: 80px */
left: 0;
width: 100%;
height: 20px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color:#ffffff;
background-image: none;
color:#fff;
}

#wrapper{
position: fixed;
top: 130px; /*Set top value to HeightOfFrameDiv - Anand: 130px*/
left: 20px;
right: 0;
bottom: 20px;
overflow: auto;
width: 833px;
background: #3d3d3d;
background-image: none;
color:#fff;
text-align:left;
margin:0 auto;
border:2px solid #6f4d2b;
padding:20px;
}
#contactleft {
width:45%;
float:left;
}
#contactright {
width:45%;
float:right;
}
* html #contactleft {
width:45%;
float:left;
}
* html #contactright {
width:45%;
float:right;
}
.clear {
clear:both;
}

* html body{ /*IE6 hack*/
padding: 130px 0 20px 0; /*Set value to (HeightOfFrameDiv 0 0 0) Anand: First value was 130px*/
}

* html #wrapper{ /*IE6 hack*/
height: 100%;
width: 833px;
}

#menu {
width:100%;
height:50px;
color:#ffffff;
background-color:#ffffff;
background-image: none;
}

ul#navlist
{
margin-left: 0;
margin-top:10px;
padding-left: 0;
white-space: nowrap;
font-weight:bold;

}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff6c8;
background-color: #000;
background-image: none;
text-decoration: none;
}

#navlist a:hover
{
color: #000;
background-color: #fff6c8;
background-image: none;
text-decoration: none;
}

#headerimg {
margin:15px;
}

Please note that this happens on all pages except Home page. Home page shows up perfect in all browsers. That uses a different CSS.

Here is that one:

/* CSS Document */

body {
margin:20px 0 0 0;
border:0;
padding:0;
background:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:normal;
font-size:80%;
text-align:center;
scrollbar-face-color: #525252;
scrollbar-highlight-color: #B0B0B0;
scrollbar-shadow-color: #111111;
scrollbar-3dlight-color: #777777;
scrollbar-arrow-color: #D56C00;
scrollbar-track-color: #333333;
scrollbar-darkshadow-color: #111111;
}

#header {
width:100%;
color:#fff;
}


#menu {
width:100%;
height:50px;
color:#fff6c8;
}

#wrapper {
width:833px;
margin:0 auto;
padding:20px;
color:#FFFFFF;
border:2px solid #6f4d2b;
text-align:left;
}

img {
text-align:center;
}

Thank you

 
html body{
margin: 20px 0 0 0;
margin-left:auto;
margin-right:auto;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
background-color:#ffffff;
background-image: none;
color:#fff;
scrollbar-face-color: #525252;
scrollbar-highlight-color: #B0B0B0;
scrollbar-shadow-color: #111111;
scrollbar-3dlight-color: #777777;
scrollbar-arrow-color: #D56C00;
scrollbar-track-color: #333333;
scrollbar-darkshadow-color: #111111;
text-align:center;
}


Try that.
 
Well, your code is nowhere near that doctype. Once your html code can validate then you should worry about the CSS, otherwise you will have to be playing with hacks and crappy CSS support from the various browsers.
 
Holly crap. That is a lot of errors.

I guess I better look at that. This was coded by someone that I paid online. I thought they did a good job in coding. Obviously not.

Can you guys see the site ok?
 
Ok, I take that back.

I have checked, Google, Anandtech, CNN, Yahoo, Mapquest, Amazon(over 1,000 errors) and Ebay. They all have errors and lots of them. Google was the lowest I think.

So, this validator seems more like a terminator then anything. The only problem I have seen is the centering on IE7. IE6, Firefox and Safari work good. So, am I missing something, am I not seeing something that this validator sees??
 
Well, there is no law that says a site has to be valid code, it just helps with cross-browser display issues.
 
Im guessing you need to remove the leading / in "/scripts/fade.js" cause it will be looking in your root folder on your hdd for /scripts

<script src="/scripts/fade.js" type="text/javascript">
 
hmm...I did do that. It still doesn't work. Perhaps this has to be in the HTML doc??

Sorry, I am totally new to this. Just doing this for my wife.

 
bingo. That worked.

So, when I validate this page...it goes from 60 errors to 3 errors! Thanx, that helps. I will now do that to the main page.

Any idea how I can get the centering thing done for IE7 without messing up the others?
 
it is??? are you talking about just the home page? That is centered for some odd reason. The other pages are not. They move t the left.

The text-align command is there already. What do you mean by changing the body to Html?
 
Damn...I got the centering done, but now the "overflow" command won't work in Firefox. WTF???

Please check out this page: http://www.fotomango.com/faq.html

It scrolls in IE 7 and IE6, but not in Firefox now. Any hints?

Edit

Ok I figured this out. Not exactly the look I wanted, but I am tired and I am ok with the page.

You can see it at: FotoMango Faq Page

The problem was that while I got the pages to center on IE6, IE7, Safari, and Firefox 2.0, I lost the scroll bar feature from Firefox. So my text was cutoff on this page.

From what I read online, none of these MFs are standardized and they create their own damn commands. Why they can't just allow us to put in the CSS files :This code is for IE7, This code is for Firefox is beyond me.

This would avoid a lot of the bs and hacks.

Anyways, I had to use the !important command within the faq.html file itself. There I re-activated overflow:auto command.

so, it was:

<STYLE TYPE="text/css">
body {scrollbar-base-color: #FF9900 !important; overflow:auto !important;}
</STYLE>

Put that in and it should work.
 
with overflow, you need to set the position: to something, but I can't remember what. FF and IE7 interpret CSS almost the same, you're main issue should be IE6.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top