My Web Site Breaks Up In Firefox

[biker]

I designed my Web site with Dreamweaver CS3. It is W3C HTML and CSS complient. It looks great in IE, Opera, and Safari browsers but breaks up in Firefox. Any ideas on what I can do to fix this? My site is http://www.bicycletouringtales.com/ Thanks. KathyTHE CSS:

   @charset "tf-8";body  {	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */	padding: 0;	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */	color: #000000;	font-family: Garamond, sans-serif;	font-size: 101%; 	font-style: normal;	background-color: #6699CC;}.twoColLiqLtHdr #container {	width: 90%;  /* this will create a container 90% of the browser width */	background: #FFFFFF;	margin: 0 auto;	border: 1px solid #6699CC;	text-align: left; /* this overrides the text-align: center on the body element. */	} .twoColLiqLtHdr #header {	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is      used in the #header instead of text, you may want to remove the padding. */	background-color: #6699CC;	border-bottom-width: thin;	border-bottom-style: solid;	border-bottom-color: #6699CC;} .twoColLiqLtHdr #header h1 {	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */}/* Tips for sidebar1:1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.*/.twoColLiqLtHdr #sidebar1 {	float: left;	width: 8em;	padding: 0;	margin: 1em;	display: inline;	font-family: Century Gothic;	background-color: #FFFFFF;	}.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {	background-color: #FFFFFF;	margin-left: 10px;	margin-right: 10px;        }	/* Tips for mainContent:1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.*/.twoColLiqLtHdr #mainContent {	font-family: Garamond, sans-serif;	font-size: 101%;	margin:.5em .5em .5em 10em;	padding-right: 40px;	padding-left: 50px;	border-left-width: thin;	border-left-style: solid; 	border-left-color: #DFEDFF;	background-color: #DFEDFF;	}		.twoColLiqLtHdr #footer {	font-size: 0.8em;	font-family: Century Gothic;	margin: 0;	background-color: #6699CC;	border-top-width: thin;	border-top-style: solid;	border-top-color: #6699CC;	} .twoColLiqLtHdr #footer p {	margin: 0;	padding: 10px 0;    }/* Miscellaneous classes for reuse */.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */	float: right;	margin-left: 8px;	width: 0em;}.fltlft { /* this class can be used to float an element left in your page */	float: left;	margin-right: 8px;	width: 0em;}.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */	clear:both;    height:0;    font-size: 1px;    line-height: 0px;}a:hover {	color: #0000FF;	text-decoration: underline;}a:active {	color: #FF0000;	text-decoration: underline;}a:visited {	color: #AA00AA;}a:link  {	color: #0000ff;	text-decoration: underline;}		THE CODE:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="Bicycle touring across America, bicycle touring, bike touring, long distance bicycle tours, cyclo-touring, fully loaded touring, touring self-contained, Kathryn Krull, 'How Big Are The Pancakes?', cycling, cross-country cycling, cross-country bicycle rides, bicycle gear, bike rides across America, bike rides, bicycle travelogs, bicycle journals, bicycling, www.bicycletouringtales.com." /><meta name="Description" content="Embark on a bicycle touring adventure. This website prepares you with gear lists, pictures, touring links and tips. How Big Are The Pancakes?, a book about my cross-country bike trip, provides practical information." /><title>Kathy's Bicycle Touring Pages</title><link href="CS3Pancakes.css" rel="stylesheet" type="text/css" /><!--[if IE]><style type="text/css">/* place css fixes for all versions of IE in this conditional comment */.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */</style><![endif]--><style type="text/css">.style1 {	color: #FF0055;    font-weight: bold;    }    .style2 {	color: #D400FF;	font-style: italic;    font-size: 101%;}.style3 {	color: #2A1FFF;	font-family: "Comic Sans MS";     }</style></head><body class="twoColLiqLtHdr"><div id="container"><div id="header"><h1 align="center"><img src="assets/14x3andhalfkrullbannerflattened.jpg" width="1007" height="252" alt="cycling banner" /></h1>  </div>  <div id="sidebar1">    <h4 class="style2">Banner by Corrie Krull</h4>        <h4> </h4>    <h4> </h4>    <h4><a href="index.html">Home</a></h4>    <h4><a href="book.html">Book</a></h4>    <h4><a href="photos.html">Photos</a></h4>    <h4><a href="gear.html">Gear</a></h4>    <h4><a href="information.html">Information</a></h4>    <h4><a href="tips.html">Tips</a></h4>    <h4><a href="links.html">Links</a></h4>    <h4><a href="contact.html">Contact</a></h4>    <p> </p>    <p> <a href="http://www.amazon.com/dp/193403536X/"><img src="assets/1.5tiffscancover16feb08.jpg" alt="Cover of the book, How Big Are The Pancakes" width="110" height="164" /></a></p>    <p class="style1">   <strong>Buy it now !</strong></p>  </div><!-- end #sidebar1 --><div id="mainContent">   <h1 align="left" class="style3">Bicycle Touring Across America ! </h1>   <h2 align="justify">  </h2>    <h2 align="justify">Thanks for dropping in ! </h2>    <p>  I've been involved in  long distance bicycle touring since 1994. I've cycled the Santa Fe Trail, biked throughout New England, spun along the Natchez Trace, pedaled the Lewis and Clark Trail and cycled the length of the Mississippi River.</p>    <p>My most memorable trip was in the summer of 2000 when  I cycled across America with my friends Cindy and Mary Anne.     For 59 days we pedaled 3,150 miles through 10 states, from California to Virginia. We  rode self-contained on fully loaded touring bikes, packed with all of our gear<strong>. </strong> We discovered small town America, a diverse beautiful country and ourselves.</p>    <p>Join us as we cycle along the back roads of America by going to my <a href="book.html">book page</a>. There you will find excerpts from, "How Big Are The Pancakes?" a book I wrote about our cross-country adventure.</p>    <p>Check out my <a href="photos.html">pictures</a> and <a href="gear.html">gear</a> list. I also have <a href="information.html">touring information,</a> <a href="tips.html">tips</a> and <a href="links.html">links</a> that will help you plan your own trip. </p>    <p>Yes, one way or another, you too can embark on a long distance bicycle ride.</p>    <p> Tailwinds,</p>    <p>Kathy</p>    <p> </p>    <p align="center"> </p>    <p align="center"><img src="assets/Newpancakes222.jpg" alt="Kathy at the Missouri state sign" width="376" height="329" /></p>    <p align="center"> </p>    <p align="center"> </p>    </div>  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->  <br class="clearfloat" />  <div id="footer">    <p align="center"><a href="index.html">Home</a> | <a href="book.html">Book</a> | <a href="photos.html">Photos</a> | <a href="gear.html">Gear</a> |<a href="information.html">Information</a> | <a href="tips.html">Tips</a> | <a href="links.html">Links</a> | <a href="contact.html">Contact</a></p>    <p align="center">Website copyright ©2009 by Kathryn Krull.  Recently updated <!-- #BeginDate format:Am1 -->July 24, 2009<!-- #EndDate -->. Website URL: www.bicycletouringtales.com <br />   </p>  <!-- end #footer --></div>    <!-- end #container --></div></body></html>

)

