center align works with firefox but not ie6/7

unmei · September 26, 2008

oh my goodness.

i've been ripping my hair out and cannot figure out what in the world is wrong.

so i understand that margin auto does not work...

but the text-align: center; did not fix it either.

it looks perfect in firefox but then messes up in IE 6 and 7

someone help!

http://johnnys-international.com/temp.php

the css looks like..

@charset "utf-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff95db;
background-color: #F3F3F3;
width:100%;
}

a:link
{ text-decoration: underline; color: #ff95db;}

a:visited
{ text-decoration: underline; color: #ff95db;}

a:active
{ text-decoration: none; color:#d070b0;}

a:hover
{ text-decoration: none; color:#fec6eb;}

div {
/*border:1px dashed purple;*/
}

#container {
background-image:url(../_img/background.gif);
width:846px;
text-align : center;
margin:0px auto;
}

#content {
width:800px;
margin:0px auto;
padding:10px 0px;
}

#head {
width:800px;
background-image:url(../_img/box_head_bg.gif);
}

#head_top {
width:800px;
height:3px;
background-image:url(../_img/box_head_top.gif);
background-repeat:no-repeat;
line-height:1px;
font-size:1px;
}

#head_text {
width:780px;
text-align:center;
text-align : left;
margin:0px auto;
}

#head_bottom {
width:800px;
height:3px;
background-image:url(../_img/box_head_bottom.gif);
background-repeat:no-repeat;
line-height:1px;
font-size:1px;
}

#header {
width:800px;
height:165px;
background-image:url(../_img/header.gif);
background-repeat:no-repeat;
margin-top:10px;
}

#main {
width:800px;
margin-top:3px;
}

#leftbox {
width:395px;
background-image:url(../_img/box_small_bg.gif);
float:left;
display: inline;
}

#rightbox {
width:395px;
background-image:url(../_img/box_small_bg.gif);
margin-left:0px;
margin-bottom: -20px;
float:left;
display: inline;
}

#centerbox {
width:800px;
background-image:url(../_img/box_big_bg.gif);
clear:both;
}

#footer {
width:800px;
height:37px;
background-image:url(../_img/footer.gif);
background-repeat:no-repeat;
margin-top:3px;
}

.bigTitle {
background-image:url(../_img/box_title_bg2.gif);
width:800px;
height:20px;
}

.smallTitle {
background-image:url(../_img/box_title_bg.gif);
width:395px;
height:20px;
}

.bigEnd {
background-image:url(../_img/box_big_bottom.gif);
width:800px;
height:1px;
line-height:1px;
font-size:1px;
}

.smallEnd {
background-image:url(../_img/box_small_bottom.gif);
width:395px;
height:1px;
line-height:1px;
font-size:1px;
}

.bigText {
width:780px;
margin:10px auto;
min-height:300px;
}

.smallText {
width:375px;
margin:10px auto;
height:145px;
}

input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d070b0;
background-color: #f8e1fe;
border:1px solid #d070b0;
}

textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d070b0;
background-color: #f8e1fe;
border:1px solid #d070b0;
}

select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d070b0;
background-color: #f8e1fe;
border:1px solid #d070b0;
}

#members_list {
border-top:1px dotted #fec6eb;
border-left:1px dotted #fec6eb;
border-collapse:collapse;
}

#members_list td {
border-collapse:collapse;
}

#members_list td, #members_list th {
border-bottom:1px dotted #fec6eb;
border-right:1px dotted #fec6eb;
border-collapse:collapse;
}

#adminbar {
width:100%;
height:50px;
background-color:#808080;
}

.labelTable {
font-weight:bold;
}

.labelForm {
font-weight:bold;
text-align:right;
vertical-align:top;
}

.button {
border-width:2px;
}

.error {

}

.confirm {

}

.important {

}

ifubad · September 26, 2008

your current doctype is transitional, change it to strict, otherwise, IE goes into quirks mode. Just saved you from premature baldness. It's a common enough mistake that some make.

change to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

bronzemonkey · September 27, 2008

It has nothing to do with using a transitional doctype - that does not trigger quirks mode.

I suspect that the problem is that you have something appearing before the doctype in the source. The viewed source in FF and IE when copied (exactly) into a new file will result in the page being centred as you wanted in IE and the page not rendering in quirks mode. This means that there isn't anything wrong with the html or css as such (yes, {margin:0 auto;} is how you centre elements in standards mode...the text-align is a hack for IE5 or quirks mode, i.e. it's useless here).

If you look at the source in Chrome then it will show a very small dash before the doctype...I assume that you might have a space or something in your original source before the doctype. Make sure that absolutely nothing is getting sent to the browser before the first character of the doctype declaration.

Also, since you are using an HTML doctype, you should not putting xml attributes into the html element and you should not be using:

<meta http-equiv="content-type" content="text-html; charset=utf-8" />

but instead

<meta http-equiv="content-type" content="text-html; charset=utf-8">

unmei · September 27, 2008

i have a question question...so i made all the changes you suggested and it didn't fix it

but before i had changed the charset to utf-8...

it looked like this...

http://johnnys-international.com/

but as soon as i changed the charset it offset the whole site and became ...

http://johnnys-international.com/temp.php

(thank you for your help...really )

Sign In

center align works with firefox but not ie6/7

Recommended Posts

unmei

Link to comment

Share on other sites

ifubad

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

unmei

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information