Hey all, new here =]

I'm a PHP dev at heart and I was given this site to work on but the CSS was so bad that I rewrote the entire thing myself with no knowledge at all, I just kinda learnt as I went along. Anyway I've managed to get everything just how I want it, the last thing however is driving me crazy and it's all the stands between the design and the finish line.

http://www.urbanglobe.co.uk/design/

The tabs seem to work fine in Safari, but in nothing else. Also when I change font size the tabs seem to move a few px up or down, is there a way to like fix how tall they are, then align the bottom of the tabs with the bottom of the top gray bar, the top gray bar is a repeated image and therefore will not change size.

Thanks, Dan.

Tabs are working just fine in Firefox. They are not working in IE6 - no big surprise there.

You have to get rid of this for IE

<?xml version="1.0" encoding="utf-8"?>

With that appearing at the top of your document, IE will render your code in QUIRKS mode, and that's a real mess.

You have invalidly nested code on your navigation here:

<a href="/"><li id="nav-home">Home</li></a>
<a href="/"><li id="nav-register">Register</li></a>
<a href="/"><li id="nav-community">Community</li></a> <a href="/"><li id="nav-purchase">Purchase</li></a>
<a href="/"><li id="nav-help">Help</li></a>

The links need to be INSIDE the <li> tags, not outside them:
<li id="nav-home"><a href="/">Home</a></li>

Fix those things - and your myriad other code errors and see where that leaves you.

I just checked in FireFox, it's not working properly. The bottom of the tabs shouldn't be in the white, they should be sitting along the top of it like a tab. I removed the XML tag at the top, but I need the invalid a href things to make the entire tab act as a link rather than just the text.

Still got the problem, any one else have a solution?

You don't need invalid markup to make the tab work as you wanted. It may take some slight re-tooling your code, but tabs are done with valid code every day.

Well, since I don't have Safari, it was impossible for me to see what you actually wanted, and you didn't specify what was wrong. It's not unusual for people to deliberately place a nav bar between two colors.

All you have to do is change the top margin on #nav to pull it up :

#nav ul {style.css (line 20)
display:block;
font-family:Verdana,sans-serif;
font-size:x-small;
list-style-image:none;
list-style-positionutside;
list-style-type:none;
margin:100px 0pt 0pt;
padding:0pt;
}

Hey, sorry for not explaining my problem properly, I used your code and although it's fine in Safari it's still problematic in FireFox, here's two pics;

Safari


FireFox


The margin works fine at 112px in Safari, but it needs to be less than that for it to work in FireFox which leads me to believe something else is making FireFox push it further =S

Are you strictly on a Mac ?? MY Firefox, on a PC doesn't do that with the code I gave you - 100Px top margin. There is nothing else pushing it down.