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

Toggle sidebar Toggle sidebar
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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

 
P

pstylesss

Platinum Member
Mar 21, 2007
2,914
0
0
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.
 
Crusty

Crusty

Lifer
Sep 30, 2001
12,684
2
81
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.
 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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?
 
Crusty

Crusty

Lifer
Sep 30, 2001
12,684
2
81
Well, a lot of those errors are from the javascript. Try putting the script in a separate .js file.
 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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??
 
Crusty

Crusty

Lifer
Sep 30, 2001
12,684
2
81
Well, there is no law that says a site has to be valid code, it just helps with cross-browser display issues.
 
Crusty

Crusty

Lifer
Sep 30, 2001
12,684
2
81
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">
 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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.

 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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?
 
P

pstylesss

Platinum Member
Mar 21, 2007
2,914
0
0
try adding:

text-align:center;

in the body. and change body to html body

EDIT: It is centered in IE7...
 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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?
 
W

WildViper

Senior member
Feb 19, 2002
288
0
76
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.
 
P

pstylesss

Platinum Member
Mar 21, 2007
2,914
0
0
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

COMPANY
RESOURCES
FOLLOW
Top Bottom