Solution to idiot wee line between menu items :)

@torkMay 26.2006

Hey:

Have you ever noticed in some of your menus, a tiny wee horizontal line like an underscore that touches both boxes? You know, that idiot wee line that drives you crazy?

I have a solution for you. Chocolate would be just fine thank you ?

It’s all to do with the following:

a:link {font-family: arial; color: #7A5A3B; font-size: 9pt; text-decoration: none; font-weight: bold;} a:hover {font-family: arial; color: #CC9966; font-size: 9pt; text-decoration: none; font-weight: bold;} a:visited {font-family: arial; color: #7A5A3B; font-size: 9pt; text-decoration: none; font-weight: bold;} a:active {font-family: arial; color: #CC9966; font-size: 9pt; text-decoration: none; font-weight: normal;}

If you miss out the ‘visited’ script line, it creates that idiot menu line! Bet you didn’t know that, eh? So now you know what to do should you for some inexplicably foolish reason want that line in your menus, hehe! ?

Have a productive day!

to post a comment

HTML

13 Comments(s) _↴

@Robert_WellockMay 26.2006 — #Actually the pseudo links are supposed to go in this order: :link, :visited, :hover, :active, you now owe me some Crayons.

@torkauthorMay 26.2006 — #Hehe! Is this simply a convention or does it affect the output in some way? The code I mean, not the crayons ?

@Robert_WellockMay 26.2006 — #Yes it does affect the result: http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Plus: 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

@David_HarrisonMay 26.2006 — #If you knew about :focus, why did you not say this order?[list]

[*]:link

[*]:visited

[*]:focus

[*]:hover

[*]:active

[/list]

@torkauthorMay 26.2006 — #Ah! I see. I changed it around and now the world makes sense! Hey thanks for the link too. Have a great day, or multiples thereof!

@Robert_WellockMay 26.2006 — #I was only referring to that sample not the whole pseudo link group so omitted focus. ?

@David_HarrisonMay 26.2006 — #Yes, but if someone is having a problem with incomplete or flawed code, you don't post a reply with only incomplete or flawed code in it.

tork - To eliminate that "annoying line", along with any other non-desirable effects, I usually throw in a bog standard "a" selector aswell. The a selector will apply to all states of links, therefore any defaults, such as the underlining of links, can be over-ridden first and you don't have to worry about them.

I have recently written an article on CSS best-practices, here is an extract:

[INDENT][size=4]Pseudo Classes for Links[/size]

[INDENT]Everyone loves :hover on links, it’s an easy way of highlighting the current link that a users mouse is over, it makes the page seem a lot more dynamic and lively. However, a lot of people tend to forget about the other pseudo classes and just use a and a:hover. A handy tip to remember the others with is LoVe/HAte; L for :link, V for :visited, H for :hover and A for :active. Not only does it list other pseudo classes, it shows the order in which they should be specified to avoid counter-intuitive effects.

Unfortunately that doesn’t include F for :focus, which is equally as important as :hover, therefore I would be more than happy to see the LoVe/HAte mnemonic die a death tomorrow. When using :hover, please don’t forget about :focus. Not all users use the mouse to activate links, some users tab through links on the keyboard, :focus is integral to demonstrating which link will be activated upon pressing enter.

Generally when I’m writing out code for links, I write the selectors like so:

#somewhere a,
 #somewhere a:link,
 #somewhere a:visited{
 property:value;
 }
 
 #somewhere a:focus,
 #somewhere a:hover,
 #somewhere a:active{
 property:another-value;
 }

When writing them out like that, it’s really not necessary to include the :link and :visited pseudo classes, however I do it anyway because it helps me remember them. The selector #somewhere a will apply to all links in #somewhere, no matter what their state, then for the :focus, :hover and :active states, the second rule kicks in and over-rides the first to indicate which link the user has activated or could activate.[/INDENT][/INDENT]

@torkauthorMay 26.2006 — #Hey guys, thanks for your help!

Maybe we should exchange LoVeForHAte and remember it that way ?

Good article David! Much appreciated.