[thescientist]

it appears in IE7/8 that your header is a little off. It expands to the right and seems a little off-centered compared to the body of your page and this causes horizontal scrollbars. for me anyway.

[biker]

it appears in IE7/8 that your header is a little off. It expands to the right and seems a little off-centered compared to the body of your page and this causes horizontal scrollbars. for me anyway.

Would the header position have anything to do with my pages breaking up in Firefox?

[thescientist]

i guess it depends. If I had my laptop I could see it in FF, but I'm at work so I can't. But if that is not the behavior you desire, then it is certainly possible that something about the code, which is causing the header to "break", could be effecting the rest of the page as well. I wish I could help you more right now. :)quick thoughts: looking through the IE8 developer toolbar, you're banner div is one size, but the picture is breaking out of it, causing the horizontal scrollbar. Maybe try resizing your pic to the div, or try coding your page to a strict doctype.

[Ingolme]

Because other browsers are ignoring your @charset declaration.This is wrong:

@charset "tf-8";

You should change that to

@charset "utf-8";

Firefox is the only browser that paid attention to the @charset rule, apparently.

[biker]

Because other browsers are ignoring your @charset declaration.This is wrong:

@charset "tf-8";

You should change that to

@charset "utf-8";

Firefox is the only browser that paid attention to the @charset rule, apparently.

Ingolme,Thanks alot, the site works great in Firefox now! You made my day! Kathy