Please Help with CSS Nav Tabs

L

lectric

New Member
Hi all,

I am a non-professional web designer, building a site for my martial arts school. The temp site is here: http://www.machatz.com/temp/

The main problem is that the nav tabs have a different vertical position in EVERY browser -- not just FF and IE, but FF on a Mac vs FF on Windows, Safari, IE, every one is different.

I have used this CSS tab script before on other sites (http://www.jessestern.com, http://www.themeditationpodcast.com), but this is the first time I've encountered this problem. If possible, I would prefer to avoid Javascript, or writing a separate CSS file for every browser (that just seems lame). I would very much appreciate any feedback on this issue.

FYI, they look right in FF on a Mac, are about 1px too low in FF Windows, are 5px or so too high in Safari, and are maybe 13px too high in IE.

One other issue is the graphic at the top left. There is a seam between the black of the graphic and the black of the background. Any suggestions on getting rid of this?

Thanks!
 
L

lectric

New Member
Sorry about that. Despite annoyances, it is now posted at http://www.machatz.com

The CSS is at http://www.machatz.com/style/style.css

This is really weird. I've never seen a page behave so differently in EVERY browser. I did the _ and # tweaks to make it look ok in IE7. It looks correct on FF Mac and IE7. It's a tiny bit too low on FF Win, and a bit high in Safari. I was unable to test IE6.

The code that moves the tabs is the padding line under #header ul. Basically, this is what it needs:

FF Mac padding:23px 0;
FF Win padding:22px 0;
Safari padding:25px 0;
IE7 padding:21px 0;

Like I said, I've used very similar menus in other web sites, and have never had this problem.
 
adamblan

adamblan

New Member
It looks ok to me in Fx & IE6...

If you you're still having problems, place an absolutely positioned div as a nav container.;)
 
You must log in or register to reply here.
Top