...

View Full Version : How do I stop the name anchors from picking up hover attributes?



pjutter
01-26-2007, 04:04 PM
How do I stop the name anchors from picking up hover attributes?

Okay I hope that question makes sense.

On a website I've just developed, I use a lot of anchors to jump around on the pages. I notice that the named anchors pick up the same hover attributes as the links themselves. In case that makes no sense, here's an example. See this page:

http://www.vehiclefinanceconference.com/schedule.html

If I run my cursor over the dark blue heading that says "WEDNESDAY, JANUARY 31, 2007" those words change to the hover color/size of the links in the document. Even though that's the named anchor rather than the link. Is there a way I can prevent that from happening? I mean, I guess I could specify the name without putting anything inside it (<a name="Wednesday"></a>), but I always thought the name was supposed to surround the words.

Any ideas? Does my question make sense?

Thanks, Phyllis

jkd
01-26-2007, 05:36 PM
Try a:link:hover instead of just a:hover.

pjutter
01-26-2007, 05:58 PM
No go -- that removes all the hover effects. :-( I also tried A:hover link but that doesn't work either. Weird.

jkd
01-26-2007, 06:06 PM
You can always do a[href]:hover

VIPStephan
01-26-2007, 06:12 PM
That will not work in IE 6. You shouldn't use named anchors anyway as this method is kinda deprecated (depending on what version of HTML you're using). Any element with an ID can be referenced as anchor point:



<div id="here"></div>


<!-- will jump to the element with ID 'here' -->
<a href="#here>link</a>

(or a URL like: http://example.com/index.htm#here will jump to that element too)

pjutter
01-26-2007, 06:13 PM
That's it!!! Thank you so much!!!!!!

:-)

Phyllis

