SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unordered list display problems- hasLayout-related?

    Hi all, I'm trying to figure out why my lists look odd in IE on windows, and after reading about hasLayout problems, I thought this was the problem. Accordingly, I tried to add widths and borders, but to no avail.

    I have several lists but only two of them are really causing problems. The first is a list to which I've added a background- the first is not indented, or the bullet won't stay inside the colored background even if I move the list down to another part of the page. I thought it was because it was bumping up against the div above it, but I'm not sure what to fix at this point. The second is the list which I've wrapped with a div- I added different background colors for the div and the ul, but even though I added a border to the ul, the bottom of the surrounding div collapses and reappears every once in a while when I scroll up and down.
    Here are some screenshots from AOL and Netscape 8 running in IE emulation mode.

    Here is my code:
    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>Oh let's hope this works</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    <!--
    
    ul, li {
    	margin: 0; padding: 0;
    }
    li {
    	margin-left: 35px;
    	padding-left: 5px;
    }
    
    #wrap {
    	width: 72&#37;;
    	margin: 0 auto;
    	text-align: left;
    	border: 1px solid #A1B6D4;
    	padding: 1% 5% 5%;
    	color: #365676;
    }
    #maincontent {
    	padding: 1px;
    	clear: both;
    	width: 100%;
    }
    
    #benefits {
    	padding: 5px;
    	text-align: left;
    }
    #benefits li {
    	list-style-position: inside;
    	margin: 5px;
    	padding: 5px;
    	background-color: #365676;
    	color: #cf9;
    	width: 25em;
    }
    
    #complicatedlist {
    	background-color: #365676;
    	padding: 10px;
    	margin-bottom: 2em;
    }
    #complicatedlist h3 {
    	color: #cf9;
    }
    #complicatedlist ul {
    	background-color: #ccc;
    	margin: 0;
    	border: 1px solid #365676;
    	padding: 10px;
    	list-style: none;
    }
    
    #complicatedlist li {
    	margin: 0;
    	padding: .25em;
    	line-height: 1.125em;
    	font-size: .85em;
    }
     
    #complicatedlist li.col1 {margin-left: 0;}
     
    #complicatedlist li.col2 {margin-left: 25%;}
     
    #complicatedlist li.col3 {margin-left: 50%;}
     
    #complicatedlist li.col4 {margin-left: 75%;}
     
    #complicatedlist li.topcol {margin-top: -6.5em;}
    
    
    -->
    </style>
    
    </head>
    
    <body>
    	<div id="wrap">
    		<div id="maincontent">
    			<ul id="benefits">
    				<li>MEET SOMEONE</li>
    				<li>GET SOMETHING </li>
    				<li>OBTAIN OTHER THINGS </li>
    				<li>FREE THINGS</li>
    			</ul>
    			<div id="firstsection">
    				<div id="complicatedlist">
    					<h3>The title of this list of things</h3>
    					<ul>
    						<li class="col1">Blah blah </li>
    						<li class="col1">Blah blah</li>
    						<li class="col1">Blah blah blah </li>
    						<li class="col1">Blah blah</li>
    						<li class="col2 topcol">Blah blah blah </li>
    						<li class="col2">Blah</li>
    						<li class="col2">Blah blah</li>
    						<li class="col2">Blah blah</li>
    						<li class="col3 topcol">Blah blahblah blah</li>
    						<li class="col3">Blah blah</li>
    						<li class="col3">Blah</li>
    						<li class="col3">Blah blah</li>
    						<li class="col4 topcol">Blah blah blah </li>
    						<li class="col4">Blah</li>
    						<li class="col4">Blah blah</li>
    						<li class="col4">Blah blah blah </li>
    					</ul>
    		    		</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Attached Images Attached Images
    Last edited by webbydebby; Jan 16, 2008 at 14:25. Reason: Added screenshots, shortened code

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have had this problem with IE. Try replacing this:
    Code CSS:
    ul, li {
      margin:0;
      padding:0;
    }
    With this:
    Code CSS:
    ul, li {
      margin:0;
      padding:0;
      display:inline;
    }
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display: inline throws everything off

    Hi alecrust, unfortunately, display: inline causes all of them to line up on one line, which is not actually what I wanted them to do. I tried adding it to just the ul, but it also makes the list in the more complicated box go all funny in Firefox, Safari and IE 5.2Mac. I tested on a pc just now and it also looked funny.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    width: 100% on the correct elements fixed it

    Well, after reading and re-reading about the hasLayout problem and how to fix it, which is the direction I had started going in, I finally found the correct elements to which to apply the width, thus triggering the hasLayout = true and getting rid of the display problems in IE. Thanks again, alecrust, for your earlier suggestion-even though I wasn't able to use it, I appreciate the effort!


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
  •