Posted by Ben C on 03/12/07 15:02

On 2007-03-12, Jon Slaughter <Jon_Slaughter@Hotmail.com> wrote:
> http://www.jonslaughter.com/
>
> I just finished the majority of the code for my simple nav bar and I'm
> having a few issues.
>
> When I use IE everything works as planned except that when the resize is to
> small the link images scale down so small that nothing happens. I want them
> to have fixed size and rather have a scroll bar. (later I might have it
> where they go horizontally or something but for now I'm not worried about
> catering to people who want to view the page under 450pixels in width).
>
> But I also have 2 issues in firefox. When the button is clicked there is a
> border that is shown and also the state goes back to the original. In IE the
> button does not change unless a new nav button is clicked but in IE it is
> released once the user lets off the mouse button. What can I do to fix
> these?

If you want that kind of fine-grained control, make them something other
than anchors and write click handlers in JavaScript. But you will be
reducing accessibility, especially for people who have JavaScript turned
off.

The dotted border, if that's what you're referring to, is the way
Firefox highlights the "active link" which helps with TAB navigation and
using the keyboard.

> Also is there any way to optimize the css code I used. It seems very
> redundant to use the same code for different imagse but its the only way I
> can get it.

You can give an element more than one class. So all the common stuff can
go in e.g.

..rollover a:hover { ... }

then

<td class="lookup rollover">...

[Back to original message]