www.webdeveloper.com
Results 1 to 10 of 10

Thread: IE6 layout problem with height

  1. #1
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154

    IE6 layout problem with height

    God am I fed up!!! I have a typical layout with a header, left column, and main content area. I had it working perfectly in multiple browsers until I tried IE6.

    The problem is that when the main content area stretches beyond the fold the left column (in IE6) doesn't stretch with it. I've tried everything, I've searched the web and tried a million so called solutions and nothing works. I've tried setting the body to have a height of 100% and then the left div to the same but it only stretches the length of the window and not beyond the fold. I tried programmatically (JavaScript and ASP.NET) accessing the height property of the main div and then assigning it to the left div but no joy. I've moved divs around and nested them within a main div but still no joy. Please help, I'm really considering going back to tables, I never had this kind of headache with tables. So how do I get the height of the left div to stretch with the main content div when the main content goes beyond the fold?

    Thanks

  2. #2
    Join Date
    Aug 2007
    Location
    Los Angeles
    Posts
    17
    Can you provide a sample of the code?

  3. #3
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154
    These are the divs:

    <div id="header">
    <div id="logo"></div>
    <div id="utilities"><a href="contactus.aspx">Contact Us</a> | <a href="faqs.aspx">FAQ's</a> | <a href="privacypolicy.aspx">Privacy Policy</a></div>

    <div id="datethemeselector"></div>
    </div>
    <div id="menu"><asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" StartingNodeOffset="0" />
    <asp:Menu runat="server" ID="mainmenu" SkinID="mainmenuskin" DataSourceID="SiteMapDataSource1"></asp:Menu></div>
    <div id="leftcol">
    <div id="innerleftdiv"> <asp:Image ImageUrl="images/untitled-3.gif" runat="server" ID="promo" /></div>
    <asp:contentplaceholder id="leftcontent" runat="server">
    </asp:contentplaceholder>
    </div>

    <div id="maincol">
    <div id="maininnercol"><p class="breadcrumb"><asp:Label runat="server" id="LocationText" cssclass="bdlabel">You Are Here: </asp:Label> <asp:SiteMapPath ID="SiteMapPath1" runat="server" /></p>

    <asp:contentplaceholder id="maincontent" runat="server">

    </asp:contentplaceholder>
    </div>
    <div id="footer">
    <div id="innerfooter">
    <p>Copyright &copy; stuffcupid.com <asp:Label id="year" runat="server" /></p>
    </div>
    </div>
    </div>

    <div id="rightcol">
    <asp:contentplaceholder id="rightcontent" runat="server">

    </asp:contentplaceholder>
    </div>

    And this is the relevant css:

    #leftcol {position: absolute;
    width: 15%;
    padding-left: 5px;
    top: 20%;
    z-index: 1;
    margin-left: -1%;}

    #innerleftdiv {margin-left: 2px;
    margin-top: 15px;}

    #maincol {position: absolute;
    top: 120px;
    left: 18%;
    width: 67%;
    height: auto;}

    #maininnercol {margin-left: 0%;
    margin-right: 0%;}

    #rightcol {position: absolute;
    right: 0%;
    width: 15%;
    top: 0%;
    margin-right: 0%;
    height: 100%;
    background-color: #6699ff;
    z-index: 1;}

    #footer {position: relative;
    top: 8px;
    padding-top: 8%;
    padding-bottom: 5%;
    height: 10%;
    left: 18%;
    width: 65%;
    margin-left: 0.5%;
    margin-right: 0.5%;}

    #innerfooter {width: 96%;
    Text-Align: center;}

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    A link to the tempory site online would be better - we need to see the generated html, not the asp code.

    I do see a lot of absolute positioning - very difficult to get elements affected by other elements with absolute positioning.

  5. #5
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154
    Unfortunately I don't have it up yet so I can't provide a link. To be honest from what I have been reading it seems that the type of layout I want isn't something CSS is very good at and that CSS is all about workarounds and hacks nowadays. Wasn't this technology suppose to be the answer to all our layout problems? I'm getting the impression it has lost its way. It has been a long time since I have done any CSS and I have to say I don't remember it being so difficult to do a simple layout. Thanks for your help anyway but I think I'll have to change the design to fit CSS rather than CSS fitting my design.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Would this example help ?

  7. #7
    Join Date
    Feb 2006
    Location
    Pennsylvania
    Posts
    150
    I've been having the same trouble. The "Holly Grail" of CSS has turned out to be a holy nightmare. Don't get me wrong, I love the layout and I think it looks great but I want my content to stay set even when the window is reduced.

    With the layouts I've seen recently they look good but only when at full screen at specific resolutions. Reduce the window a little and everything goes nuts. I hate it. Ahhhhhhh!

  8. #8
    Join Date
    Dec 2004
    Location
    The Netherlands
    Posts
    97
    I got the same problem.

    My website (www.bangingsoundsofsilence.nl) is 100% CSS positioning, most of it relative.
    Now it looks great in FireFox and even in IE7, but IE6 screws it up.

    The menu isn't heigh enough, it's just the height of the text (in the content div), so when there's only a small content, half of the menu is shown.

    I tried some fixes (including the "Holy Grail"), but the just don't help me out.

    I'm at the point of making a script that shows an alert when the browser is IE6 or lower, but that's not very user friendly...

    If anyone got a working solution... please let me (and others) know!

    René
    Don't take life to serious, you won't survive it anyway...

  9. #9
    Join Date
    Feb 2006
    Location
    Pennsylvania
    Posts
    150
    See this post.

    I had to do some changing around but everything seems to be ok in Firefox and IE6.

  10. #10
    Join Date
    Dec 2004
    Location
    The Netherlands
    Posts
    97
    Thanks for the tip. The * hack did the work.

    Now I'm just stuck with a stupid scrollbar in IE6, but that should be relatively easy to fix...

    EDIT:
    Height: 100% is giving me the scrollbar, height: 99% makes the scrollbar go away

    René
    Last edited by renevanh; 09-20-2007 at 03:43 PM.
    Don't take life to serious, you won't survive it anyway...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles