View Single Post

AdRock · #1 (**permalink**) Feb 19th, 2007, 21:07

I am trying to align a div which holds an image but it is not centering.

I have an image i use as a background image which gives the impression the page content is a piece of paper with shadows underneath.

I want to add the content in the actual page and in IE it lines up perfectly but if Firefox it's not. In Firefox the div is aligning to the edge of the background image.

If anyone knows how i can align the content centered in both browsers I would be grateful

The background image is 841px by 5px. I've included a zipped folder with the css file, image and html file if people want to see what is going on.

Here is the CSS for the layout so far

Code: Select all

 
body {
   padding: 0;
   margin:0;
   background-color: #69B7E3;
   width: 100%;
   height: 100%;
   text-align: center;
}
 
.content {
   margin-left: auto;
   margin-right: auto;
   width: 841px;
   height: 100%;
   background-image: url(bg1.gif);
   background-repeat: repeat-y;
}
#title {
   width: 787px; 
   height: 120px; 
   position: relative; 
   top: 2px; 
   left: 0px; 
   z-index: 1;
   background-color: #ffffff; 
   border: none;
}