CSS problemn Autofocus+ WordPress
- SOLVED
I have installed the Autofocus+ theme at my website. However i now see that the lay out is not correct in IE (7&8) - but ok at Firefox and Chrome.
I also checked other website which use this theme and they have the same problem:
- frontpage is shown not correct: margin under header is gone so block of photo's is above the header.
- text on the block photo's is shown double.
for more info check out: www.paulaalonsodrawings.com
What is wrong? And how can i fix it?
Cheers PJ
Answers (5)
Peter Franken answers:
Have you checked the css style sheet on errors. I believe the css contains some missing "px" at some parameters.
PJ Javisst comments:
thanks, i am checking it right now.
Milan Petrovic answers:
Fixing the theme to work in IE with such advanced CSS/JS effects will take a lot of time, and most likely theme author decided not to do it in the first place. Also, it can be quite impossible.
PJ Javisst comments:
but isn't the theme then worthless, because 90% of the people are using IE?
Lew Ayotte answers:
It actually looks fine in IE8, depending on which mode you are using...
You're going to need to setup different CSS styles for IE8 and IE7 to make everything work. You can do this by adding this to your header.php:
<!--[if IE 7]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie7.css" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie8.css" type="text/css">
<![endif]-->
Then just add your IE specific CSS files to fix the issues on the site.
You can also use this [[LINK href="http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en"]]IE Developers Toolbar[[/LINK]] to help you troubleshoot your CSS issues.
Lew
PJ Javisst comments:
In general it is known that IE handles padding/margins differently. So this would explain the disappearance of the space between header and block of photo's.
But i do not understand why the text above the block of photo's is double
WP Security answers:
Try adding the following code to your header.php file:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Place it just below, <head profile="http://gmpg.org/xfn/11"> and above the title tag.
PJ Javisst comments:
...this compatibility tag is already in the header.php. But this did not solve the problem.
Rashad Aliyev answers:
If you still not solved it, you can contact with me.
PJ Javisst comments:
the problem is still there....how can you help me?