SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone help me make this happen in IE6?

    Firstly, hello. Secondly...

    Okay I know this is the question of the decade but I figure it needs to be asked...

    Imagine this layout...

    Code:
    <container>
       <header><endheader>
       <midarea>
           <100&#37; left navigation bar>
           <variable width content> 
        <endmidarea>
         <footer><endfooter>
    <endcontainer>
    this is what I have tried to create on multiple occasions, and the solution is always sloppy and ruins my HTML. Floats with a clear all div and a funky background image works but its just not proper, and removing all my containing divs and positioning stuff all on top of each other sort of works but thats messy as heck.

    This is my latest attempt and I was wondering if anyone could help me make it work in IE6...it works in FF just fine and its elegant and the code represents document flow, which is what I want.

    http://chris.cert-mhcrm.com/

    Here is the CSS

    Code CSS:
    .body{
    margin:0;
    padding:0;
    background:#333333;
    color:#333333;
    font:11px Arial, Helvetica, sans-serif;
    }
    a{
    color:#FF6600;
    text-decoration:none;
    }
    a:hover{
    color:#ececec;
    text-decoration:underline;
    }
    #container{
    margin:20px auto 0 auto;
    position:relative;
    padding:0;
    width:900px;
    background:#ECECEC;
    border:1px solid #ececec;
    height:100%;
    min-height:100%;
    }
    #header{
    margin:0;
    padding:0 0 0 20px;
    background:#FFF;
    z-index:101;
    position:relative;
    }
    #header h1{
    font-size:24px;
    margin:0;
    padding:20px 0 5px 20px;
    }
    #header h2{
    margin:0;
    padding:3px;
    color:#FF6600;
    text-align:right;
    }
     
    #mainnav{
    margin:0;
    padding:0;
    height:30px;
    background:#333333;
    color:#FFFFFF;
    font-weight:bold;
    font-size:14px;
    border:solid #FF6600;
    border-width:2px 0 2px 0;
    position:relative;
    z-index:100;
    }
    #mainnav ul{
    margin:0;
    padding:0;
    position:absolute;
    top:0px;
    left:0px;
    display:inline;
    }
    #mainnav ul li{
    display:inline;}
     
    #mainnav ul li a{
    float:left;
    height:20px;
    padding:8px 15px 0 5px;
    color:#FFFFFF;
    border-right:1px solid #FFF;}
     
    #mainnav ul li a:hover{
    color:#FF6600;
    }
    #mainnav ul .first_child a {
    	border-left:1px solid #FFFFFF
    }
    #mainnav ul .last_child a {
    	border-right:none
    }
     
    #aops{
    	margin:0;
    	padding:0;
    	background:#999999;
    	color:#000;
    	height:100%;
    	min-height:100%;
    	position:absolute;
    	left:0px;
    	top:0px;
    	width: 230px;
    	z-index:99;
    }
    #aops ul{
    margin:150px 0 0 0;
    padding:0;
    font-size:14px;
    font-weight:bold;
    list-style:none;
    border-bottom:1px solid white;
    }
    #aops ul li{
    margin:0;
    border:solid #FFFFFF;
    border-width:0;}
    #aops ul li a{
    color:#000066;
    display:block;
    padding:5px 0 5px 15px;
    border:solid white;
    border-width:1px 0 0 0;}
    #aops ul li a:hover{
    color:#999;
    background:#FFF;
    }
    /*#aops ul .last_child a {
    	border-bottom:1px solid white;
    }*/
     
    #content{
    padding:5px;
    position:relative;
    left:230px;
    width:640px;
    background:#ececec;
    z-index:102;
    }

    Here is the HTML

    HTML Code:
    <body class="body"><a name="top" id="top"></a>
    	
        
    <div id="container">
      <div id="main">
    
        <div id="header"><h1>Not a Real Lawyer.com</h1><h2>Litigating the Stuff That MATTERS</h2></div>
    <div id="mainnav"><ul>
      
        <li class="current_list first_child"><a class="current_link" href="/"><span>Home</span></a>
      
        <li class="first_child"><a href="/firm-overview/"><span>Firm Overview</span></a></li>
        <li><a href="/attorneys/"><span>Attorneys</span></a></li>
        <li><a href="/practice-areas/"><span>Practice Areas</span></a></li>
    
        <li><a href="/news/"><span>News</span></a></li>
        <li><a href="/links/"><span>Links</span></a></li>
        <li><a href="/verdicts-settlements/"><span>Verdicts and Settlements</span></a></li>
        <li><a href="/contact/"><span>Contact</span></a></li>
        <li class="last_child"><a href="/directions/"><span>Directions</span></a></li>
      
    </li>
    
      
    </ul></div>
    <div id="aops"><ul>
      
        <li class="first_child"><a href="/practice-areas/diner-bill/"><span>Diner Bill Disputes</span></a></li>
        <li><a href="/practice-areas/shotgun-blitz/"><span>Shotgun Vs. Blitz Issues</span></a></li>
        <li><a href="/practice-areas/rps-med/"><span>Rock, Paper Scissors Mediations</span></a></li>
        <li class="last_child"><a href="/practice-areas/dishes/"><span>Dirty Dish Litigation</span></a></li>
      
    </ul></div>
    
        <div id="content">
    	      <div>
    <div class="RichText"><h3>Homepage</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam  tincidunt. Quisque a orci sed sapien suscipit condimentum. Sed aliquam  augue ac diam. Praesent sit amet nunc at ipsum elementum varius. Morbi  elit. Aliquam euismod, justo a lacinia mattis, tellus lacus vestibulum  dolor, id placerat lectus elit vel dui. Pellentesque habitant morbi  tristique senectus et netus et malesuada fames ac turpis egestas.  Aenean risus lacus, rhoncus tempus, feugiat a, adipiscing ac, odio. In  hac habitasse platea dictumst. Praesent sagittis urna nec est. Praesent  at tortor eget erat commodo commodo. Etiam mattis sollicitudin elit.  Pellentesque facilisis erat a enim. Duis lectus dui, tincidunt ornare,  mattis id, commodo a, nulla. Sed velit sem, condimentum a, lacinia in,  dignissim ac, velit. Proin viverra felis sit amet nunc. Quisque  adipiscing odio a libero commodo varius. Pellentesque ut nisl id tellus  placerat tempus. Etiam urna ante, vulputate eu, imperdiet sed, accumsan  et, turpis.</p>
    <p>Nunc id nibh quis justo convallis tristique. Donec neque arcu,  scelerisque laoreet, porttitor id, porttitor ut, libero. Aenean commodo  lobortis nulla. Duis pharetra sem. Etiam a enim. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Proin sed arcu at lorem lobortis vestibulum. Integer euismod ornare  risus. Cras et leo. Maecenas bibendum porta est. Vestibulum vel ligula  ut nibh ornare aliquam. Etiam adipiscing ante eget ante. Sed varius  vestibulum felis.</p>
    <p>Integer condimentum lobortis lacus. Praesent consectetuer ligula  consequat purus. Phasellus ullamcorper lacinia odio. Ut quis arcu.  Vivamus neque tortor, laoreet quis, dapibus ut, cursus ac, mi. Nulla at  augue quis arcu porttitor aliquam. Vestibulum cursus tortor et mi. Nunc  odio justo, sollicitudin sed, viverra lacinia, sodales at, mi. Aenean  rutrum, metus quis mollis rhoncus, ipsum eros viverra nisi, sit amet  venenatis tellus libero quis risus. Sed metus lectus, consequat at,  hendrerit quis, rhoncus non, ipsum. Donec lorem libero, dignissim ac,  pretium eget, lacinia quis, lorem.</p></div>
    </div>
             </div>
      </div>
    
    </div>
    <script language="JavaScript" type="text/javascript" src="/scripts/webtrends.js"></script>
    <noscript>
    <img src="https://trendssdc.martindale.com/&lt;!--replace--&gt;/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.0.2" alt="" name="DCSIMG" width="1" height="1" border="0" id="DCSIMG" />
    </noscript>
    
    	<div class="x_empty" id="s9_notifications"><div id="ix_message_view_container"><div class="s9_notifications"></div>
    <div class="s9_notification_controls"><button onclick="site9.Notifications.clear()">OK</button></div>
    </div></div>
    	</body>
    Last edited by Dan Schulz; Apr 3, 2008 at 18:10. Reason: Added Code Tags

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    min-height: 100&#37; doesn't work in IE6 and below. See the faq on 100% height: http://www.sitepoint.com/forums/show...41&postcount=8. But the solution will give 100% height to the whole viewport. You could also use faux columns: http://www.alistapart.com/articles/fauxcolumns/ for more info.


Bookmarks

Posting Permissions

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