Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 182
  • Last Modified:

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
0
katlees
Asked:
katlees
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
s8webCommented:
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now