bathkbra000
09-12-2011, 09:36 PM
Hello everyone,
I'm having trouble centering objects horizontally in Firefox 4 and 5, where they are instead aligned to the left. The site appears perfectly in Firefox 6, IE9, 8, 7, 6, Safari 5, Chrome 13, and 11 (I tested them in Adobe BrowserLab). Given Firefox's excellent standards compliance, I'm inclined to believe the problem lies in my css, but I'm not sure where. I've been tinkering with it for several hours, to no avail. So, if anyone can help me with this, I will be extremely grateful. I've posted the relevant code below, but if anyone needs to access the site, the URL is:
http://www.reedhillbandb.com/
Anyway, here is the css:
body { text-align: center;
margin: 0px auto;
background-color: #493400;
font-family: Georgia, serif;
font-size: large; }
div.header { background-image: url('images/header_bg.jpg');
height: 580px;
width: 100%; }
img.slideshow { border: 8px solid white;
margin-top: -45px; }
div.footer { height: 300px;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #231900;
margin-top: 35px; }
div.menu { width: 1000px;
margin: 5px auto; }
div.menu a { margin: 0px 35px;
text-decoration: none;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif; }
div.menu a:hover { color: #ffe199; }
div.content { width: 716px;
margin: auto;
background-color: #e7d6ac;
padding: 20px 50px; }
div.contentPanels { }
div.leftPanel { width: 275px;
float: left; }
div.rightPanel { text-align: left;
width: 400px;
float: right; }
div.clearFloat { clear: both; }
div.imageGallery img { width: 600px;
border: 5px solid white; }
div.footerMenu { width: 1000px;
margin: 5px auto; }
div.footerMenu a { margin: 0px 5px;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif; }
div.footerMenu a:hover { color: #ffe199; }
Also, here's the html from one of the pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!--
Reed Hill Bed & Breakfast
Website Design by Brad Bathke
Created in 2011
-->
<head>
<title>Reed Hill Bed & Breakfast | Image Gallery</title>
<link rel = "stylesheet" type = "text/css" href = "reedStyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name = "keywords" content = "reed hill, bed and breakfast" />
<meta name = "description" content = "Reed Hill Bed and Breakfast in Omro, Wisconsin" />
<script type = "text/javascript" src = "js/preloadImages.js"></script>
</head>
<body>
<?php include('includes/header.php'); ?>
<div class = "content">
<p>Reed Hill has a lot to offer during your stay. Feel free to browse our gallery below to get an idea of what you have to look forward to during your visit.</p>
<div class = "imageGallery">
<p><img src = "images/1.jpg" alt = "Image 1" /></p>
<p><img src = "images/2.jpg" alt = "Image 2" /></p>
<p><img src = "images/3.jpg" alt = "Image 3" /></p>
<p><img src = "images/4.jpg" alt = "Image 4" /></p>
<p><img src = "images/5.jpg" alt = "Image 5" /></p>
<p><img src = "images/6.jpg" alt = "Image 6" /></p>
</div>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
If it will help, here is the code for the header and footer as well...
Header:
<div class = "header">
<img src = "images/header_logo.jpg" alt = "Reed Hill Logo" /><br />
<img class = "slideshow" id = "slideShow" src = "images/slide_01.jpg" alt = "Image 1" />
<script type = "text/javascript" src = "js/flipImages.js"></script>
<br />
<div class = "menu">
<a href="index.php">Home</a>
<a href="directions.php">Directions</a>
<a href="gallery.php">Gallery</a>
<a href="meetUs.php">Meet Your Hosts</a>
<a href="contact.php">Contact Us</a>
</div>
</div>
Footer:
<div class = "footer">
<p>
<br /><br />
<img src = "images/footer.png" alt = "Reed Hill Omro Wisconsin" />
</p>
<p>© Copyright 2011 Reed Hill Bed and Breakfast - all rights reserved<br />
Website design and development by Brad Bathke</p>
<div class = "footerMenu">
<a href="index.php">Home</a>
<a href="directions.php">Directions</a>
<a href="gallery.php">Gallery</a>
<a href="meetUs.php">Meet Your Hosts</a>
<a href="contact.php">Contact Us</a>
</div>
</div>
Thank you again for any help you can provide.
I'm having trouble centering objects horizontally in Firefox 4 and 5, where they are instead aligned to the left. The site appears perfectly in Firefox 6, IE9, 8, 7, 6, Safari 5, Chrome 13, and 11 (I tested them in Adobe BrowserLab). Given Firefox's excellent standards compliance, I'm inclined to believe the problem lies in my css, but I'm not sure where. I've been tinkering with it for several hours, to no avail. So, if anyone can help me with this, I will be extremely grateful. I've posted the relevant code below, but if anyone needs to access the site, the URL is:
http://www.reedhillbandb.com/
Anyway, here is the css:
body { text-align: center;
margin: 0px auto;
background-color: #493400;
font-family: Georgia, serif;
font-size: large; }
div.header { background-image: url('images/header_bg.jpg');
height: 580px;
width: 100%; }
img.slideshow { border: 8px solid white;
margin-top: -45px; }
div.footer { height: 300px;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #231900;
margin-top: 35px; }
div.menu { width: 1000px;
margin: 5px auto; }
div.menu a { margin: 0px 35px;
text-decoration: none;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif; }
div.menu a:hover { color: #ffe199; }
div.content { width: 716px;
margin: auto;
background-color: #e7d6ac;
padding: 20px 50px; }
div.contentPanels { }
div.leftPanel { width: 275px;
float: left; }
div.rightPanel { text-align: left;
width: 400px;
float: right; }
div.clearFloat { clear: both; }
div.imageGallery img { width: 600px;
border: 5px solid white; }
div.footerMenu { width: 1000px;
margin: 5px auto; }
div.footerMenu a { margin: 0px 5px;
color: white;
font-family: Lucida Sans, Georgia, Arial, Helvetica, sans-serif; }
div.footerMenu a:hover { color: #ffe199; }
Also, here's the html from one of the pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!--
Reed Hill Bed & Breakfast
Website Design by Brad Bathke
Created in 2011
-->
<head>
<title>Reed Hill Bed & Breakfast | Image Gallery</title>
<link rel = "stylesheet" type = "text/css" href = "reedStyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name = "keywords" content = "reed hill, bed and breakfast" />
<meta name = "description" content = "Reed Hill Bed and Breakfast in Omro, Wisconsin" />
<script type = "text/javascript" src = "js/preloadImages.js"></script>
</head>
<body>
<?php include('includes/header.php'); ?>
<div class = "content">
<p>Reed Hill has a lot to offer during your stay. Feel free to browse our gallery below to get an idea of what you have to look forward to during your visit.</p>
<div class = "imageGallery">
<p><img src = "images/1.jpg" alt = "Image 1" /></p>
<p><img src = "images/2.jpg" alt = "Image 2" /></p>
<p><img src = "images/3.jpg" alt = "Image 3" /></p>
<p><img src = "images/4.jpg" alt = "Image 4" /></p>
<p><img src = "images/5.jpg" alt = "Image 5" /></p>
<p><img src = "images/6.jpg" alt = "Image 6" /></p>
</div>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
If it will help, here is the code for the header and footer as well...
Header:
<div class = "header">
<img src = "images/header_logo.jpg" alt = "Reed Hill Logo" /><br />
<img class = "slideshow" id = "slideShow" src = "images/slide_01.jpg" alt = "Image 1" />
<script type = "text/javascript" src = "js/flipImages.js"></script>
<br />
<div class = "menu">
<a href="index.php">Home</a>
<a href="directions.php">Directions</a>
<a href="gallery.php">Gallery</a>
<a href="meetUs.php">Meet Your Hosts</a>
<a href="contact.php">Contact Us</a>
</div>
</div>
Footer:
<div class = "footer">
<p>
<br /><br />
<img src = "images/footer.png" alt = "Reed Hill Omro Wisconsin" />
</p>
<p>© Copyright 2011 Reed Hill Bed and Breakfast - all rights reserved<br />
Website design and development by Brad Bathke</p>
<div class = "footerMenu">
<a href="index.php">Home</a>
<a href="directions.php">Directions</a>
<a href="gallery.php">Gallery</a>
<a href="meetUs.php">Meet Your Hosts</a>
<a href="contact.php">Contact Us</a>
</div>
</div>
Thank you again for any help you can provide.