Nav bar help

J

Jon Slaughter

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?

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.

Thanks for any help,
Jon
 
B

Ben C

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">...
 
J

Jon Slaughter

Ben C said:
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.

But surely there is functionality in css to do this? IE does it fine.

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.

I thought I read somewhere how to turn this off though?
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">...

Ok, thanks.

Jon
 
J

Jon Slaughter

Ben C said:
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.

outline handles that. outline:none fixes that problem. I know the other
problme is fixable because when I was working on the navbar I had it work
just fine at one point(before I did the rollover) so I'm sure there is a
way.
 
J

Jon Slaughter

Jon Slaughter said:
outline handles that. outline:none fixes that problem. I know the other
problme is fixable because when I was working on the navbar I had it work
just fine at one point(before I did the rollover) so I'm sure there is a
way.

and the other is fixed by setting the mix-width attribute.
 
J

Jon Slaughter

Jon Slaughter said:
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?

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.

Thanks for any help,
Jon


The only issue left is that when I use the active dynamic class it goes away
in firefox while not in IE but a new isue is that if the mouse button is
held and the button is "dragged" off the table and then dragged back on the
nav bar will not reset itself and the image will state active even though
there should not be any. I think this might be a bug in the web browers but
not sure. (It seems like they are loosing the state for some reason)

Jon
 
J

Jonathan N. Little

Jon said:
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?

a:down pseudo-class "down" That's a new one!

try

A:active

or

A:focus

BTW on dialup with IE your rollover is so slow that the button disappear
for several seconds before displaying the new state!
 
J

Jon Slaughter

Jonathan N. Little said:
a:down pseudo-class "down" That's a new one!

I tried but didn't work. I'll try again though cause maybe I did something
wrong.
try

A:active

or

A:focus

BTW on dialup with IE your rollover is so slow that the button disappear
for several seconds before displaying the new state!

It can't. The state's are all one graphic. The position is only changed and
surely it downloads the whole image. Not only that each image is about 5k at
most. (total 40k) So if the rollover is disappearing between states then its
shouldn't be the image. Does it stop after reloading?

In any case I'm not targeting people with slow connections but I don't see
why it would be that slow. (its not great and I'm using 24-bit pngs but only
for transparency. I could probably optimize it some since the transparency
is only used at the bottom of the image. I'm not to worried about that stuff
now as I just want to get the site designed. )

Thanks,
Jon
 
B

Bergamot

Jon said:
outline handles that. outline:none fixes that problem.

It wasn't a problem before except in your own mind. Now you have a real one.

