...

View Full Version : Resolved Centering in Firefox 4 and 5



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 &amp; 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.

bathkbra000
09-13-2011, 04:52 AM
Just to update anyone interested, after much more tinkering I think the problem actually lies in the width of the header image. I haven't resolved the issue yet, but I don't think the problem is with the CSS anymore.

vikram1vicky
09-13-2011, 08:14 AM
Use following code to center aligned your main wrapper:


#wrapper {

width:960px;
margin:0 auto;
}

It will make you wrapper center aligned in all browsers

:)

bathkbra000
09-13-2011, 09:04 AM
Thanks, vikram1vicky.

I figured out what to do by the time I got to your post, but the solution was similar to what you suggested.

Basically, I didn't have a uniform width for all the <div>s due to images exceeding the width of them, so they didn't align correctly in lower resolution windows. I made sure none of the images were wider than their parent <div>s, and set all the <div>s to have a uniform width (basically what vikram1vicky suggested by using a wrapper element).

So, it works now, and thanks again for your input, vikram1vicky!

teedoff
09-13-2011, 01:49 PM
Thanks, vikram1vicky.

I figured out what to do by the time I got to your post, but the solution was similar to what you suggested.

Basically, I didn't have a uniform width for all the <div>s due to images exceeding the width of them, so they didn't align correctly in lower resolution windows. I made sure none of the images were wider than their parent <div>s, and set all the <div>s to have a uniform width (basically what vikram1vicky suggested by using a wrapper element).

So, it works now, and thanks again for your input, vikram1vicky!

Well, if you're new to webdesign, then you've learned an important concept! The Box Model (http://css-tricks.com/2841-the-css-box-model/). You should read the link I gave and memorize it...lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum