CSS Vertical and Horizontal Centering

JustinWI · 05-07-2006, 01:35 PM

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 · 05-09-2006, 12:45 AM

IE has a default position of top, left. firefox uses top, center.
????: NamePros.com http://www.namepros.com/programming/194908-css-vertical-and-horizontal-centering.html

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 · 05-09-2006, 02:34 PM

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 · 05-09-2006, 04:42 PM

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 · 05-10-2006, 05:46 PM

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 · 05-10-2006, 09:08 PM

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:
????: NamePros.com http://www.namepros.com/showthread.php?t=194908

Code:

body{ 
	margin:0 auto;
	background-color:#CBA77F;
	}
#content{
	position: absolute;
	background-image:url(http://cdn.namepros.com/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 · 05-11-2006, 08:47 AM

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(http://cdn.namepros.com/images/bg.jpg);
background-position:center;
width:800px;
height:741px;
background-repeat: no-repeat;
margin:auto;
}

JustinWI · 05-13-2006, 08:41 AM

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(http://cdn.namepros.com/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>

05-07-2006, 01:35 PM	THREAD STARTER #1 (permalink)
JustinWI NamePros Member Join Date: Aug 2005 Posts: 145	CSS Vertical and Horizontal Centering 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

05-09-2006, 04:42 PM	THREAD STARTER #4 (permalink)
JustinWI NamePros Member Join Date: Aug 2005 Posts: 145	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. Last edited by JustinWI; 05-09-2006 at 04:46 PM.

05-10-2006, 05:46 PM	#5 (permalink)
Hobnob NamePros Member Join Date: Mar 2006 Location: (US) Missouri Posts: 70	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?

05-11-2006, 08:47 AM	#7 (permalink)
Hobnob NamePros Member Join Date: Mar 2006 Location: (US) Missouri Posts: 70	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(http://cdn.namepros.com/images/bg.jpg); background-position:center; width:800px; height:741px; background-repeat: no-repeat; margin:auto; }

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)