Solved

CSS and Z-Index Help

Posted on 2012-03-11
7
174 Views
Last Modified: 2012-03-20
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
Comment
Question by:katlees
7 Comments
 
LVL 1

Expert Comment

by:rakjosh
ID: 37708920
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
 
LVL 16

Expert Comment

by:s8web
ID: 37709028
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
 

Author Comment

by:katlees
ID: 37709823
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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 16

Expert Comment

by:s8web
ID: 37710047
What happens if you swap the html5 containers out for divs?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37710349
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
 

Author Comment

by:katlees
ID: 37710462
s8web - it does the same thing... Looks like I'll be recoding it...
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 37713849
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question