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 7  10534 
Chris <cd*****@bellsouth.net> 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.
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
"Chris" <cd*****@bellsouth.net> wrote in message
news:dq*****************@bignews5.bellsouth.net... 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?
Harlan Messinger wrote: "Chris" <cd*****@bellsouth.net> wrote in message
news:dq*****************@bignews5.bellsouth.net...
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
Chris wrote: Harlan Messinger wrote:
"Chris" <cd*****@bellsouth.net> wrote in message
news:dq*****************@bignews5.bellsouth.net...
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/doctorunc...ormatting.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{display:inline}
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
DU wrote: Chris wrote:
Harlan Messinger wrote:
"Chris" <cd*****@bellsouth.net> wrote in message
news:dq*****************@bignews5.bellsouth.net...
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/doctorunc...ormatting.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{display:inline}
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
DU,
I appreciate your reply. I am very new to both HTML and CSS (two
weeks) and am very interested in simplification wherever possible. The
menu code in question was lifted and adapted from some example on
horizontal menus I found by googling the subject. As for code
maintenance, I've written a CSS compactor and a XHTML compactor for
myself in Visual Basic that removes superfluous whitespace for me, thus
I get the best of both worlds. The code that I work on is nicely block
indented the way any decent coder would have insist upon having it.
Code review by others hadn't occurred to me however, that is certainly
something to think about.
As for the reduction of image quality, the site is just for my family
and friends (visitors are certainly welcome, but I can't imagine them
finding their way to my obscure corner of the web) and many of them are
still dialing up the internet, so they aren't clicking on my big
full-size pictures. Therefore, I'm reluctant to degrade too far the
quality of the images that they are looking at, i.e. the small ones on
the pages themselves.
I appreciate your tip about the CSS2 style support of the Gecko
rendering engine. I was afraid that this would be the case. Its a
shame that the browser with the vast majority of the market share is
slothful and stagnant. Thanks again for your help.
Chris
DU wrote: I see that you coded:
#h li{display:inline}
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" (...)
Because whether they're displayed inline or block, or as list items with
bullets is irrelevant. It's still semantically a list of links, so it
was marked up correctly. Don't decide to use different markup based on
how your presenting it now, presentation can always change.
--
Lachlan Hunt http://www.lachy.id.au/
Please direct all spam to ab***@127.0.0.1
Thank you.
Chris wrote: DU wrote:
Chris wrote:
[snipped]
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/doctorunc...ormatting.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{display:inline}
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
DU,
I appreciate your reply. I am very new to both HTML and CSS (two
weeks) and am very interested in simplification wherever possible. The
menu code in question was lifted and adapted from some example on
horizontal menus I found by googling the subject. As for code
maintenance, I've written a CSS compactor and a XHTML compactor for
myself in Visual Basic that removes superfluous whitespace for me, thus
I get the best of both worlds.
White/blank spaces, tabs, LFs and CRs take considerably very little
space in a file. Tag soup, bloated code, deeply nested tables,
improperly nested elements, poorly optimized code, large jpg or bmp
images are very very often responsible for huge file size, long download
times, long parsing+rendering times, etc..
Web Site Optimization: Speed Up Your Site
http://www.websiteoptimization.com/
Writing efficient CSS; Guidelines for Efficient CSS
http://www.mozilla.org/xpfe/goodcss.html
Writing perfect style sheets that are easy to maintain, quick to
download, efficient, optimized
http://www.richinstyle.com/masterclass/perfection.html
Tips For Authoring Fast-loading HTML Pages
http://devedge.netscape.com/viewsour...d-performance/
The code that I work on is nicely block indented the way any decent coder would have insist upon having it.
Ok. That's important to know.
Code review by others hadn't occurred to me however, that is certainly
something to think about.
As for the reduction of image quality, the site is just for my
family and friends (visitors are certainly welcome, but I can't imagine
them finding their way to my obscure corner of the web) and many of them
are still dialing up the internet, so they aren't clicking on my big
full-size pictures. Therefore, I'm reluctant to degrade too far the
quality of the images that they are looking at, i.e. the small ones on
the pages themselves.
I appreciate your tip about the CSS2 style support of the Gecko
rendering engine.
Bug 151375: focus outline should be drawn outside of element
http://bugzilla.mozilla.org/show_bug.cgi?id=151375
was fixed about 3 weeks ago and has been implemented only in 1.8a2+
branch so it is not in NS 7.2 and Mozilla 1.7.x releases.
I was afraid that this would be the case. Its a shame that the browser with the vast majority of the market share is
slothful and stagnant. Thanks again for your help.
Chris
Well, I'm pretty sure you could/can code around this difficulty but
you'll have to use the proprietary and non-standard hidefocus attribute.
DU This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Chris Bradbury |
last post by:
Hi,
I'm posting in this forum for the first time so if I break any conventions
or protocols I'm sorry.
I've attached this style:
*:focus { outline: none }
to a page but it doesn't remove...
|
by: Mark Johnson |
last post by:
You have an, a, anchor with href link.
Can you use a stylesheet to effectively disable the link, so that you
can't click on it; that it will appear simply as text?
|
by: s_m_b |
last post by:
I'm trying to get an <a> element to gain the focus onload, but only get
back 'has no properties'.
Reading through this ng, its clear that unless the element is within a
form, this doesn't happen,...
|
by: opt_inf_env |
last post by:
Hello all,
I know that in html to set colors of visited and activ links one need
to use line in the following format:
<BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00">
...
|
by: Stefan Mueller |
last post by:
With the following code I try to set the focus to the first anchor just
after the page has been loaded. However, it doesn't work. Exactly spoken the
focus is set to the first anchor (if you press...
|
by: neihc2 |
last post by:
Hi,
For some pages I'm styling, the focus rectangle around a link appears just fine in Firefox.
However, they are not appearing at all in IE.
I don't think there's anything in my css file that...
|
by: john ciriello |
last post by:
I created a form and put a button and a label on it. I set the tabstops to
false. When I first run it I can click the button and there is no focus
rectangle. Which is what I want. However, if I...
|
by: john ciriello |
last post by:
Hey Peter, if you see this I tried to respond but the server rejected the
request. Here's my reply to your responce. Thanks.
Hi Peter, thanks for the reply. I should be more specific though. If...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
