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:




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


            <!-begin left nav-->

            <div id="leftnav"></div>

            <!-end left nav-->


            <!-begin main content-->

            <div id-"mainContent">


                        <!-main nav-->

                        <div id="ddtopmenubar" class="mattblackmenu">


                                                <li><a href=""
rel="ddsubmenu1" class="new_icon">New</a></li>

                                                <li><a href=""

                                                <li><a href=""
rel="ddsubmenu2" class="help_icon">Help</a></li>



                        <!-end main nav-->



            <!-end main content-->


            <div style="clear: both;"></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?







Jason Byer




List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org

Reply via email to