css display types

[bmass]

ok im coding a horizontal drop down menu.. but the problem im looking for a display other than block.. eg.

ul li a
{
display: block;
}

and i also cant use display: none cause it looks bad. what are some other display types?

[LiLcRaZyFuZzY]

what are you trying to achieve?
What is happening when you set display to block for the links?

[bmass]

what are you trying to achieve?
What is happening when you set display to block for the links?

well the side menu looks good, but what u scroll over to bring it down has a large space in it. like this basically:

Team [Vv] > side drop down

Counter-Strike > side drop down

Battlefield 2 > side drop down

but i need it to be like this:

Team [Vv] > side drop down
Counter-Strike > side drop down
Battlefield 2 > side drop down

here is the code im using in my head:

<style type=text/css>

ul {
margin: 0;
padding: 0;
list-style: none;
width: 100px;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 100px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #CC0000;
background: #000000;
padding: -5px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


li:hover ul, li.over ul {
display: block; }

</style>

<script language="JavaScript" type="text/JavaScript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>

[LiLcRaZyFuZzY]

do you mean that the margin between the elements of the menu are too big?

[bmass]

do you mean that the margin between the elements of the menu are too big?

no i mean that the display: block; makes the spaces of team vv counterstrike and battlefield 2 too big.. here il take a screen shot.

this is with display: block;
http://www.vvclans.com/images/bad.JPG

this is without any declared display
http://www.vvclans.com/images/bad%20still.JPG

please forgive the bad coloring, a result or ms paint and jpg.

[kelly23]

Hi,

The main options are:

display: block, inline, list-item or none

[bmass]

thank you

[LiLcRaZyFuZzY]

the whole list is

none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption

[bmass]

alrite thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?

[ray326]

Could be height or line-height style for the a.

[LiLcRaZyFuZzY]

try putting a 1px border around the links so you can see if it is the padding, the margins, or anything else

[NogDog]

... what are some other display types?
For future reference, you can always go straight to the source: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

[bmass]

alrite thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?

sorry i didnt see lilcrazyfuzzy's post only kelly's i still need to try fuzzy's

[LiLcRaZyFuZzY]

it wont do you any good, you really should try the advice in post #11

[bmass]

it wont do you any good, you really should try the advice in post #11

i checked its not the padding or margins... its the display type... heres my only problem... i cant effect the link and menu seperately... lik for the drop down menu i need it to be block like, but for the links i need it to be like no display or something. however i still have not tried the other display tpyes you mentioned.

[LiLcRaZyFuZzY]

did you try leaving it to default?

[bmass]

did you try leaving it to default?

yes that is inline i believe.. if i dont declare anything then the drop down looks bad.... by looking at the style script is there any way to affect the drop down menu and the links seperately?

[bmass]

alrite i think im looking for something like the opposite of table... cause display: table makes the links look the same as if it were block but the drop down menu looks inline... btw i rele appreciate all ur help

[bmass]

alrite its all good.. i just figured out how to fix the problem.. thanks for all your help...

[Kravvitz]

So what is your solution?

[bmass]

1. the reason the extra spaces were there is because by declaring the display: block i no longer needed to have a <br> after the link. also i can directly affect the drop down menu by coding styles like so:

li ul a {
w/e code
}