Hi Jason, It looks like you need to set a width on #mainContent. The tricky part comes in deciding what to set this width as. If you set a width on it of something like 800px (assuming your screen is large enough), and then adjust that width greater and smaller, you should be able to see how it affects the width of the navbar in Firefox.
However, because #leftnav has a width in pixels, you'll either need to fix the width of #mainContent also in pixels (and make a judgement call on how wide that should be), or change the width of both #leftnav and #mainContent to percentages, and then that will work for any width screen size. Also, if you do set a width for #mainContent, that should stop dropping down in Firefox if you remove the float:left; Hope this helps! Rachael . On 28 April 2010 09:08, <wsg@webstandardsgroup.org> wrote: > ********************************************************************* > WEB STANDARDS GROUP MAIL LIST DIGEST > ********************************************************************* > > > From: "Jason Byer" <ja...@jasonbyer.com> > Date: Tue, 27 Apr 2010 18:05:30 -0400 > Subject: IE 6 Nightmares > > Hello, > > > > I've been racking my brain trying to solve a CSS problem and I was hoping > somebody here can point me in the right direction. I'm developing a site > that has to work in all modern browsers and IE 6. Here is the link to a > sample page: > > > > http://www.jasonbyer.com/dev/new/ > > > > The problem that I'm having is that currently the page looks fine in IE 6 > but in Firefox the navigation doesn't extend the entire width of the > screen. > > > > Here is my sample code for the content area: > > > > <!- content--> > > <div> > > <!-begin left nav--> > > <div id="leftnav"></div> > > <!-end left nav--> > > > > <!-begin main content--> > > <div id-"mainContent"> > > > > <!-main nav--> > > <div id="ddtopmenubar" class="mattblackmenu"> > > <ul> > > <li><a href="" > rel="ddsubmenu1" class="new_icon">New</a></li> > > <li><a href="" > class="search_icon">Search</a></li> > > <li><a href="" > rel="ddsubmenu2" class="help_icon">Help</a></li> > > </ul> > > </div> > > <!-end main nav--> > > > > </div> > > <!-end main content--> > > > > <div style="clear: both;"></div> > > > > </div> > > <!-end content--> > > > > Here is the CSS code for the div's > > > > > > #leftnav { > > width: 180px; > > float: left; > > display: inline; > > height: 1%; > > /* reduce the float drop issue in IE */ > > border-right-width: 2px; > > border-right-style: solid; > > border-right-color: #999; > > } > > > > #mainContent { > > background: #FFFfff; > > display: inline; > > float: left; > > } > > > > .mattblackmenu ul{ > > margin: 0; > > padding: 0; > > font: bold 12px Verdana; > > list-style-type: none; > > background: url(../images/nav/mainnav_bg.gif); > > overflow: hidden; > > width: 100%; > > height: 28px; > > background-repeat: repeat-x; > > -webkit-box-shadow: 0px 4px 1px #c0c0c0; > > -moz-box-shadow: 0px 4px 1px #c0c0c0; > > box-shadow: 0px 4px 1px #c0c0c0; > > } > > > > > > One thing that I did notice was that when I removed the float:left from the > #mainContent id then the navigation is stretched correctly in Firefox but > the main content moves below the left nav. Has anyone experienced this > problem before? Or does anyone have any suggestions? > > > > Thanks > > > > > > ______________________________________ > > > > Jason Byer > > http://www.jasonbyer.com > > <mailto:ja...@jasonbyer.com> > > > > > > ************************************************************** > Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ************************************************************** > > > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
