1

[Graphener]

Graphener

#5145

Hi,

Could somebody tell me how to separate menu elements by a grey vertical-centered line ?

I tried with the following code but when I highlight the menu, there is space between the separator and the highlighted background:

#header-menu > li {

border-right-color: grey;

border-right-width: 0.5px;

border-right-height:1px;

border-right-style: solid;

}

Any better code?

Thank you in advance

[ronangelo]

ronangelo

#30856

Try this

#header-menu > li {

border-right: 0.5px solid grey;

margin: 0;

}

[Kenneth John Odle]

Kenneth John Odle

#30857

Thank you. This is what I need to do on one of my blogs.

You can combine that code for a border into a single declaration. Also, there is no “border-height” property.

The extra space you mention is coming from a margin attached to each <li>. You can clear it by setting it to 0px.

Something like this:

#header-menu li {

border-right: solid 1px #999999;

margin-left: 0px;

}

[Graphener]

Graphener

#30858

Thanks for you both, but I don’t see any difference between my code and the yours; I still have a space between the separator line and the background!

Also, the separator touches the up and down line!

I’d like that the separator line doesn’t touch the upper and bottom borders, but to fits only in a medium position, like in the menu in the following websites:

http://www.dailymail.co.uk/home/index.html

or this one:

http://www.economist.com/

On this last one, you will see that there is a background and no space between the separator and the highlighted background.

In my case, there is a space! I would like not to have it in the menu!

PS: I used the height line to shorten the separator length, but this didn’t work, the line still touching both upper and bottom borders!

Regards,

[Kenneth John Odle]

Kenneth John Odle

#30859

Quote:

I don’t see any difference between my code and the yours

Look again. We added margin:0 to eliminate the space.

Quote:

I used the height line to shorten the separator length

As I stated, there is no border-height property.

[Graphener]

Graphener

#30860

I’m describing what I see. The space is still there, even with “margin:0” code!

If there is no “border-height” property, what we can use to reduce the length of separator? How to make it shorter, as in the links above?

[ronangelo]

ronangelo

#30861

Try this…

#header-menu li {

margin: 0 !important;

}



#header-menu  li  a {

border-right: 0.5px solid #999;

margin: 6px 0;

}

[Graphener]

Graphener

#30862

Thanks but it doesn’t work at all!

Did you try it and worked for you?

It doesn’t for me!

I noticed that values less than 1px are not considered!

[Kenneth John Odle]

Kenneth John Odle

#30863

Quote:

I noticed that values less than 1px are not considered!

A pixel is, by definition, the smallest unit a screen or monitor is capable of displaying. Anything smaller will not be displayed.

They are using a border, but Firebug revealed to me that their entire list is enclosed in another div padding. That is how they are getting a shorter border.

You have to be careful of making false assumptions. A lot of people (newbs and pros alike) will often ask “How do I use A to do B?” The assumption is that A will do B, when often that’s what it was not designed to do.

A better question is “Which tool/technique/program do I need to achieve B?”

[ronangelo]

ronangelo

#30864

Quote:

Thanks but it doesn’t work at all!

Did you try it and worked for you?

It doesn’t for me!

I noticed that values less than 1px are not considered!

oops I didn’t realize that.. I was following your example but yeah anything lower than 1px that’s not 0, will display 1px.

like what Mr. Odle said, try to find a different approach if the solution you have, doesn’t work.

the code I posted above does this: