Background of ul not showing

[Lewis]

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.

[Paul O'B]

Hi,

Try adding a height here and see if it makes a
difference.

#neck ul {
height:2.5em;}

(or a width:100% insted of height above)

Paul

[Lewis]

The following works in Internet explorer but not Mozilla Firebird.

#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 :-(

[Paul O'B]

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.

 
<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

[Lewis]

There must be a better way than the above. I'm trying to keep my XHTML lean.

[Paul O'B]

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

[Lewis]

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

    <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

#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;
        }

[Paul O'B]

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/

div.item hr {display: block; clear: left; margin: -0.66em 0; visibility: hidden;}

Hope that's of interest. Paul

[Lewis]

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!