Link problem with one area in Safari, fine in IE

[kitenski]

Hi there,

I've been editing some CSS to effect some links on my website. I now have the look and feel I was after, but the links have stopped working under Safari on my Mac.

They work fine on my Windows PC using Internet Explorer.

I have no idea why, the code looks fine to me, does anyone have any suggestions?

It's these links

Latest Software | Reviews | Forum | About | Contact | Follow on Twitter

on this page

http://www.pocketpcsoft.net/

Thanks in advance,

Greg

[SilentPanda]

They don't seem to work on Firefox 3.5.2 either in Windows (although I have a few mods installed). You might have some luck debugging from there.

[angelwatt]

The #content part is sitting on top of your floating #nav. If you add clear:both to #content you'll see it fixes the problem. Though, it will also move the content down farther. There's various ways to go about remedying, but hopefully knowing the cause will help you move forward.

[kitenski]

Originally Posted by angelwatt

The #content part is sitting on top of your floating #nav. If you add clear:both to #content you'll see it fixes the problem. Though, it will also move the content down farther. There's various ways to go about remedying, but hopefully knowing the cause will help you move forward.

Thanks alot, that clear has fixed the issue, but are you saying that isn't a good permanent fix?

The actual block of CSS looks as follows, could the postion:relative be the underlying issue?

As you can tell I am new to CSS

#content {
clear:both;
position:relative;
width:985px;
margin:0 auto;
padding:0 24px
}

[angelwatt]

Originally Posted by kitenski

Thanks alot, that clear has fixed the issue, but are you saying that isn't a good permanent fix?

The actual block of CSS looks as follows, could the postion:relative be the underlying issue?

If you're happy with the result of using clear then it's fine as a fix. I just thought you may not like that it moved the content area down and created more of a gap between it and the header.

The relative positioning isn't causing the problem, it's that the nav is being floated, and when that's done the rest of the layout changes its behavior. You should read through a couple CSS float tutorials to get a better understanding of how they are used.