Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div with Background color won't wrap nested ul's

    I have a left side nav within a div that is:

    <div>
    <ul>
    <li></li>
    <li></li>
    <li>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </li>
    </div>
    I can't seem to get the div to match the actual height of the list which give me a background colour problem and the following div's overlap the list.

    The current result is visible here: http://www.pwct.cober.ca/content.html

    Any insight into this seemingly simply layout would be appreciated.

    Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please specify the exact location of these tags?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply.
    Is this what you are requesting?

    <div id="wrap">
    <div id="left-column">
    <div class="bluff">
    <ul>
    <li></li>
    <li></li>
    <li>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of the height here
    Code:
    .bluff li {
    	margin:0;
    	height:25px;
    	}
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    cober (10-23-2007)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have some errors in closing some of you tags.
    Fix validation-errors,
    and then try.
    Edit: Aero beat me, but you should fix the errors.
    Last edited by abduraooft; 10-23-2007 at 04:58 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    cober (10-23-2007)

  • #6
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks to you both, I appreciate the helpful & quick response.

    That has definitely resolved the layout issue in all browsers. The reason I had used the height tag was to reign in IE6. The problem still exists, the line height in IE6 is about double that of Firefox & IE7.

    Any further help would be great.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your stylesheet
    Code:
    /*hide from IE Mac\*/
    * html .bluff li, * html .bluff li a {
    height:1%;
    }
    /*end hide*/
    That will target IE 6 and below for PC.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    .bluff li, .bluff li a {
    height:1%;
    }
    </style>
    <![endif]-->
    but conditional comments would be better IMO.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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