Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

expanding height



9:14 pm on Apr 4, 2011 (gmt 0)

10+ Year Member

I have tried and researched but cant get this to work, i want to put a image border around a ul/li list, why doesnt this work in firefox/chrome yet seems ok ik in ie?
#wrapper { width: 1060px; height: 100% }
#content_inner_left{width:180px; float:left; height: 100%}

/* Text Bar */
#text_top{background-image: url('images/nav_01.jpg'); background-repeat: no-repeat; height:5px}
#text_bottom{background-image: url('images/nav_05.jpg'); background-repeat: no-repeat; height:6px; background-position-y:top}
#text_nav{height:100%; background-image:url('images/nav_03.jpg'); background-repeat:repeat-y}
#text_nav ul{list-style-type:none; }
#text_nav li{ float:left; width:170px; margin-left:5px}
#text_nav ul a{text-decoration: none}
#text_nav ul a:hover{color: #0000FF}
<!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">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="template.css">
<div id="wrapper">

<div id="content_inner_left">
<div id="text_top"></div>
<div id="text_nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">Home Page</a></li>
<li><a href="#">Home Page</a></li>
<li><a href="#">Home Page</a></li>
<li><a href="#">Home Page</a></li>
<div id="text_bottom"></div>



9:29 am on Apr 5, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

why doesnt this work in firefox/chrome yet seems ok ik in ie

IE is broken: do not look at it for guidance.

Height 100% is often misunderstood.
I guess none of the height 100% does anything: remove them: you do not need that for a menu.

Your <li> are floated: the then stop expanding the parent vertically.
Since the <ul> contains nothing else it will collapse to no height.
The text_nav div will also collapse vertically as it has no reference chain leading to an explicitly set height (or to the root), and hence the height will be "auto" (the default). Sinc eit has no inline content: it will collapse.
Since you added a background here, that's obviously not your intend.

There are a number of paths to solve this:
eg: you could not float the <li>, just make them inline instead of blocks.
eg: you could float the <ul> to make it expand around the <li> and move the background there adn then deal with the consequences further on

There are plenty of example menus out there that solve all of it, why not use one of those to start from ?

I'd also try to reduce the number of divs you have.


8:35 am on Apr 7, 2011 (gmt 0)

10+ Year Member

I just added a height tag to <li> and it solved it. Thats had my brain ticking for a couple days and something as simple as that...lol

Featured Threads

Hot Threads This Week

Hot Threads This Month