NameSilo

CSS Vertical and Horizontal Centering

Spaceship Spaceship
Watch

JustinWI

Established Member
Impact
0
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable DomainsUnstoppable Domains
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>
 
0
•••
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.
 
1
•••
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:
0
•••
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?
 
0
•••
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;
}
 
0
•••
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;
}
 
1
•••
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>
 
Last edited:
0
•••
Dynadot — .com Registration $8.99Dynadot — .com Registration $8.99

We're social

Unstoppable Domains
Domain Recover
DomainEasy — Payment Flexibility
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back