Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS and Z-Index Help

Posted on 2012-03-11
7
Medium Priority
?
180 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
Industry Leaders: 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!

 
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 2000 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

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!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

916 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