Links Not Working

[MstrBob]

Well, I wasn't sure if it was HTML, CSS, Browser Issue, or a combination, so I posted here. I'm working on a personal site for my sister (http://krummette.wdhaven.com/) (her design). I've been very good with it. It validates as XHTML 1.0 Strict, there are no CSS warnings or errors, Validates WAI Accessibility, I've used all semantic mark-up, and it looks the same in Opera, IE, and Mozilla. I thought I was in the clear.

Silly me. It's still a mock-up (no content yet), and the some of the links are broken, I know that. But the links AREN'T WORKING in Mozilla and Opera. I haven't the fuzziest why. With IE it's fine, but Mozilla and Opera won't produce the hover affect or EVEN LET ME CLICK THE LINKS. The links in question are on the left column. I organized it into 3 different unordered lists, seperate by a horizontal rule and header. And only the last unordered list of links works. Why? Why? WHY?!!

[sharkey]

This is weird very weird none of the links on the left work no hover feeling or the links dont even act as if they are text.

Ive never came across this problem before.

[pyro]

The problem is the position: absolute; for the #header span declarations.

You've got a couple of options. The first, is to add position: relative to your styles for #header.

Other than that, you can remove position: absolute from #header span styles and add display: block. Then add a style to remove the <h1> inside the <div id="header"> tag. eg:
#header h1 {
display: none;
}

[sharkey]

Can i please ask ryan how you found out that the position:absolute was the problem it takes me years to find errors like that.

How do you do it.

[pyro]

Originally posted by sharkey
Can i please ask ryan how you found out that the position:absolute was the problemSure. ;)

I suppose it's just a knowledge of how CSS works. position: absolute will place the element absolute to the entire page, unless it is in an element with position: relative set. For instance, remove the no-repeat for the #header span background image, and you'll be able to see that the span actually covers the links, thus making them un-clickable. Since no-repeat is set on the image, you can't see that it is happening, but it still is.

[sharkey]

ah thanks again mate.

Cheers
Chris Sharkey

[pyro]

Sure thing. :)

[MstrBob]

Thankyou so much pyro, thought I was insane. Well, I can click my links alright. But now I have the issue, if a user comes along with CSS but with Images Off, the header is empty. Is there any workaround that allows me display the header if images are off, but CSS on, and allows me to use links? Or am I asking for too much?

[pyro]

Take a look here for a few methods: http://www.stopdesign.com/articles/replace_text/#notes

[MstrBob]

Thankyou pyro! You're description of the problem actually gave me an idea. I set the links <div> to position:absolute; to gain control of the z-index and set it higher than the header, so now it's all on top. Works beautifully!