[pojo]

currently, i'm trying to get a horizontal css navbar working, and i'm having problems

the li tags are styled as display:inline, and as far as I know, you can't set a height for inline elements, right? so how do i set the height of a css navbar without fidgeting with the margins?

[Drewry]

<style>
#test ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
#test li {
display: inline;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
#test a:active, #test, a:link, #test a:visited {
display: block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: #000;
color: #fff;
text-size: 12px;
font-family: Verdana;
}
#test a:hover {
background-color: #fff;
color: #000;
}
</style>
<div id="test">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>

Just quickly typed that up, but it SHOULD work.

[pojo]

thanks, that worked

except now the boxes are vertical...

do I have to make them into floats to make them horizontal?

[gkwinspired]

yep...unfortionatley you do!

On another note - do you have the "Web Developer" plugin for firefox. It makes situations like this really easy. It allows you to make changes to the CSS within the browser and it automatically updates it.

--
Greg

[pojo]

for some reason, I just can't get the boxes to be horizontally next to each other in firefox 2 =/. i tried setting everything to float:left, but to no avail

can someone please help

[gkwinspired]

I think that it is the display settings - check out this site:
http://www.quirksmode.org/css/display.html

--
Greg

[skyrocket]

Drewry version (remix)...

#test ul {
float: left;
width: 100%;
padding-left: 0;
margin-left: 0;
background-color: #036;
color: #fff;
}
#test ul li {
display: inline;
}
#test ul li a {
float: left;
padding: 0.2em 1em;
background-color: #036;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#test ul li a:hover {
background-color: #ce4;
color: #f90;
}

<div id="test">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>

that will work in Firefox

[emil]

http://css.maxdesign.com.au/