Weird interaction between <a> and <dl> in Firefox 1

[dspitzle]

This is a weird one. I'm putting up a site for fun, and I've got a problem. I'm trying to put a hyperlink in an entry of a definition list, i.e. <dl>. For some reason the presence of the hyperlink breaks the indentation ofthe containing list element in Firefox, whether the hyperlink is inside a <dt> or a <dd>. The affected page is here:

http://www.davidaspitzley.org/BottomFeeding/#Sources

and appears under the heading "Sources for Cheap Music", right at the words "Lakeside Mall". The weird thing is that IE doesn't appear to have this problem; it displays the indenting just fine. I've validated the page at W3C, and everything is valid except for unencoded ampersands in the Amazon links, which I'm just going to live with to preserve my sanity.

So, any suggestions? Is this a Firefox rendering bug (in which case I expect it may be cleaned up in a couple of weeks)? Is there any sort of fix people can suggest?

 

[vongrunt]

Are you sure this is about hyperlinks? DT and DD are block elements, so looks like FF does it right.

Try dt { display: inline; } in .css file.

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[dspitzle]

No, I >want< the dt to behave as a block element. The problem is that the <a> tag, which is an inline element, seems to be forcing a line break, but only in Firefox. I have no idea why this is happening.

 

[vongrunt]

Perhaps this:

<h2><a name="Sources" />Sources of Cheap Music[b]</a>[/b]</h2>

?

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[dspitzle]

Nope. If you'll notice, the opening tag includes a closing slash as well; that's an anchor, not a link.

 

[vongrunt]

OK, XHTML thingie... have you tried </a> anyway?

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[BillyRayPreachersSon]

Personally, I would use this:

<h2><a name="Sources"></a>Sources of Cheap Music</h2>

which works just fine in IE and FF.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Foamcow]

Why would you close the anchor and then close it again?

Dan's suggestion makes more sense.

better still do something like this

<h2 id="Sources">Sources of Cheap Music</h2>

...

<a href="#Sources" title="Jump to Sources of Cheap Music">Cheap Music Sources</a>

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[vongrunt]

IIRC at least in vanilla HTML 4.0, <A> has no optional ending tag (</A> must be always specified, even for named anchors without visual presentation). I'm not sure about XHTML but looks like <a .../> confuses Firefox while IE tends to be smart as usual.

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[Foamcow]

Since in XHTML all tags must be closed it is reasonable to assume that <a ... /> is permissable.

However to link to a named anchor the method I showed would be, I think, the "correct" way to do it.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Foamcow]

In any case the name attribute is deprecated in XHTML 1.0

http://www.w3.org/TR/xhtml1/#C_8

Finally, note that XHTML 1.0 has deprecated the name attribute of the a, applet, form, frame, iframe, img, and map elements, and it will be removed from XHTML in subsequent versions

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[dspitzle]

Well, it looks like vogrunt called it. As soon as I switched from the <a /> to <a></a>, the line break went poof. Thanks Mr. V!