Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering in Firefox 4 and 5

    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:

    Code:
    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:

    Code:
    <!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:

    Code:
    <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:

    Code:
    <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.
    Last edited by bathkbra000; 09-13-2011 at 09:06 AM. Reason: Problem Resolved

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Use following code to center aligned your main wrapper:

    Code:
    #wrapper {
    
    width:960px;
    margin:0 auto;
    }
    It will make you wrapper center aligned in all browsers


  • Users who have thanked vikram1vicky for this post:

    bathkbra000 (09-13-2011)

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by bathkbra000 View Post
    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. You should read the link I gave and memorize it...lol
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •