CSS - List Help

[Gwayn]

I need help again
In a navbar appears a line under each list element [list of imgs], in the
css you can put padding-bottom: 0px; margin-bottom: 0px; border-bottom:
none; everywhere but the space under the list element dont go away...

Well, easier to copy here the code... someone knows what's the right
parameter to change?

Thx ^^



______________
CSS:
______________
#navcontainer
{
margin-top: 4em;
float: left;
background-color: green;
padding-bottom: 0em;
margin-bottom: 0px;
border-bottom: none;
}

#navlist
{
padding: 0 0px 0px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background-color: black;
width: 8.50em;
height: 16em;
padding-bottom: 0px;
margin-bottom: 0px;
border-bottom: none;
}

#navlist li
{
list-style: none;
margin: 0px;
text-align: left;
background-color: yellow;
text-align:right;
height:34px;
}

#navlist li a
{
display:block;
background-color: blue;
padding: 0.0em 0.0em 0.0em 1.0em;
border-right: 0.70em solid red;
}

______________
HTML:
______________
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><img src="img/bDisclaimer.gif" alt="Disclaimer"
border="0" /></a></li>
<li><a href="#"><img src="img/bRead.gif" alt="Read Online"
border="0" /></a></li>
</ul>
</div>

 

[Marc]

I need help again
In a navbar appears a line under each list element [list of imgs], in the
css you can put padding-bottom: 0px; margin-bottom: 0px; border-bottom:
none; everywhere but the space under the list element dont go away...

I don't know if it what's causing your problem, but 0 px is the same as
0 elephants, which is also the same as 0 cups of coffee. You don't need
to specify a unit for 0.

Marc

 

[Marc]

I need help again
In a navbar appears a line under each list element [list of imgs], in the
css you can put padding-bottom: 0px; margin-bottom: 0px; border-bottom:
none; everywhere but the space under the list element dont go away...

If you're talking about the yellow bit it's because of the height
attribute you set on the LI - I've commented it out and also tidied up
the rest of your CSS.

Marc


<style>
#navcontainer
{
margin-top: 4em;
float: left;
background-color: green;
border-bottom: none;
}

#navlist
{
font: bold 12px Verdana, sans-serif;
background-color: black;
width: 8.50em;
height: 16em;
padding: 0;
}

#navlist li
{
list-style: none;
text-align: left;
background-color: yellow;
text-align:right;
//height:34px;
}

#navlist li a
{
display:block;
background-color: blue;
padding: 0 0 0 1em;
border-right: 0.7em solid red;
}
</style>

<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><img src="img/bDisclaimer.gif" alt="Disclaimer"
border="0" /></a></li>
<li><a href="#"><img src="img/bRead.gif" alt="Read Online"
border="0" /></a></li>
</ul>
</div>

 

[Els]

I need help again
In a navbar appears a line under each list element [list of imgs], in the
css you can put padding-bottom: 0px; margin-bottom: 0px; border-bottom:
none; everywhere but the space under the list element dont go away...

Give the image display:block;

 

[Beauregard T. Shagnasty]

#navlist
{
padding: 0 0px 0px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;

You've not heard yet that setting font sizes in px is a Bad Ideaâ„¢. IE
users with vision disabilities will not be able to resize your content.

Using Verdana is also not desired:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

If you feel you need to assign the fonts, use:

font: bold 100% sans-serif;

Add:

body {
font: 100% sans-serif;
}

 

[Gwayn]

Thx all for the help, the problem was the height of the <li> <a>
I also eliminated the verdana as suggested [it was also unuseful to
specificate the font cause in that list i dont use any font, i use images to
display buttons with Kroeger font] but now i got another problem.

I need to overlay two borders:

_______________________
..navlist
{
margin: 0px 0px 0px 0px;
background-color: black;
width: 8.50em;
padding-bottom: 5em;
border-right: 0.50em solid red;
}

..navlist li a
{
display:block;
background-color: blue;
padding: 0.0em 0.0em 0.0em 1.0em;
border-right: 0.50em solid red;
}
_________________________


Well i need to overlay them cause in a .navlist li a:hover Only the <li> <a>
border will have to change color. Anyway with this code i got two borders
side by side, like:
..navlist li a ------
..navlist _____

But in vertical ... well how to overlay them?

 

[Marc]

Well i need to overlay them cause in a .navlist li a:hover Only the <li> <a>
border will have to change color. Anyway with this code i got two borders
side by side, like:
.navlist li a ------
.navlist _____

But in vertical ... well how to overlay them?

Remove the border from the child, and remove the padding from the parent.

Marc

 

[Gwayn]

Remove the border from the child, and remove the padding from the parent.

Ehm, no wait, i dont resolve nothing doing this...

I need both borders because only the <li> related border will have to change
color when mouse is over the <li> link

Anyway i done this for explication:

This is the situation i have:
http://img91.imageshack.us/img91/344/example013if.jpg
And this photoshopped img shows what i'd want to have:
http://img90.imageshack.us/img90/6928/example022nk.jpg

 

[Marc]

I need both borders because only the <li> related border will have to change
color when mouse is over the <li> link

Anyway i done this for explication:

This is the situation i have:
http://img91.imageshack.us/img91/344/example013if.jpg
And this photoshopped img shows what i'd want to have:
http://img90.imageshack.us/img90/6928/example022nk.jpg

Ah right, I see your problem. I'm not sure if this is possible without
a CSS hack as borders aren't designed to go on-top of each other.
Perhaps you could remove the border from the <ul>'s parent and put more
<li>s in above and below your menu items to fake the border on the
right? That might pose an accessibility issue though.

Marc

 

[Gwayn]

Ah right, I see your problem. I'm not sure if this is possible without a

CSS hack as borders aren't designed to go on-top of each other. Perhaps
you could remove the border from the <ul>'s parent and put more <li>s in
above and below your menu items to fake the border on the right? That
might pose an accessibility issue though.

Marc

I think ill try this way... but i cant eliminate the space among the list
elements... i tried with all the attributes [border, padding, margin] in all
elements [div, ul, li, li a] the black space still stays...