How to make a vertical be seen as a vertical?

[zonkd]

Why won’t Mozilla accept that a "¦" is just that? IE obliges, but Mozilla and others give it as a vertical with a black degree symbol attached.

I use "¦" as decoration between global navigation links.

Is there a symbol like "¦" that all browsers are happy with, please, Experts?

(Here, the vertical is shown as one vertical above another. I'm referring to the symbol that resembles a lower case san serif "L".)

[4hero]

Hi,

It's probably better to use the html entity [w3schools.com] for this:

¦

[zonkd]

Thanks, very much, 4hero. Unfortunately, it just brings the degree mark closer to the vertical bar on Mozilla. I've noted the url, many thanks.

I was thinking that perhaps developers use a decoration like this that they know will work across the range of browsers, and perhaps they would reveal what it is.

[4hero]

hmm, I just tried

<a href="#">Link 1</a> &brvbar; <a href="#">Link 2</a> &brvbar; <a href="#">Link3</a>

and all looks well in Firefox.. Can you post your html of the navigation so we can take a look?

[zonkd]

Well, it must be me, then. Sorry. Be pleased to know where I am going wrong. I tried it in Firefox and Mozilla, and both show a black degree symbol on top of the light-grey vertical.

This is where I am using it ...

$result = @mysql_query("SELECT
IF(Named NOT LIKE 'Search',
(CONCAT('<li> <a href=\"', Link, '\">',
Named, '</a> &nbsp; <font color=\"#CCCCCC\"> ¦ </font>&nbsp; </li>')),
(CONCAT('<li> <a href=\"', Link, '\">', Named, '</a> &nbsp; &nbsp; </li>')))
AS gn
FROM globalfront
ORDER BY id"
);

[choster]

What typeface?

Have you tried box-drawing characters like &#9474; (in hex, &#x2502;) or &#9615; (&#x258F;)?

FWIW, we use CSS borders to create our horizontal menu item separators.

[zonkd]

Hello choster

Verdana is the font. I'll try your suggestion for the box drawing, and many thanks for it. Be most grateful for a look at how you do your horizontal menu separators.

Many thanks,4hero, for your help. Doesn't work for me, unfortunately. But it must be a problem every developer faces ... everyone uses global menus, after all.

[Hester]

I think this forum replaces the solid vertical line known as the "pipe" with a broken line. Did you mean the solid line or the broken line?

I have regularly used the solid line straight from the keyboard for menus, and have never had any problems with it appearing differently in browsers.

The symbol is above the slash next to the Z key. Oddly, keyboards seem to get this wrong, and show the broken line instead. While the solid line shown on the key next to the 1 gives a broken line!

[zonkd]

Cheers, Hester. I, too, had used the solid line happily until I started to look beyond IE. Most of the visitors to the site I run use IE, so it hasn't been a huge problem.

But in Firefox and Mozilla, the solid pipe/vertical/upright appears in as an upright with a degree sign beside.

A nuisance, because there's no disguising that it is a fault.

What I had presumed, Hester, was that others had suffered this problem and had found a way round it.

[zonkd]

Choster, if I used css to give myself a vertical, how would I use that in the code please?

Well, the div and /div usually go round something. Would I use a single letter and set its font colour the same as the surrounding?

[encyclo]

With CSS, you can use a 1px border on the left or right of each item, omitting the border on either the first or last of the list (use a class). For accessibility reasons, you should either have a distinct dividing character between each link or use a true list with each link within a

li

.

[zonkd]

Thanks, encyclo, for the advice and guidance. Appreciated very much. Cheers.

[doodlebee]

I've done what encyclo has done several times - works great.

However, I've also used the "¦" thing just fine (in fact, I'm using it on a couple of sites right now) and it works fine in Mozilla.

I'm wondering something - could it be your editor? I know when a client sends me content to copy and paste into their site, sometimes they send it to me in RTF or Word format (I require text-only format for this exact reason) - when the stuff is sent in a rich-text format, then the symbols are usually replaced, and it causes weird characters to show up when I copy and paste. Then I have to go through and pick and find to fix the errors.

Is it possible that your HTML editor (or wherever the source of your code is) was sent/uploaded in RTF format, and not a text-only format (using Notepad)? If so, that may be your culprit - many times when that happens, in IE it seems to be fine, but standards-compliant browsers will show the weird characters instead.

Just a thought :)

[zonkd]

Yes, there has to be something wrong with my set-up or something, it must be true, doodlebee, if it isn't happening with you and others. Wish the answer was so simple as a Word doc or similar throwing it out.

I use dreamweaver, and I've been using the recommended &-prefixed symbols too. There's a slight variation when I use the &-code for the symbols, but still a fault. And the fault is distinct. I get the vertical, in the colour of choice, but I also get a black degree symbol - either beside the vertical or on top, but never in such a position that I could pretend it's intentional and very aesthetic.

Thanks very much for your observations. Cheers, doodlebee

[Hester]

Perhaps the encoding is to blame. Are you using UTF-8 or not?

[zonkd]

Hello Hester
Frankly, I don't know. I went to Google to have it defined, but I am no wiser. Where would I check that, please?

[Hester]

If you use Opera, it can tell you in the sidebar what the page encoding is. Otherwise you can add some PHP to show it. Basically look at your code and see how it is defined. Eg: in the META tags:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

You can also set the encoding using PHP before the page is output.

When you validate a page of XHTML it will tell you if no encoding was found.

[zonkd]

Many thanks, Hester. Be grateful for the php code if you have it.

[Hester]

Sorry, couldn't find it earlier. Here it is. This must go at the top of the document (between opening and closing PHP tags of course):

header('Content-Type: text/html; charset=utf-8');

Then you don't need to use the META tag.