@torkauthorMay 26.2006 — #Hmm. That's odd! I notice that when I hover the cursor over [I]any [/I] menu item, the menu item shudders. Now when I click, go to the hypertexed page and back, and hover over the menu, there is no longer any shudder. Because the menu is designed to be dynamic (able to add new menu items later with php) I have used span and JavaScript (thanks Robert!) as shown below. How would you fix this shuddering so that it never happens. Intuitively, it seems to be something to do with the a:hover since the text in the menu is hyperlinking. But my brain hasn't been bathed in as much CSS as you guys ?

Here's the code:

<style type="text/css">



</style>

</head>

<body background="/mrb/images/beige_background.gif">

<script language="javascript">



</script>

<a href="/index.htm"

onmousedown="hiLite('b0','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b0','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b0" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">home</span>

</a>

<a href="/mrb/about.php"

onmousedown="hiLite('b1','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b1','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b1" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">about</span>

</a>

<a href="/mrb/portfolio.php"

onmousedown="hiLite('b2','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b2','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b2" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">portfolio</span>

</a>

<a href="/mrb/endorsements.php"

onmousedown="hiLite('b3','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b3','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b3" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">endorsements</span>

</a>

<a href="/mrb/in_the_news.php"

onmousedown="hiLite('b4','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b4','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b4" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">in the news</span>

</a>

<a href="/mrb/links.php"

onmousedown="hiLite('b5','/mrb/buttons/push_button/beige/ButSmallOnBlank.gif')"

onmouseout="hiLiteOff('b5','/mrb/buttons/push_button/beige/ButSmallOffBlank.gif')">

<span id="b5" style="background-image:url(/mrb/buttons/push_button/beige/ButSmallOffBlank.gif); color: #7A5A3B; width:88px; height:17px; cursor:pointer;" class="menu">links</span>

</a>

@David_HarrisonMay 27.2006 — #I don't know why that happens, and I could not replicate the effect in Firefox, but then you didn't say which browser the randomness happened in. I notice that you are still missing :focus in your CSS though, not that that could be the cause.

I would propose re-writing the markup and CSS, because you have many conflicting rules, such as how you specify a different colour for :hover links, but then specify a colour for the span elements inside the links, so that the :hover colour has no effect at all.

Also, you cannot specify dimentions for inline elements, I notice that you tried to do that on the span elements. Finally, I don't recommend using fixed font sizes (units such as px and pt) because that prevents the font size from being changed in some browsers. Users of those browsers may need to increase the font size to read the text, if you prevent them from doing that then your site becomes useless to them.

I have attached the code I would recommend using instead, the markup has been stripped of inline styles (I would very rarely recommend using inline styles, they get in the way and crowd the markup) and the CSS has been cut-down too. The JavaScript rollovers have been removed and replaced with CSS.

[upl-file uuid=955c011d-2adf-423d-982a-666842beaa00 size=2kB]tork.txt[/upl-file]

@torkauthorMay 27.2006 — #Hey thanks! Nice!

I changed the sizes as follows to fit the application. However, the font size is too large. How do we make the font size fit the button image size? Oh, most of the client's clients use IE, although Firefox usage is increasing.

 #menu ul li{
   float:left;
   width:5.8em;		/* (was 8em) Try to avoid fixed dimentions, they tend to make your layout break when the text size is increased by the user. */
   }

@David_HarrisonMay 27.2006 — #There are a couple of different ways, you can make the background bigger than the links, or make the background repeat, that way if the font size is increased, more of the background is revealed. Specifying a background colour to fill in where the background image isn't big enough to cover will cover any blank spots too.

There's nothing wrong with making the font size smaller, just don't make it too small. Also, I'd recommend specifying the font-size in %.

@torkauthorMay 27.2006 — #Thanks! Just the ticket. And now .. into the bowels of the application cave ?

Also in #HTML _↴

Frame Length??Text in tables Is it possible to read a hyperlink from text file w html?

Success!

Help @tork spread the word by sharing this article on Twitter...

Tweet This

Solution to idiot wee line between menu items :)

13 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Solution to idiot wee line between menu items :)

13 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #HTML _↴