CSS and Z-Index Help

I bought an HTML5 template and have adjusted it for our website at www.post22baseball.com

I am having one major issue  with compatibility - in IE I can force it into compatibilty and the tabs to the right of the photos work (Hardhats, Expos, Bullets) but they do not in Safari, or Firefox)

I am at a loss as to how to get it to work in all browsers. Does anyone have any suggestions for me? I am attaching the CSS file
style.css
katleesAsked:
Who is Participating?
 
s8webConnect With a Mentor Commented:
Take a look at bootstrap. It might give you a head start. I'm all about writing my own code, but I'm also about not reinventing the wheel.

http://twitter.github.com/bootstrap/
0
 
rakjoshCommented:
for browsers compatibility, you can write conditions and include different file for browsers as well as you can use css filters like
.cssClass {

}

* + hml .cssClass {

}
0
 
s8webCommented:
The plot thickens. In Chrome and FF (I am using Linux) the entire area under the header does not respond to a hover or click. Something seems to be covering the bottom portion.

I would start with Cufon. Comment it out and see what happens. The use of Cufon is very heavy. You shouldn't need to use Cufon that much any more. Take a look at @font-face. Give http://www.fontsquirrel.com/ a quick look.

If that doesn't do it:

Try commenting out your header, then see if the rest of the page works properly. If that isn't it, I would recommend commenting out elements on the page until you find the culprit. Do the same with your JS includes if that is unsuccessful.

If you aren't too committed to this template, I would consider a different one. If you plan on future expansion/development, you're going to have issues. It shouldn't be necessary to use z-index that much, or in the way it's being used. It also looks like this template uses a mix of old and new. The positioning for this type of layout can be done in a much simpler way.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
katleesAuthor Commented:
I removed each style sheet and js page one by one and tested it and none of it worked. Taking out the header didn't work either.

I really don't want to rewrite the whole thing but it looks like that is what I will need to do.
0
 
s8webCommented:
What happens if you swap the html5 containers out for divs?
0
 
COBOLdinosaurCommented:
I don't know what you paid for that, but it is basically a waste of money.  It is crap.  I suggest you start over by writing your own CSS and testing for compatibility as you go.  IE9 is less than 50% compliant with current standards, and earlier IE versions support very little.  There are also differences between what the modern browsers support.

There is no off the shelf template that solves the problems for you.  You have to do the work and test at each step.


Cd&
0
 
katleesAuthor Commented:
s8web - it does the same thing... Looks like I'll be recoding it...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.