SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Background of ul not showing

    http://www.mymobility.us/new.htm (reflects changes from posts)

    The horizontally positioned list at the top of the above page is supposed to have a blue background 760 pixels wide. Why won't it show through?

    I have spent two days trying to figure this one out. Please help!

    Thanks.
    Last edited by Lewis; Nov 28, 2003 at 16:19.
    -Lewis

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding a height here and see if it makes a
    difference.
    Code:
    #neck ul {
    height:2.5em;}
    (or a width:100% insted of height above)

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following works in Internet explorer but not Mozilla Firebird.
    Code:
    #neck ul {
    	margin: 0 0 15px 0;
    	padding: 0;
    	font-size: .9em;
       	text-transform:lowercase;
    	width: 760px;
      	background: #00f;
    	}
    As I would like the menu to be able to be resize, declaring a height causes other problems. I see this all over the Internet. What am I doing wrong? It has to be something simple :-(
    -Lewis

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you don't want to use height then you need to give mozilla/firebird something to get hold of to make the background extend.

    Add the bold part below exactly in the place specified.
    Code:
     
    <li id="nav-about"><a href="/about/">About SAL</a></li>
     <li id="nav-contact">
    <a href="/contact/">Contact</a><em>&nbsp;</em>
    </li>
    <br style="clear:both" />
    </ul>
    </div>
    That should make the background extend now.

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There must be a better way than the above. I'm trying to keep my XHTML lean.
    -Lewis

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you'll find that the method I suggest is the preferred and accepted (and only?) way to achieve this for mozilla/firebird browsers without using a height. It's exactly what the property clear was designed for.

    You are using floats in your list and a float is removed from the flow therefore mozilla is correct in interpreting the element as having no content therefore the background will not extend. The clear property is used to clear the float so that following content can be accomodated and the element expanded to contain it.

    Alternatively redesign your inline lists without floats and then the background will automatically surround content (as long as you don't place it absolutely etc).

    I think you can be too lean sometimes .

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you very much! You led me to understand what Bowman did on Adaptive Path (http://www.adaptivepath.com/). Below is what I did (same principle as you had discussed). I just feel below is a little bit cleaner and structurally looks better in the markup.

    XHTML
    Code:
        <div id="neck"> 
          <h4><strong><span>SAL Sections:</span></strong></h4>
          <ul>
            <li id="nav-home"><a href="/">Home</a></li>
            <li id="nav-programs"><strong>Programs</strong></li>
            <li id="nav-events"><a href="/events/">Events</a></li>
            <li id="nav-news"><a href="/news/">News</a></li>
            <li id="nav-about"><a href="/about/">About SAL</a></li>
            <li id="nav-contact"><a href="/contact/">Contact</a><em>&nbsp;</em></li>
          </ul>
        </div>
    CSS
    Code:
    #neck ul {
    	width: 760px;
    	margin: 0 0 15px 0;
    	padding: 0;
    	font-size: .9em;
    	line-height: normal;
       	text-transform:lowercase;
      	background: #00f;
    	}
    
    #neck ul li {
    	display: inline;
    	margin: 0; 
    	padding: 0;
      	}
    	
    #neck ul a, #neck ul strong, #neck ul em {
    	float: left;
            display:block;
            white-space:nowrap;
    	padding:8px 6px 2px;
    	text-decoration: none;
    	color: #fff;
      	height:1.5em;
      	} 
    	  
    #neck ul strong, #neck ul a:hover {
    	border-top: 4px solid #00f;
    	padding-top: 4px;
    	background: #fff;
    	color: #000;	
    	}
    
    #neck ul a:hover {
    	border-top: 4px solid #00f;
    	padding-top: 4px;
    	background: #fff;
    	color: #f00;	
    	}
    
    #neck ul em {
            float:none;
            display:block;
            }
    -Lewis

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you got is sorted

    I'm not quite sure that I agree that having a nbsp and an em is better than just having a break. After all semantically you are inserting a line break after the float whereas you are not semantically emphasising anything. (just my opinion anyway )

    If you want to try another way you could use Eric Meyer's idea of using the <hr> instead :
    http://www.complexspiral.com/publica...aining-floats/
    Code:
    div.item hr {display: block; clear: left; margin: -0.66em 0; visibility: hidden;}
    Hope that's of interest. Paul

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with you. However, the above causes the background not to extend fully vertically the full width.

    Off to my class reunion but I'm going to play with the idea (<hr />) later when time permits.

    Thank You!
    -Lewis


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
  •