Solved

CSS and Z-Index Help

Posted on 2012-03-11
7
173 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Salesforce Apex not same result as my HTML page. Salesforce breaks it. 3 35
Creating a slider 12 44
get multiple images to align right 5 44
CSS issue 8 0
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now