Anchor problem in Mozilla, Firefox but nothing else

[Gnat]

I can't figure out what's causing this. Please help!

Here's the relevant CSS:

.alt {font-style:italic; }
.alt a:link {color: #CCCCCC; font-size: .9em; text-decoration: none; padding: 15px;}
.alt a:visited {color: #CCCCCC; font-size: .9em; text-decoration: none; padding: 15px;}
.alt a:hover {color: red; font-size: .9em; text-decoration: none; padding: 15px;}
.alt a:active {color: #CCCCCC; font-size: .9em; text-decoration: none; padding: 15px;}

And the html:

<div class = "alt" ><a href = "#by" >By Dickinson </a> &nbsp;<a href = "#about" >About Dickinson </a> &nbsp; <a href ="#children" >For children </a></div>

<h2 id = "by" style="padding-top:15px;">&nbsp;By Emily Dickinson</h2>

etc.

IE on Mac & Windows sees these as links; ditto, Opera --but not Mozilla & Firefox--or Safari for that matter; what's even weirder, to my mind is that, using the same CSS on another page, with the following (admittedly hackish) html:

<div class = "alt" style = "padding-left: 35px"><a href= "#Faculty" style=" font-size: 1.2em; padding-left: 25px; margin:0;" >Faculty services </a><br /><br /> <a href= "#Students" style=" font-size: 1.2em; padding-left: 25px; margin:0;" >For students </a></div>

plus:

<div id = "Faculty" style="padding-top: 40px; font-size: 1.3em;"><u>Faculty Services</u></div>

This works. On the assumption that the id tag isn't working with <h2> I tried replacing it with a <div> box, but there was no change. Both sets are in the same containing blocks. Why one but not the other? Anyone have any ideas?

[D_Blackwell]

I'm seeing your links in both Firefox and Mozilla. Looks fine from here.

You could condense the code a bit.

.alt {
font-style: italic;
}
.alt a:link {
color: #ccc; font-size: .9em; text-decoration: none; padding: 15px;
}
.alt a:visited {
color: #ccc; text-decoration: none; font-size: .9em; padding: 15px;
}
.alt a:hover {
color: red;
}
.alt a:active {
color: #ccc;
}

<edit>Took out a little too much. Removing the font-size and padding from a:visited creates some movement.</edit>

[edited by: D_Blackwell at 3:06 am (utc) on May 4, 2005]

[Stormfx]

Not sure what you're saying the problem is exactly, but you can't assign an id to an element to have a link point to that element. What I mean is that the id attribute is not an anchor. You have to use an actual anchor.

For example, change

<h2 id = "by" style="padding-top:15px;">&nbsp;By Emily Dickinson</h2>

to

<h2 style="padding-top:15px;"><a name="by">By Emily Dickinson</a></h2>

The problem with this is that any style affecting the <a> element, such as link, etc will also affect the anchor.

To fix that, take a look here:

[dbaron.org...]

If that's not what you're referring to, ignore me :P

[Shadowkiller]

If you have style set for the <A> element change:

<h2 style="padding-top:15px;"><a name="by">By Emily Dickinson</a></h2>

to

<h2 style="padding-top:15px;"><a name="by"></a>By Emily Dickinson</h2>

The anchor is still valid and will still go where you want it to.