*[Solved] Hyperlinks not working…? – Unsolved: IE7 Positioning Issues

[HeatherFeimster]

Working on a splash/landing page for a site that is in the works. I’ve put in some social media links in the main content area, but for some reason my “a” elements aren’t linking. The social media links in the footer do work, so I’m confused on what’s happening.

I’m testing in Firefox 3.6.9 and even Firebug shows the “a” elements, but the links aren’t working. Safari also shows broken links.

Any suggestions? Does it work in any other browsers?

Thanks!

http://themolehillproject.com/kingarthurjewelry/

[Bob]

Your links in both the footer and header seem to work fine though.
The “sign up for our email newsletter” and the e-mail image right next to it don’t have links yet, so that’s correct they don’t work.

About the other links though; I don’t really know. After disabling all css with the Web Developer toolbar (firefox) they worked though, so it seems its the CSS thats causing problems here.

Edit: when I drag from just below a link, hold the mouse button down and hover over where the link should be, my mouse pointer turns into a hand, indicating its a link.

[shagzdesign]

remove the z-index from here and it works fine

#contentwrapper {

overflow:auto;

position:relative;

top:-75px;

width:100%;

z-index:-1;

}

[HeatherFeimster]

Thanks guys. I totally see what you mean. What’s frustrating is that I used the z-index to bring that top little scroll over the main content box. Any suggestions on how to do that without z-index so that the links work?

Thanks, again!

[hashishin]

Dear HeatherFeimster,

your site seems to work well without

z-index:-1;

If not, and I just cant find the problem area, try to edit this section (problem area) only. Never change everything to get just one thing working.

Patrick

[HeatherFeimster]

Thanks, Patrick. Yes, the z-index seems to be the issue.

I originally used the z-index to slide the main content box (the blue one) up “behind” the header graphic, thus making the little top right “scroll” graphic show up over the box.

What I’m trying to figure out is another way to overlay the scroll at the top, without the z-index attribute. Of course, I don’t want to compromise the integrity and usability of the site for the visual, but I want to try to stick to the design if I can.

Ideas?

[hashishin]

Hey Heather, now I get what you want to do! Sorry, I’m lame ;-)

Here is, how you have to change your css. After this, you have to correct some small issues for correct design, but you will see it yourself and it should not be to hard.

#header {

height:313px;

margin:0 auto;

position:fixed; /*Important!*/

width:100%;

z-index:1;



#contentwrapper {

margin-top:250px; /*Need space to the top, so it doesn't start under the header*/

overflow:auto;

position:relative;

width:100%;

}

Hope, this is what you want to do ;-)

Kind regards
Patrick

[HeatherFeimster]

Thanks for all the help! I’ll try implementing this tomorrow. I’ll post with my results.

Best,
Heather

[HeatherFeimster]

Thanks for your input Patrick – I did make a couple fixes but your positioning changes gave me the prod I needed.

Instead of using “fixed” (this kept the image at the top, even when I scrolled), I used “absolute” and it works perfect!

I also adjusted the #contentwrapper margin to equal the #header height and voila – perfecto!

Gotta love these forums :)

Final Site: http://kingarthurjewelry.com/

[zackw]

just so u know it looks like your homepage fails in ie7, your content area is going up underneath your navigation and header

[HeatherFeimster]

Hey Zackw – could you post a screenshot? I have a Mac so IE is the bain of my coding :-) Thanks!

[hashishin]

Dear Heather,

their is a nice site: browsershots.org
Also their are emulators for mac, so you could use spoon (xenocode), to test it.

[HeatherFeimster]

Thanks, Patrick. I used IE NetRenderer. It was a lot simpler than Browsershots. I’m still working on the issue. Thanks!

[zackw]

I downloaded IE Tester, it allows u to test in all version of ie down to like 5, not sure if its for mac though but definetly worth getting if u can

[HeatherFeimster]

Awesome! Thanks for all your helps and tips guys! So looking at this IE7 issue, I’m contemplating some browser detection to specify a different styling for just that instance. What are your thoughts?

[Author]

Posts