homepage Welcome to WebmasterWorld Guest from 50.16.165.62
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
expanding height
stevelibby




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

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?
Css
*{margin:0px;padding:0px}
#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}
html
<!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">
<html>
<head>
<title>Template</title>

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


<div id="content_inner_left">
<div id="text_top"></div>
<div id="text_nav">
<ul>
<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>
</ul>
</div>
<div id="text_bottom"></div>
</div>


</div>
</body></html>

 

swa66




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

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.

stevelibby




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved