Center/wrapper issue in Firefox

**leekaye** · Jan 1, 2007 12:46

As a total newbie, I've exported my CSS from photoshop which created a bunch of absolute divs for each graphic slice. I can live with this for now (still testing) but I can't figure out how to get the content centered. It centers great in IE but not FF. I've tried several fixes from sites but can't figure out where the fix is.

Appreciate ANY help!
Lisa

CSS:

body {
text-align: center; /* Hack to center the wrapper in IE5.x pc */
min-width: 778px; /* Prevents the body becoming narrower than our wrapper div */
background: url(images/background.gif) repeat;
margin: 0;
padding: 0;
border: 0;
}

#wrapper {
position:relative;
margin:0 auto;
text-align:left;
width: 778px;
}

#content {
left:0px;
top:0px;
width:761px;
height:749px;
text-align: left;
position: relative;
border-color: red;
}

#homepage {
position:absolute;
left:0px;
top:0px;
width:761px;
height:21px;
}

#homepage002 {
position:absolute;
left:0px;
top:21px;
width:32px;
height:348px;
}
...

HTML:
<html>
<head>
<title>NorthPointe Community Church</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<div id="homepage">
<img src="imgs/homepage.jpg" width="761" height="21" alt="" /> </div>
<div id="homepage002">
<img src="imgs/homepage-02.jpg" width="32" height="348" alt="" /> </div>
<div id="homepage02">
<img src="imgs/homepage02.jpg" width="275" height="133" alt="" /> </div>
...

**drhowarddrfine** · Jan 1, 2007 14:23

The main problem is the use of absolute positioning and trying to center it all. Your code is also, apparently, using Xhtml end tags but using html and in quirks mode. I know you may not know what all that means but you are showing us why you should never use Photoshop to create web pages. It's a mess.