Usability is now seriously degraded for us keyboard users. The focus
outline is a guide to help find where you are on a page. Now tabbing
through the page gives no visual clue to where you are. :-(
 
J

Jon Slaughter

Jonathan N. Little said:
Of course it didn't work, it doesn't exist you cannot just makeup
properties! Try a referencing where it come from:

www.w3.org/TR/CSS21/cover.html

Yeah, I know. I thought you said that. (when you said it was a new one I
thought you ment it was something new added to the spec) I tried it because
they have that for js(or atleast in image ready when asetting up rollovers
you can have the down state). I tried it and it didn't work but forgot to
take it out of the code I guess.
 
J

Jon Slaughter

Bergamot said:
It wasn't a problem before except in your own mind. Now you have a real
one.

Usability is now seriously degraded for us keyboard users. The focus
outline is a guide to help find where you are on a page. Now tabbing
through the page gives no visual clue to where you are. :-(

fortunately I'm not catering to those who don't want to use a mouse. I also
do believe that you can use the focus event for the keyboard which works
like over so one will no.

adding

..nbrollover a:focus { background-position: 0 -60px; }

lets you use the tab to select the nav bar and know where your at.

Its not an issue for me. It might be an issue for you but I'm not creating
my website for you.

Maybe after I get finished with the site and learn more about html, css, js,
php, mysql I will consider making it more accessible for those that want to
live in the past but at this point I'm just trying to get something done
that works for me.
 
D

dorayme

"Jon Slaughter said:
Maybe after I get finished with the site and learn more about html, css, js,
php, mysql I will consider making it more accessible for those that want to
live in the past but at this point I'm just trying to get something done
that works for me.

Watching you say this makes me feel like the more squeamish
members of the Roman community that happen to be at the Colosseum
when the lion gates are just about to open...
 
A

Andy Dingley

Watching you say this makes me feel like the more squeamish
members of the Roman community that happen to be at the Colosseum
when the lion gates are just about to open...

That's only because lions didn't have killfiles.
 
B

Bergamot

Jon said:
fortunately I'm not catering to those who don't want to use a mouse.

Unfortunately "wanting" has little to do with it.
I also
do believe that you can use the focus event for the keyboard which works
like over so one will no.

Sorry, that doesn't parse.
Its not an issue for me. It might be an issue for you but I'm not creating
my website for you.

Are you creating the web site only for yourself? If so, do whatever you
like. If you expect a more general audience, you should be more
concerned about *their* needs.
I will consider making it more accessible for those that want to
live in the past

Live in the past? Not hardly.

FYI, I have a motor impairment that makes using a mouse awkward at best,
so only use it when there is no choice. It's not likely your little web
site would be important enough for me to go through the trouble. BTW,
power users tend to be keyboard users as well. Got any of them in your
target audience?
but at this point I'm just trying to get something done
that works for me.

Just don't forget who the web site is ultimately for - your visitors,
not you. Get something done that works for them.
 
E

Ed Seedhouse

Whatever for? Do you intend to be the only visitor?

Sort of contradicts the idea behind *publishing* a web site, so far as I
can see.
 
J

Jon Slaughter

Ed Seedhouse said:
Whatever for? Do you intend to be the only visitor?

Sort of contradicts the idea behind *publishing* a web site, so far as I
can see.


No, but you guys seem to think that everyone is like you and don't know how
to use a mouse or run there screen resolution above 320x200. I'm not going
to waste my time designing my site for every jack ass that doesn't want to
use a mouse or turn on javascript. Its just tough if they want to use IE 1
and not upgrade to IE 7 or firefox. I'll be damned if I'm going to spend 10x
as long trying to design the site so it will work for every one last
possibility just so no one is left out. I'm designing the site for me and
not for them. If no one else in the world knows how to use a mouse but me
then so be it. I guess I'll be the only vistor. Its also not my fault that
there are so many differences between browsers that I have to spend 3x as
much time designing the site just so it works on the main four.

What you guys forget is that it is my choice rather than yours on how I want
to design it. Now if you want to design it for me for free and take into
account all that stuff then I'll be more than happy to let you do it how
ever you want as long as it keeps with some theme I have. But I have better
things to do with my time than design it for every tard that doesn't have a
mouse, run at 800x600 or better, have js turned, run in a modern browser,
and have a decent connection. I would expect that this covers atleast 50%
of anyone that would visit my site and it would probably be more like 80%.
If not then its there fault and not mine. Now if they want to use the site
for there purposes then they can design the site to work for them and then
give me the code and I'll be happy to use it.

When you go buy a car you do you think the car is made to work for handicap
people? When you buy clothes do are they designed in such a way to fit
everyone perfectly? No, they are designed for the "avg" person. My site
will be designed for the avg person. And if I'm wrong that the avg person
doesn't have a mouse then thats just too bad.
 
E

Ed Seedhouse

No, but you guys seem to think that everyone is like you

Actually it seems to be you who thinks that and says to the possibility
that he's wrong "I don't care about you."
and don't know how
to use a mouse or run there screen resolution above 320x200.

I can do all those things. There are people, a lot of people who
physically cannot use a mouse. Your answer? "I don't care. I don't
want their money." Why? Is their money tainted? Actually don't bother
answering that for me since I won't see it - you are going in my
"ignore" file.
I'm not going
to waste my time designing my site for every jack ass that doesn't want to
use a mouse or turn on javascript. Its just tough if they want to use IE 1
and not upgrade to IE 7 or firefox.

Tough for you if you are counting on them to generate revenue.
What you guys forget is that it is my choice rather than yours on how I want
to design it.

We don't forget that at all. We are instead trying to he helpful and
friendly and explain why thinking that way will hurt you. Given your
response I expect folks will stop doing that, assume you are an idiot (a
fair assumption given what you say) and ignore you from here on out. I
know I will, anyway.
 
J

Jonathan N. Little

Jon said:
No, but you guys seem to think that everyone is like you and don't know how
to use a mouse or run there screen resolution above 320x200. I'm not going
to waste my time designing my site for every jack ass that doesn't want to
use a mouse or turn on javascript. Its just tough if they want to use IE 1
and not upgrade to IE 7 or firefox. I'll be damned if I'm going to spend 10x
as long trying to design the site so it will work for every one last
possibility just so no one is left out. I'm designing the site for me and
not for them. If no one else in the world knows how to use a mouse but me
then so be it. I guess I'll be the only vistor. Its also not my fault that
there are so many differences between browsers that I have to spend 3x as
much time designing the site just so it works on the main four.
<snip>

Yes it does not make sense to design to accommodate NN4 for MSIE3
vintage browsers where the usage is in the fractions of a percent but
equally it does not make sense not to implement simple design elements
that makes your site flexible and accommodate multiple browsers,
resolutions, methods of access. Most times to accommodate in a design is
not *add* impediments!
 
J

Joel Shepherd

"Jon Slaughter said:
No, but you guys seem to think that everyone is like you and don't know how
to use a mouse or run there screen resolution above 320x200. I'm not going
to waste my time designing my site for every jack ass that doesn't want to
use a mouse or turn on javascript.

Since it takes effort to disable basic navigational aids like focus
rectangles, I'm not sure you're not already wasting your time.
And if I'm wrong that the avg person
doesn't have a mouse then thats just too bad.

[Giggle] Lots of people, average and otherwise, have a mouse. Just some
of us have learned we're a hell of a lot faster without it. Moving the
hand from keyboard to mouse, dragging mouse around, moving hand back to
keyboard and repositioning it, etc., takes a lot of time. If you don't
believe that, you don't spend enough time _working_ at a keyboard to
know.

The folks whose opinions you're writing off are probably the ones who
could code circles around you, HTML or otherwise. They're not the
incapable ones: you are.

Take a deep breath, let go of some defensiveness, and consider that some
folks here might actually know something that you don't.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top