Named anchor assumes target "top" ?

[MBScott]

using xhtml 1 strict. I have a named anchor that's kind of in the bottom half of the page. When you click on the link to it

<a href="#question">Ask a question</a>

it works fine, except that the default behavior is to remove all the code ABOVE it and move this element to the top. This removes all the left AND right side content from the page.

It just looks bloody odd. I want people to click on the "Ask a Question" link and get moved right to the form, but without taking out the rest of the page content.

Possible in XHTML?

TIA,

Missy

[AutisticCuckoo]

Well, you could achieve that effect using position:fixed for everything that should stay put, but I wouldn't recommend it. What you describe is the default behaviour of anchor links and it's what users are likely to expect.

The alternative is to use frames, but then you'll have to abandon XHTML 1.0 Strict and revert to the deprecated Frameset or Transitional DTDs.

I'd just leave it alone. You could add a 'back to top' link after each answer.

[MBScott]

But, but...

Seriously, it removes all the content that comes above the anchor, so even putting a "back to top" link... there's nothing to go back to!

This annoys me... took a perfectly good tag and ruined it!

Thanks for your time!

Missy

[AutisticCuckoo]

Then there's obviously something more to this than the code fragment you posted. Can you post a link to the actual page?

[MBScott]

Gladly:

http://travelbygps.com/maps/newlayout.php

Anywhere in the middle data table, where there is a contact link, you can see what happens.

Thank you!!

Missy

[MBScott]

Also, I've been playing around with this for an hour or so. The behavior does not change if I:

set a named anchor like <a href="question"></a>

or

move the form around in the page

or

Use id in any element like: <a href="question" id="question"></a> or <form id="question">form contents here </form>

or

add ANY "target" definition... _blank or _parent or whatever

AND

it happens in IE7, Firefox3, and Safari!!

So, I'm completely stymied!

Missy

[AutisticCuckoo]

Odd. I've only got Opera 9.64 and Firefox 2 on my Linux machine. The effect you're describing happens in Firefox, but not in Opera.

I don't know what causes it, but the markup is badly invalid (131 errors). You really shouldn't use an XHTML doctype with that sort of markup, since it relies on being served as HTML. If served as real XHTML that page wouldn't render at all; you'd just get an error message.

I don't think it's likely that those errors cause the weird phenomenon, but you should always make sure your markup and CSS are valid before starting any other form of trouble-shooting.

[MBScott]

I know, the markup is bad, but it's not my site. I'm troubleshooting for someone else, so the markup isn't up to me to change.

<< shrug >>

thanks for looking, though.

Missy

[AutisticCuckoo]

I've had a look in Firefox 3 and Firebug at the office. My guess is that the phenomenon has something to do with the CSS used to simulate equal-height columns. I could be wrong, though.

The columns have margin-bottom:-1000em and padding-bottom:1000em, and I think it's this that might bollock things up.

[MBScott]

You are a genius! This is exactly the problem.

Now, how to have everything??? Better to have the named anchor work as intended or hack the css so the side columns can be flexible and all the same color.

Thank you again for looking... I appreciate it very much. That would have driven me nuts to never know why. If I can ever return a favor, let me know.

Missy

[AutisticCuckoo]

There are better hacks to simulate equal-height columns. You can use wide (em-sized, even) borders on the wrapper container, for instance.

In my opinion, even forgoing the side column colours would be better than the major usability problem you have right now. But that's just my opinion.