|
Posted by Chris on August 17, 2004, 3:18 am
Please log in for more thread options
I'm using eight links listed horizontally as a menu on my site. I'm
using font-variant:small-caps and they are padded so that they mimic
buttons. My gripe is with the way IE handles the focus rectangle on
these links. It insists on drawing this crazy shape that traces the
text, which with small caps looks rather assinine. Firefox handles the
same task very gracefully (yeah Gecko!) and I would like to force IE to
do the same.
The site in question is http://web.utk.edu/~clucas/Italy/Italy.html.
In particular, IE's focus rectangle is stepping on my border for the
menu bar (embedded in the background jpg, not rendered by the browser)
and upon clicking a link and going back the clicked link keeps its focus
rectangle, which makes the whole thing look pretty shoddy. Can anyone
help me with this seemingly mundane query?
Thanks
|
|
Posted by Jukka K. Korpela on August 17, 2004, 11:44 am
Please log in for more thread options
> I'm using eight links listed horizontally as a menu on my site.
> I'm
> using font-variant:small-caps and they are padded so that they mimic
> buttons.
For some odd reason, authors often want to make links look like buttons,
and buttons look like links. This is probably fairly harmless these says
for "navigational links" that appear in a homebrew menu. But in your
case, the links don't really look like links _or_ buttons.*) If you don't
want to change the color scheme (white on black), I would suggest that
you at least make them look like buttons - it's a lesser evil than making
them look just like a row of words. For button-like appearance, some CSS
styling with e.g. an outset border might be in order. But for optimal
results, let links be links; destroying the color difference between
visited and unvisited links is one of the most common ways of decreasing
usability.
*) Some other links are underlined, and if the user gets this hint, he
may well think that words that aren't underlined aren't links.
> My gripe is with the way IE handles the focus rectangle on
> these links. It insists on drawing this crazy shape that traces the
> text, which with small caps looks rather assinine.
Actually, "small caps" aren't real small caps (in common
implementations), so you don't get good esthetics anyway.
The small caps you actually get using CSS are reduced-size
capital letters, rather than typographically designed letters.
Probably to compensate for this, browsers use a fairly small
size reduction (otherwise it would become obvious that the lines
of the letters are too thin), thereby making the idea questionable.
(It almost looks like the text were meant to be in all capitals but
initial characters became a little too large.)
But the "focus rectangle" is a usability feature. It indicates that
something is happening when you focus on a text that is a link (despite
not having looked like one so clearly) or click on it, or look at it
immediately after visiting the link and returning. It's a "this was the
link I last visited" reminder. Moreover, the focus rectangle is _vital_
to people who use, for convenience or necessity (e.g., motoric
disability), only keyboard for navigation, especially if you haven't set
up things so that link appearance changes (e.g., by changing
background color) when the link is focused on.
If you wish to remove the useability feature using (nonstandard) HTML,
use the hidefocus attribute. If you wish to be XML compliant, you can
write hidefocus="hidefocus", but IE doesn't really case. Some people
recommend using JavaScript, with onfocus="this.blur()", but this can be
really catastrophic when it works - how do you navigate using the
keyboard then? Using onclick="this.blur()" is safer (but doesn't do quite
the thing you want).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
|
|
Posted by Harlan Messinger on August 17, 2004, 12:33 pm
Please log in for more thread options
> I'm using eight links listed horizontally as a menu on my site. I'm
> using font-variant:small-caps and they are padded so that they mimic
> buttons. My gripe is with the way IE handles the focus rectangle on
> these links. It insists on drawing this crazy shape that traces the
> text, which with small caps looks rather assinine. Firefox handles the
> same task very gracefully (yeah Gecko!) and I would like to force IE to
> do the same.
If something about a browser's behavior or appearance disturbs a user
sufficiently, then he'll use a different browser. If he finds the
disturbance to be mild or non-existent, then there isn't any point for one
site, out of the millions of sites on the Web, to give him a momentarily
different experience from the one he gets the rest of the time he uses his
browser. At best any "benefit" is minuscule, and at worst the hack will
result in surprise or confusion.
Moreover, it is important for accessibility reasons to have a visual
indication of the current link, and it would be irresponsible to remove it
even if you could.
> The site in question is http://web.utk.edu/~clucas/Italy/Italy.html.
> In particular, IE's focus rectangle is stepping on my border for the
> menu bar (embedded in the background jpg, not rendered by the browser)
> and upon clicking a link and going back the clicked link keeps its focus
> rectangle, which makes the whole thing look pretty shoddy. Can anyone
> help me with this seemingly mundane query?
|
|
Posted by Chris on August 17, 2004, 1:14 pm
Please log in for more thread options Harlan Messinger wrote:
>
>>I'm using eight links listed horizontally as a menu on my site. I'm
>>using font-variant:small-caps and they are padded so that they mimic
>>buttons. My gripe is with the way IE handles the focus rectangle on
>>these links. It insists on drawing this crazy shape that traces the
>>text, which with small caps looks rather assinine. Firefox handles the
>>same task very gracefully (yeah Gecko!) and I would like to force IE to
>>do the same.
>
>
> If something about a browser's behavior or appearance disturbs a user
> sufficiently, then he'll use a different browser. If he finds the
> disturbance to be mild or non-existent, then there isn't any point for one
> site, out of the millions of sites on the Web, to give him a momentarily
> different experience from the one he gets the rest of the time he uses his
> browser. At best any "benefit" is minuscule, and at worst the hack will
> result in surprise or confusion.
>
> Moreover, it is important for accessibility reasons to have a visual
> indication of the current link, and it would be irresponsible to remove it
> even if you could.
>
>
>>The site in question is http://web.utk.edu/~clucas/Italy/Italy.html.
>>In particular, IE's focus rectangle is stepping on my border for the
>>menu bar (embedded in the background jpg, not rendered by the browser)
>>and upon clicking a link and going back the clicked link keeps its focus
>>rectangle, which makes the whole thing look pretty shoddy. Can anyone
>>help me with this seemingly mundane query?
>
>
It seems my initial post was misinterpreted twice. I was inquiring how
to make IE use the same style/shape focus rectangle as Gecko does. IE
looks very poor while Firefox renders it beautifully. I'm well aware of
the implications of turning off focus rectangles which is exactly why I
didn't ask how to turn them off. Rather I was interested in making them
behave nicely. It turns out the best solution was to alter the
background jpg of the menu to not have a border, and ask the browser to
render the border manually. Although IE still draws said rectangle
outside the link and in an odd and annoying shape, it does not draw it
over the border. Why IE was written to outline the text rather than the
link itself makes little sense to me and it would seem the good people
at Mozilla.org as well.
Perhaps in the future before launching into pedantic diatribe, you
should read the initial question more carefully and not presume to know
what the poster meant to ask. In this case neither response attempted
to answer the question I asked but rather seemed to chastise me for
trying to disable the focus rectangle.
Chris
|
|
Posted by DU on August 19, 2004, 6:35 am
Please log in for more thread options Chris wrote:
> Harlan Messinger wrote:
>
>>
>>> I'm using eight links listed horizontally as a menu on my site. I'm
>>> using font-variant:small-caps and they are padded so that they mimic
>>> buttons. My gripe is with the way IE handles the focus rectangle on
>>> these links. It insists on drawing this crazy shape that traces the
>>> text, which with small caps looks rather assinine. Firefox handles the
>>> same task very gracefully (yeah Gecko!) and I would like to force IE to
>>> do the same.
>>
>>
>>
>> If something about a browser's behavior or appearance disturbs a user
>> sufficiently, then he'll use a different browser. If he finds the
>> disturbance to be mild or non-existent, then there isn't any point for
>> one
>> site, out of the millions of sites on the Web, to give him a momentarily
>> different experience from the one he gets the rest of the time he uses
>> his
>> browser. At best any "benefit" is minuscule, and at worst the hack will
>> result in surprise or confusion.
>>
>> Moreover, it is important for accessibility reasons to have a visual
>> indication of the current link, and it would be irresponsible to
>> remove it
>> even if you could.
>>
>>
>>> The site in question is http://web.utk.edu/~clucas/Italy/Italy.html.
>>> In particular, IE's focus rectangle is stepping on my border for the
>>> menu bar (embedded in the background jpg, not rendered by the browser)
>>> and upon clicking a link and going back the clicked link keeps its focus
>>> rectangle, which makes the whole thing look pretty shoddy. Can anyone
>>> help me with this seemingly mundane query?
>>
>>
>>
> It seems my initial post was misinterpreted twice. I was inquiring
> how to make IE use the same style/shape focus rectangle as Gecko does.
> IE looks very poor while Firefox renders it beautifully. I'm well aware
> of the implications of turning off focus rectangles which is exactly why
> I didn't ask how to turn them off. Rather I was interested in making
> them behave nicely. It turns out the best solution was to alter the
> background jpg of the menu to not have a border, and ask the browser to
> render the border manually. Although IE still draws said rectangle
> outside the link and in an odd and annoying shape, it does not draw it
> over the border. Why IE was written to outline the text rather than the
> link itself makes little sense to me and it would seem the good people
> at Mozilla.org as well.
>
> Perhaps in the future before launching into pedantic diatribe,
People are volunteers here, not paid teachers or professionals waiting
to get some questions in a 24 hour help desk. Don't be too hard here as
both persons who replied to you volunteered quite some time to structure
their replies.
you
> should read the initial question more carefully and not presume to know
> what the poster meant to ask. In this case neither response attempted
> to answer the question I asked but rather seemed to chastise me for
> trying to disable the focus rectangle.
>
> Chris
Your question was I presume something like this:
How to force MSIE to draw focus lines around links the way Firefox does it?
Recent Firefox now create focus outline outside the border of elements:
this is very recent CSS2 outline property support in Gecko/Mozilla-based
browsers. Before, they were drawn inside the border.
MSIE 6 does not support CSS2 outline property. So, I think you have to
make your links change the border.
I have a page that has the similar (very minor, cosmetic IMO) problem
(for label):
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSSDynamicTableFormatting.html
Not tested
**********
a:active {border: 2px dotted black;}
and in your markup:
<a href="Orvieto/Orvieto.html" hidefocus="true" title="Jump to our
Orvieto page"> Orvieto </a> <a href="..." ...>
The small dotted typical IE outline should disappear. At least I tested
<label hidefocus="true" onclick="this.style.border = '2px dotted
black';"> and that works accordingly in MSIE 6.
I see that you coded:
#h li
If your list-item are going to be inline elements, then why use an <ul>
to begin with? Why not the straightforward
<div id="h"><a href="Orvieto/Orvieto.html" title="Jump to our Orvieto
page"> Orvieto </a> <a href="Roma/Roma.html" (...)
One last thing about your code. I would definitively try to simplify
your code (markup and CSS) if I were you. I personally never code the
line-height because there are too many bugs and this property is not
that helpful.
There certainly should be a way to simplify your stylesheet.
Also reading your markup code and css code is a real pain: no line
breaks, indentation, blank space. You may be saving a few KB of file
size here but you're definitively losing on the webpage maintenance time
area (and code review by others). I would reduce number of colors and
use .png instead of .jpg and would most likely save more KBs that way
than by removing CRs, LFs, indentation, blank spaces.
My 2 cents
DU
|
| Similar Threads | Posted | | textarea problem: keyboard focus doesn't follow mouse focus/click | June 13, 2008, 10:05 am |
| Focus | October 20, 2004, 5:10 am |
| focus on a input field | January 11, 2005, 2:18 am |
| textarea not getting the focus in mozilla | November 21, 2006, 4:30 am |
| How to get rid of focus on submit button of a form. | September 5, 2004, 1:21 pm |
| Table Element Focus events | February 21, 2005, 8:47 am |
| Why aren't key strokes being recognized when a certain table row has focus? | January 4, 2007, 12:28 pm |
| css, div tags and redefing web page focus | May 24, 2008, 10:46 am |
| Can searching be customized -- To focus search-results & find up-to-date content? | August 1, 2006, 9:50 pm |
| A plea: where are the links? | September 4, 2005, 9:19 am |
|
XML Sitemap