pjutter
01-26-2007, 06:25 PM
Dang it! Just realized that works in Firefox but not in IE. IE no longer recognizes any of the link attributes. :-(

pjutter
01-26-2007, 06:32 PM
Actually I also just realized that it's only Firefox that's applying the hover effects to the name anchors (IE doesn't). Wonder if I can spec it for both somehow? (Most all my readers will be using Explorer with a handful using Firefox.)

Any ideas?

Thanks, Phyllis

pjutter
01-26-2007, 06:35 PM
Oh I just saw the post from VIPStephan. Dang I have millions of instances of the named anchor in use. :-( Guess I need to learn newer HTML. Maybe I can still figure something out though....

Thanks, Phyllis

jkd
01-26-2007, 07:38 PM
If IE has the desired behavior and Firefox doesn't:


* html a:hover, a[href]:hover {

}


That should take care of it?

pjutter
01-26-2007, 10:08 PM
Hm, couldn't get it to work just now but I'll try again in a bit (ugh, got busy at work). Will report back on whether I have any progress.... Thanks for all the help!

Arbitrator
01-26-2007, 10:54 PM
Change: <h3><a name="Wednesday">WEDNESDAY, JANUARY 31, 2007</a></h3>
To: <h3 id="Wednesday">WEDNESDAY, JANUARY 31, 2007</h3>

Using name attributes to refer to part of a document is deprecated (obsolete) in favor of id attribute references.

Problems with the browsers may be related to the page being rendered in backward‐compatibility (quirks) mode (http://hsivonen.iki.fi/doctype/) in both Firefox and Internet Explorer. The page is being rendered in that mode because the HTML isn’t properly declared; the document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html) is missing. The document also contains numerous errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.vehiclefinanceconference.com%2Fschedule.html). Additionally, the CSS document contains errors (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.vehiclefinanceconference.com%2Fstyle.css).

pjutter
01-29-2007, 04:26 PM
Thanks for everything. I'm slowly trying to change the names to ids as I work on different pages of my websites. I appreciate the help!

Phyllis

pjutter
01-29-2007, 05:42 PM
Is it acceptable to use "id" with any tag? For example, I've defined big in the stylesheets. So then will

<big id="whatever">

work with most browsers? Or should I start using span tags?

Thanks, Phyllis

VIPStephan
01-29-2007, 05:49 PM
<big> is no HTML tag/element. However, I think I've seen Firefox picking up styles on non-official elements. Anyway, you won't get far with it if it comes to cross browser compatibility.
To answer your question: Yes, you can give any (HTML) element an ID but be aware that an ID is unique and can be used once on a page/document only.

And you should assign IDs to elements you have already got in your HTML document and not define styles and then write the HTML for it.

pjutter
01-29-2007, 05:53 PM
<big> and <small> used to be tags. As far as I can tell, the browsers all still recognize them. I use them when I want a tag that I can work with which won't be written by a program like Dreamweaver. (If I switch to using Dreamweaver I can count on its never writing the tag big and messing up my styles.)

I would use Dreamweaver more often (which would probably make my HTML more current) except that I almost always have better luck cross-browser by just writing the HTML. The HTML editors often seem to do things that only look correct in the editor.

I guess I'll try span for now in case I eventually want to ditch the big tag.

Phyllis

pjutter
01-29-2007, 05:57 PM
And you should assign IDs to elements you have already got in your HTML document and not define styles and then write the HTML for it.

I don't think I follow this sentence. What's that about not defining the styles?

Thanks, Phyllis

VIPStephan
01-29-2007, 05:57 PM
Oh sorry, you're right. Big actually is official HTML. Never used it, that's why I was mistaken. You can use this element and assign an ID without problem. But only one unique ID per page, alright? :)


It sounded like you were writing styles in your CSS and then write your HTML after that. That's why I said you should use the HTML elements you've got before applying styles. You should write your HTML so that people get the message even if there are no styles applied. Then use this plain HTML page and apply styles. It has been done this way on http://csszengarden.com

pjutter
01-29-2007, 06:02 PM
Ah I get it. My page is full of lines similar to

<big><a name="A">A</a></big>

with various letters of the alphabet. So I'll start switching those to

<big id="A">A</big

and similar. That's correct?

Cool that <big> and <small> are real tags! I wondered where I'd gotten them. They're definitely convenient since the HTML editors don't like them for some reason....

Phyllis

VIPStephan
01-29-2007, 06:11 PM
Maybe the reason why HTML editors don't like them (and I never used them) is because if your page is properly (semantically (http://brainstormsandraves.com/articles/semantics/structure/)) coded you'll barely need them. It's probably better to use span elements as they are semantically neutral and can be styled with CSS to make content look different.

Could we have a look at your code to determine what's the best practice?

pjutter
01-29-2007, 06:21 PM
Hm, you want me to attach a file from the site I'm working on? Okay here's one. I'll warn you that my code is filled with weird ways of doing things. :-) I haven't even switched to letting the editors write rollovers for me yet. I'm archaic!

If that's not what you meant, here's the actual page I'm working on though I haven't uploaded the changes yet:

http://www.vehiclefinanceconference.com/attendees.html

Note that I am not responsible for the incredibly boring material on this website.... ;-)

Thanks for all the help!
Phyllis

VIPStephan
01-29-2007, 06:34 PM
You don't have to apologize. We all are here to learn.
Now I'm just paying attention to the <big> and <small> content. It is as I thought. This "list" could be styled much more semantic:


<dl>
<dt id="a">A</dt>
<dd>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</dd>
<dt id="b">B</dt>
<dd>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</dd>
<dt id="c">C</dt>
<dd>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</dd>
...
...
</dl>

and then you would use CSS to style the content:


dt {font-size: 1em;}
dd {font-size: .8em;}

(sizes are just examples)

pjutter
01-29-2007, 06:40 PM
Good idea! I've got to start using styles more effectively. I learned HTML and basic CSS quite a few years back. It's become much more complex since then.

I'll start with fixing the name anchors and then try to improve the overall code... I know I throw in a lot of things like "style=" in when I'm in a hurry instead of just speccing everything in the stylesheet. I have yet to learn positioning with stylesheets (I use tables).

Thanks for your help!
Phyllis

pjutter
01-29-2007, 06:43 PM
BTW I do style big and small on the stylesheets. A generic tag might be better though...

I sometimes spec <b> on a stylesheet too since Dreamweaver prefers <strong>.

I'm probably a good example of practices to avoid.... ;-)

Arbitrator
01-29-2007, 09:25 PM
<big> is no HTML tag/element.Sadly, it is an official element defined in the HTML 4.01 specification (http://www.w3.org/TR/html401/present/graphics.html#edef-BIG).

Didn’t catch that VIPStephan already corrected that. Actually, I didn’t catch most of the second page. Guess I’m still not awake yet.
Stylistic elements such as b, big, br, i, s, small, strike, tt, and u should be avoided in favor of semantic or neutral elements. Using a neutral span element with a class or ID name that describes what’s special about its contents keeps the style (CSS) separate from the structure (HTML). Examples of good class and ID names are things like “title”, “header”, “special”, “cool”, “favorite”, “deprecated”, “new”, etc. Bad names describe the style: “big”, “small”, “Verdana”, “rightColumn”, “centered”, “red”; if you use stylistic names and change the style sheet later, you may end up having to change the class or ID name too. For example, if you use the name “rightColumn” and then decide it looks better on the left, the class or ID name becomes inaccurate and you have to change not only the CSS, but the HTML too.

If you need to emphasize something, the em and strong elements are also good for that. If you need more than two levels of emphasis, you can mix the tags to show the level of emphasis and use CSS selectors to style them appropriately. Examples:

HTML:

<em>Emphasized</em>
<strong>Strongly Emphasized</strong>
<strong><em>Very Strongly Emphasized</em></strong>
<strong><strong><em>Very, Very Strongly Emphasized</em></strong></strong>

CSS:

em { font-style: italic; }
strong { color: red; font-weight: bold; }
strong strong em { font-size: larger; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum