PDA

View Full Version : horizontal positioning - IE nightmare


SuperTramp
January 11th, 2009, 02:52 PM
hey everyone, im making a site and am trying to position a CSS 'container' element/div horizontally on the screen.

ive got it fine on firefox, by using margin: 0px auto; but have seen lots of article on the net talking about bugs with IE.

i have made a few sites before and got them horizontally aligned in both IE and firefox, so im not sure whats going on here.

if anyone could help id greatly appreciate it.

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=utf-8" />
<title>Home</title>
<style type="text/css">
<!--
body {
text-align: center;
}
-->
</style>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container" align="center">
<div id="topleftimg"><img src="img/topLeft.png" alt="Top left img" /></div>
<div id="leftbar"><img src="img/leftBar.png" alt="Left bar" /></div>
<div id="maintitle"><h3>Home</h3></div>
<div id="content">
<p><b>Welcome to this website!</b></p>
<p>Here is an example homepage</p>
</div>
</div>

</body>
</html>External CSS for 'container':


#container {
position:absolute;
width: 400px;
height: 400px;
bottom: 0px;
margin: 0 auto;
padding: 0px;
float: none;
left: 0px;
right: 0px;
text-align: center;
}Cheers

ST
cstyle
January 12th, 2009, 10:39 AM
Whats up ST.

If you are trying to center the container horizontally remove the 'position:absolute' property. Let me know how you make out.
SuperTramp
January 12th, 2009, 12:50 PM
hey cstyle, i tried taking the position property out of my external style sheet, but the element didnt center, and was aligned to the left in both firefox and IE.

thanks anyway though, any other ideas?

dam IE grr!

ST
redelite
January 12th, 2009, 01:30 PM
Try this:

HTML


<!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=utf-8" />
<title>Home</title>

<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topleftimg"><img src="img/topLeft.png" alt="Top left img" /></div>
<div id="leftbar"><img src="img/leftBar.png" alt="Left bar" /></div>
<div id="maintitle"><h3>Home</h3></div>
<div id="content">
<p><strong>Welcome to this website!</strong></p>
<p>Here is an example homepage</p>
</div>
</div>

</body>
</html>
CSS: (fill in your width)


#container {
display: block;
margin: 0 auto;
padding: 0;
width: xx;
}
That should center #container in FF, Safari, IE, Chrome, and Opera. Also you might want to look into using a reset CSS file.

http://meyerweb.com/eric/tools/css/reset/

Hope this helps! :beer:

*Edit: Also, attributes like 'align' are deprecated for most elements, as well as elements like <b>, instead use <strong>. Just a FYI.