appi2
msg:3682841 | 12:33 am on Jun 25, 2008 (gmt 0) |
First, erm, if your using tabular data then use a table. Maybe your not using tabular data and your example just happens to look like a table. You can use
display:table;
display:table-row;
display:table-cell; Then you get the auto height problem solved.
eg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#divtable {
display:table;
width: 600px;
background: yellow;
}
.divrow {display:table-row;}
.divrow div {
display:table-cell;
width: 100px;
} #selected {
background: orange;
}
</style>
</head> <body>
<div id="divtable">
<div class="divrow">
<div><a href="#">Test Test Test Test Test Test Test Test Test Test</a></div>
<div id="selected"><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
</div>
</div>
</body>
</html>
|
|
And it works in firefox opera and safari
Only problem is, IE doesn't support display table. I did a (silly(but works) work around) post on using display table in a 3 coll layout [webmasterworld.com], everybody loved it, they were just to shy to say so ;) ps warning about that three coll example, Firefox3 needs a fix. it should have display:table-row; applied to an outer div that surrounds the three colums.
|
music_man
msg:3682849 | 1:14 am on Jun 25, 2008 (gmt 0) |
Hi, Thanks for your reply. Yeah it's to be a top navigation bar. I wonder if there is a hack for ie.
|
appi2
msg:3682861 | 1:57 am on Jun 25, 2008 (gmt 0) |
Gah nobody likes my table method ;) ok how about
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css"> #nav {
background: yellow;
width: 640px;
overflow: hidden;
} #nav div {
float:left;
display:block;
width: 100px;
padding-bottom: 32768px;
margin-bottom: -32768px; } #selected {
background: orange;
}
</style>
</head> <body>
<div id="nav">
<div><a href="#">Test Test Test Test Test Test Test Test Test Test</a></div>
<div id="selected"><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
</div>
</body>
</html>
|
|
|
music_man
msg:3688041 | 9:47 pm on Jul 1, 2008 (gmt 0) |
Works a treat! Any tips on how to make it work for IE 6? Works for IE 7.
Thanks.
|
appi2
msg:3688073 | 10:34 pm on Jul 1, 2008 (gmt 0) |
It should work in IE6, I've tested that exmaple above in a virtual Machine running XP and default IE6. If your having problems with IE6, I'd be interested to know what version etc. There are a couple of things you should watch out for, you wont be able to set a bottom border on the #selected div and you can't use anchors inside the <div id="nav">...</div>.
|
music_man
msg:3688090 | 11:12 pm on Jul 1, 2008 (gmt 0) |
I've changed it to a list:
#navigation ul
{
margin: 0;
padding:0;
background: #759dd5;
width: 100%;
overflow: hidden;
}
#navigation ul li
{
float:left;
list-style: none;
padding-bottom: 5px;
}
#navigation a
{
border-right: 1px solid #fff;
line-height: 140%;
display: block;
width: 130px;
padding: 5px 0 100px 0;
margin: 0 0 -100px 0;
text-align: center;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
color: #fff;
text-decoration: none;
font-family: "Trebuchet MS", verdana, sans-serif;
} .current_page_item a, #navigation a:hover
{
background: #c65528;
}
|
|
<div id="navigation">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
</ul>
</div>
|
|
|
appi2
msg:3688184 | 4:51 am on Jul 2, 2008 (gmt 0) |
you can't move the goal posts mid game, not fair ;) Presuming your links actually are something like (notice the first link) <div id="navigation">
<ul>
<li><a href="#">A long link that goes onto another line</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
</ul>
</div> and not what you posted above then add padding: 0 0 100px 0;
margin: 0 0 -100px 0; to #navigation ul li{} It then seems (make sure you check) to work in Firefox 2+ Opera 9.5 Safari3.1 IE6+ & Konqueror 3.5+
|
music_man
msg:3688189 | 5:02 am on Jul 2, 2008 (gmt 0) |
There it goes! Thanks very much for your help!
|
|
