SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Internet Consumist Kayn's Avatar
    Join Date
    Feb 2001
    Location
    Missouri
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal div not stretching 100% in IE6

    Subject pretty much sums it up. It stretches perfectly in every other browser, of course. :P

    Note: PLEASE IGNORE THE MENU ON THE LEFT! I just fixed that and it still doesn't stretch horizontally.



    It NEEDS to look like this:



    Code:
    /* 
    main layout
    */
    
    head+body #container:after{
        content: ".";
        display: block;
        height:0;
        clear: both;
        visibility: hidden;
    }
    
    body { 
        margin: 0px auto;/* no margins body */
        padding: 0px;/* no padding body */
        background-image: url(images/bgrepeat.jpg);
        background-repeat: repeat-x;
        background-color: #00005F;
        font-family: Arial, Helvetica; color: #000000; font-size : 13px;
        text-align: center;
    }
    
    
    #container {
        width: 70%;
        min-width: 760px;
        text-align: center;
        background-color: #ececec;
        margin: 0 auto;
        padding: 0 auto;
        text-align: left;
        border: 1px solid #000000;
        
    }
    
    #top {
        margin: 0px;
        padding: 0px;
        text-align: left;
        background-image: url(images/top_bg.jpg);
        background-repeat: repeat-x;
        background-color: #ececec;
        
    }
    
    #min_width {
        width: 760px;
        height: 1px;
        margin: 0px;
        padding: 0px;
        background-color: #ececec;
    }
    
    #middle {
        padding-top: 0px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        text-align: left;
    }
    
    #bottom {
        text-align: center;
        margin: 0px;
        padding: 0px;
        clear: both;
        width: 100%;
    }
    
    #top_menu {
        height: 35px;
        width: 100%;
        min-width: 760px;
        margin: 0px;
        padding-top: 8px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        background-image: url(images/menu_bg.gif);
        background-repeat: repeat-x;
        background-color: #ececec;
        text-align: center;
        white-space: nowrap;
        
    }
    
    #top_menu img {
        margin-right: 5px;
        margin-left: 5px;
    }
    
    #water_blurb {
        width: 224px;
        height: 283px;
        text-align: center;
        float: right;
        background-image: url(images/circle_stuff.jpg);
        background-repeat: no-repeat;
        margin-left: 10px;
        margin-right: -20px;
        margin-bottom: 5px;
    }
    
    #left_col {
        width: 48%;
        margin-left: 0px;
        margin-right: 0%;
        padding-right: 1%;
        float: left;
        
        
    }
    
    #right_col {
        width: 48%;
        margin-left: 0%;
        padding-left: 1%;
        margin-right: 0px;
        float: left;
        border-left: 1px #cccccc solid;
    }
    
    #product_col {
        width: 75%;
        margin-left: 0%;
        padding-left: 1%;
        margin-right: 0px;
        float: left;
        border-left: 1px #cccccc solid;
    }
    
    
    #left_nav {
        width: 175px;
        text-align: left;
        float: left;
        border-top: 1px solid #000000;
        padding: 0px;
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    
    #left_nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #left_nav  li {
        border-bottom: 1px solid #000000;
    }
    
    #left_nav li a:link, #left_nav li a:visited {
        font-size: 11px;
        display: block;
        padding: 0.4em 0 0.4em 0.5em;
        border-left: 12px solid #000066;
        border-right: 1px solid #000066;
        background-image: url(images/grey_h1_gradient.jpg);
        background-repeat: repeat-x;
        background-color: #cccccc;
        color: #000000;
        text-decoration: none;
    }
    
    /*
    #left_nav li a:hover {
        background-color: #711515;
        color: #FFFFFF;
    }
    */
    
    #left_nav ul ul {
        margin-left: 12px;
    }
    #left_nav ul ul li {
        border-bottom: 1px solid #000000;
        
        margin:0;
    }
    #left_nav ul ul a:link, #left_nav ul ul a:visited {
        color: #711515;
        background-image: url(images/blue_h1_gradient.jpg);
        background-repeat: repeat-x;
        background-color: #cccccc;
    }
    HTML:

    HTML 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>
        <title>Water Softener, Filtration and Reverse Osmosis Installation in Phoenix, Arizona  American Home Water - About Us</title>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <meta name="keywords" content="american, home, water, water softener, reverse, osmosis, water systems, salt free, whole house, water conditioner, installation, install, free quote, about us" />
    
        <meta name="description" content="Tom Atkinson and Tom Knapp are the owners of American Home Water.  They started the company in 1985 and since  then they have installed over forty thousand water systems in the Phoenix Metro area." />
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        
        <script src="AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body> 
    
        <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
        <script type="text/javascript">
            _uacct = "UA-1514367-1";
            urchinTracker();
        </script> 
        
    
    <div id="container">
    
    <div id="top">
        <object id="banner" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 height=252 width=760 align=middle classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
            <param name="_cx" value="20108" />
            <param name="_cy" value="6668" />
            <param name="flashvars" value="" />
            <param name="movie" value="banner.swf" />
            <param name="src" value="banner.swf" />
            <param name="wmode" value="window" />
            <param name="play" value="-1" />
            <param name="loop" value="-1" />
            <param name="quality" value="high" />
            <param name="salign" value="" />
            <param name="menu" value="-1" />
            <param name="base" value="" />
            <param name="allowscriptaccess" value="samedomain" />
            <param name="scale" value="showall" />
            <param name="devicefont" value="0" />
            <param name="embedmovie" value="0" />
            <param name="bgcolor" value="ffffff" />
            <param name="swremote" value="" />
            <param name="moviedata" value="" />
            <param name="seamlesstabbing" value="1" />
            <param name="profile" value="0" />
            <param name="profileaddress" value="" />
            <param name="profileport" value="0" />
            <param name="allownetworking" value="all" />
            <param name="allowfullscreen" value="false" />
            <embed src="banner.swf" quality="high" bgcolor="#ffffff" name="banner" allowscriptaccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="252" width="760" />
        </object>
        
        <!-- min width -->
        <div id="min_width"></div>
    </div> <!-- end top -->
    
    <div id="middle">
    <div id="left_nav">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About Us</a></li>
                    <ul>
                <li><a href="tom_atkinson.php">Tom Atkinson</a></li>
                <li><a href="tom_knapp.php">Tom Knapp</a></li>
            </ul>
                    <li><a href="contact.php">Contact Us</a></li>
            <li><a href="products.php">Products</a></li>
                    <li><a href="benefits.php">Benefits</a></li>
                    <li><a href="prices.php">Prices</a></li>
        </ul>
    </div>
    
    <h1>About American Home Water</h1>
    
    <p><a href="tom_atkinson.php">Tom Atkinson</a> and <a href="tom_knapp.php">Tom Knapp</a>, two childhood friends since the second grade, are the owners of <b>American Home Water</b>. They started the company in <i>1985</i> and since then they have <b><i>installed over forty thousand water systems in the Phoenix Metro area</i></b>. <a href="tom_knapp.php">Tom Knapp</a> is a graduate of the <a href="http://www.arizona.edu/">University of Arizona</a> where he earned an MBA. <a href="tom_atkinson.php">Tom Atkinson</a> has two undergraduate degrees one in Electrical Engineering and the other in Industrial Engineering from <a href="http://www.corning-cc.edu/">Corning College in Corning, New York</a>.</p>
    <p>In their years in business they have won several Awards for consumer care presented to them by the <a href="http://www.electricleagueofarizona.org/">Electric League of Arizona</a>. These Awards were the result of surveys submitted by customers to the Electric League. They were presented with the awards for their work in both <b>Phoenix</b> and <b>Tucson</b>. They have earned a strong reputation for <i>quality workmanship and customer care during their more than twenty years in business</i>.</p>
    
    <p><a href="tom_atkinson.php">Tom Atkinson</a> has a wife of thirty-one years, Jody, and two children Matthew and Diane. <a href="tom_knapp.php">Tom Knapp</a> also has a wife of thirty-one years, Pat. They have three daughters, Kelly the oldest, and twins Amy and Kristy.</p>
    
    
    </div> <!-- end middle -->
    <div id="bottom">
    
        <div id="bottom_menu">
            <a href="index.php">Home</a> - 
            <a href="about.php">About Us</a> - 
            <a href="contact.php">Contact Us</a> - 
            <a href="products.php">Products</a> - 
            <a href="benefits.php">Benefits</a> - 
            <a href="prices.php">Prices</a>
        </div>
    
        <p>Designed and hosted by <a href="http://www.origin3.net">Origin 3 Web Design</a>. Optimized by <a href="http://iticonsulting.net">ITI Consulting.</a></p>
    
    </div> <!-- end bottom -->
        
        
    </div> <!-- end container-->
    </body>
    </html>
    Why is this? Pretty annoying stuff. Thanks!

    - Rob
    Sing in a band called Psychostick, Alfredo Afro.

  2. #2
    Internet Consumist Kayn's Avatar
    Join Date
    Feb 2001
    Location
    Missouri
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump...?
    Sing in a band called Psychostick, Alfredo Afro.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the </li> before the nested unordered list and that after the list so it encloses it, like so:

    HTML Code:
    <ul>
    	<li>List Item</li>
    	<li>
    		List item
    		<ul>
    			<li>List Item</li>
    			<li>List Item</li>
    			<li>List Item</li>
    		</ul>
    	</li>
    	<li>List Item</li>
    	<li>List Item</li>
    </ul>
    Then apply a left margin to the nested list.

  4. #4
    Internet Consumist Kayn's Avatar
    Join Date
    Feb 2001
    Location
    Missouri
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan. Fixed the side menu already, but the menu div at the bottom still does not stretch 100&#37;.

    I even removed the left menu entirely and the bottom menu still does not stretch across.
    Sing in a band called Psychostick, Alfredo Afro.

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man, this is one of those frustrating IE6 bugs... I think the issue has to do with the respective widths of your #container, flash banner, and #min_width.

    Since you declare that,

    Code:
    #container { width: 70%; ...
    while both the flash banner and #min_width have a width of 760px, that means when the browser is set at a size where 70% is less then 760px, then IE6 will not expand the divs to fill the space.

    I think the easiest solution might to be remove the #container's width and instead apply a left and right padding to the body.

    Good luck

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to take a stab in the dark here, but try adding float: left; and width: 100&#37; to #middle

  7. #7
    Internet Consumist Kayn's Avatar
    Join Date
    Feb 2001
    Location
    Missouri
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frustrating is right.

    I tried the padding thing and IE flipped out. Haha.

    I'm gonna use a fixed width for now 'till I figure this out. Bleh!
    Sing in a band called Psychostick, Alfredo Afro.

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh? That's strange

    I tried applying it to your css and it seemed to work:

    Code:
    body { 
        margin: 0px auto;/* no margins body */
        padding: 0px 100px;/* no padding body */
        background-image: url(images/bgrepeat.jpg);
        background-repeat: repeat-x;
        background-color: #00005F;
        font-family: Arial, Helvetica; color: #000000; font-size : 13px;
        text-align: center;
    }
    
    #container { 
        min-width: 760px;
        text-align: center;
        background-color: #ececec;
        margin: 0 auto;
        padding: 0 auto;
        text-align: left;
        border: 1px solid #000000; 
    }
    Those were the 2 that I changed. Hope it works!


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
  •