CSS Vertical and Horizontal Centering

JustinWI · May 7, 2006

Another CSS problem for me in IE. In FireFox and Safari, my DIV is centered vertically and horizontally. In IE, it is in the top left corner. The web page is http://www.myclips.tv/POE/ and the CSS is http://www.myclips.tv/POE/layout.css .

Any help is appreciated.

Thanks

Hobnob · May 9, 2006

IE has a default position of top, left. firefox uses top, center.

change your code to:

Code:

<div align=center>
<table border=0>
	<tr>
		<td>
<div id="content"> 
<div id="menu">

<a href="./index.html" id="home">Home</a>
<a href="./about/" id="about">About</a>
<a href="./menu/" id="menu">Menu</a>
<a href="./banquet/" id="banquet">Banquets</a>
<a href="./gallery/" id="gallery">Gallery</a>
<a href="./location/" id="location">Location</a>
<a href="./contact/" id="contact">Contact</a>
</div>
<div id="contentBox"><H2 align="center">Testing</H2> 

</div>
</div>
		</td>
	</tr>
</table>
</div>

Dan · May 9, 2006

I would do:

Code:

<!--[if IE]>
<table width="100%" height="100%" align="center">
  <tr>
    <td width="100%" height="100%" align="center" valign="middle">
<![endif]-->
<div id="content"> 
<div id="menu">

<a href="./index.html" id="home">Home</a>
<a href="./about/" id="about">About</a>
<a href="./menu/" id="menu">Menu</a>
<a href="./banquet/" id="banquet">Banquets</a>
<a href="./gallery/" id="gallery">Gallery</a>
<a href="./location/" id="location">Location</a>
<a href="./contact/" id="contact">Contact</a>
</div>
<div id="contentBox"><H2 align="center">Testing</H2> 

</div>
</div>
<!--[if IE]>
    </td>
  </tr>
</table>
<![endif]-->

So only IE users get the table.

JustinWI · May 9, 2006

Thanks for the help so far. It pushed the text(div id "contentBox") over on the first page, but not the whole "content" div which has the background. Any other thoughts?

Edit : I also just tested it on the gallery page. It will push the flash gallery over but not the content div.

Hobnob · May 10, 2006

can you paste your new code here so I can see what it is doing, i'm too lazy to check myself. Do you have any absolute positioned elements in your style sheet?

JustinWI · May 11, 2006

HTML

Code:

<body>
<!--[if IE]>
<div align="center">
<table width="100%" height="100%" align="center">
  <tr>
    <td width="100%" height="100%" align="center" valign="middle">
<![endif]-->
<div id="content">
<div id="menu">
<a href="./index.html" id="home">Home</a>
<a href="./about/" id="about">About</a>
<a href="./menu/" id="menu">Menu</a>
<a href="./banquet/" id="banquet">Banquets</a>
<a href="./gallery/" id="gallery">Gallery</a>
<a href="./location/" id="location">Location</a>
<a href="./contact/" id="contact">Contact</a>
</div>
<div id="contentBox"><H2 align="center">Testing</H2> 
</div>
</div>
<!--[if IE]>
    </td>
  </tr>
</table>
</div>
<![endif]-->
</body>

CSS:

Code:

body{ 
	margin:0 auto;
	background-color:#CBA77F;
	}
#content{
	position: absolute;
	background-image:url(./images/bg.jpg);
	background-position:center;
	width:800px;
	height:741px;
	background-repeat: no-repeat;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
              }
			  	
#contentBox{
	position:absolute;
	margin-top: 100px;
	margin-left:200px;
	width:600px;
}
#contentBox h2 {
color:#FFFFFF;
	text-align:center;
	font-size:18px;
	}
#contentBox a.active {
color:#006699;
text-decoration:none;
}
	#contentBox a {
color:#FFFFFF;
	}
#flash{
	position:absolute;
	margin-top: 165px;
	margin-left:215px;
}
#flash h3{
	font-weight: 900;
	font-size:18px;
	text-align:center;
}
#flash h2 {
font-weight:800;
font-size:16px;
text-align:center;
}
#menu a {
 	position: absolute;
 	height: 29px;
  	margin-top: 83px; 
  	text-decoration: none;
  	font-family: papyrus, Times, serif; 
  	font-size:larger;
 	font-style:normal;
 	color:#000000;
 	font-weight: 900; 
  }
#menu a:hover{
	color:#7ccbd2;
}
a#home { top: 50px;left: 145px; }
 a#about{ top: 125px;left:85px;}
a#menu { top:200px;left: 70px; }
a#banquet { top: 275px;left: 30px; }
a#gallery { top: 350px; left: 60px;}
a#location { top:425px;left: 75px;}
a#contact { top:500px;left: 125px;}

#items{
position:relative;
font-weight: 900;
text-align:center;
height:465px;
overflow:auto;
}
#items strong {
text-decoration:underline;
}
#items em {
color:#ebebeb;
}

Hobnob · May 11, 2006

Try setting #content's position to relative instead of absolute and get rid of the top, left, bottom and right attributes so it just looks like this:

#content{
position:relative;
background-image:url(./images/bg.jpg);
background-position:center;
width:800px;
height:741px;
background-repeat: no-repeat;
margin:auto;
}

JustinWI · May 13, 2006

Thanks for that. I just call a seperate IE CSS file with that code for the content box and it now centers horizontally in IE.

Do you know how to get it centered vertically now?

Thanks for the help

Finally got it to work using a combination of the things posted in this thread.

Thanks for all of the help. Here is the final html and IE CSS.

ie.css

Code:

#content{
position: relative;
background-image:url(./images/bg.jpg);
background-position:center;
width:800px;
height:741px;
background-repeat: no-repeat;
margin:auto;
}

 body {
margin:0;
padding:0;
height:100%;
width:100%;
}

index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout.css">
<!--[if ie 6]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]--> 
<title>Pieces of Eight Website Example</title>
</head>
<body>
<!--[if IE]>
<table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
<div id="content">
<div id="menu">
<a href="./index.html" id="home">Home</a>
<a href="./about/" id="about">About</a>
<a href="./menu/" id="menu">Menu</a>
<a href="./banquet/" id="banquet">Banquets</a>
<a href="./gallery/" id="gallery">Gallery</a>
<a href="./location/" id="location">Location</a>
<a href="./contact/" id="contact">Contact</a>
</div>
<div id="contentBox"><H2 align="center">Testing</H2> 
</div>
</div>
<!--[if IE]>
</td></tr></table>
<![endif]-->
</body>
</html>

CSS Vertical and Horizontal Centering

Established Member

Established Member

Buy my domains.VIP Member

Established Member

Established Member

Established Member

Established Member

Established Member

Similar threads

We're social

Kostroma.com

DangerousGoods.org

usahospitals.org

Invetis.com

customerfinance.com

coatcover.com

wkq.xyz

sexdollrentals.com

BeefJerkyRecipe.com

MetaCounts.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling