-
Posts
-
Hi,
I’ve just tested this template (even your very own demo) in IE8 with and without Compatibility View on and it’s totally messed up. Every last column in Compatibility View is sent to a new row, all icons like the search icon in the header or icons in buttons are unrecognized and transformed into a pause-like symbol.
Positioning of many items are totally out of place. Yet when I check again on the compatibility listed for this template on themeforest.net it says it is compatible with IE8. How so? As in, the information is there, that’s it?
Operating System I’ve tested IE8 on is Windows 7.
Hi DavyE,
Not sure what you mean. Testing with IE8 on Windows 7 here as well and the demo as well as my test installs display mostly normal. There are a few visual differences and even a few bugs but nothing like you are describing.
I’m not really sure how the discrepancy is so large though.
Regards,
Devin
Don’t get me wrong, I really love this theme. It would be a really big disappointment if I couldn’t use this theme because of that. Sadly enough, many of our visitors are still using IE8 (especially Comp View), so I have no other choice than to keep that optimized.
I’ll try to take some screenshots of your own demo to show you what I mean. This way we can already eliminate the option of something gone wrong when I set up the template.
Hello again,
I’ve taken some random screenshots from across your demo site, this is in IE8 Compatibility View. The difference between the view on or off is mostly the columns being forced to a new row, with the view off the other issues are still there such as missing icons etc. See the link below:
https://www.dropbox.com/sh/aofspmzyyz8o6e5/T7Sf_S_oFf
So columns are forced to a new row, icons are missing, galleries are thousands of pixels high, some images are completely out of proportion, and so on.
Let me know if you would like any screenshots of specific areas/pages.
I wonder what could be the cause of this, and hope this is mainly my local browser and not how other people with IE8 see it.
Just tested it on my colleagues’ laptop and it seems a little better in normal IE8 view, but pretty much the same in Comp View. The search icon is OK on that laptop, while the slider icons are just plain squares, like mine.
The icons being squares, hover effects, drop shadows and all of those kinds of effect will definitely not work in IE8. At this point, IE8 compatibility is almost just keeping the data where it should be and then making it the best it can be.
If there is a specific issue with columns, I’m not seeing it on my end but with IE…it could be any number of reasons.
not sure how this isn’t a huge issue. Mine is really messed up in IE8 as well. The entire header is black out and the logo becomes a mess. (the header is supposed to be white)
my suspicions are the fixed header code.
If we can take a look at your site live, we can investigate further. As I said, on my personal site, the demo and my local test install there are no major issues with IE8 and that is using a native IE8 install and not any kind of online preview service which tends to have major issues with transparencies and general javascript effects.
Regards,
Devin
yes please: http://amerifirst.us/
here is the code for my header. Do you see anything unusual? anything I can add to get the IE to not make the header all black?
<?php
global $avia_config;
$style = $avia_config;
$responsive = avia_get_option(‘responsive_layout’,’responsive’);
$blank = isset($avia_config) ? $avia_config : “”;
$headerS = !$blank ? avia_header_setting() : “”;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class=”<?php echo ” html_$style “.$responsive.” “.$headerS;?> “>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<?php
/*
* outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
* located in framework/php/function-set-avia-frontend.php
*/
if (function_exists(‘avia_set_follow’)) { echo avia_set_follow(); }
/*
* outputs a favicon if defined
*/
if (function_exists(‘avia_favicon’)) { echo avia_favicon(avia_get_option(‘favicon’)); }
?>
<!– page title, displayed in your browser bar –>
<title><?php bloginfo(‘name’); ?> | <?php is_front_page() ? bloginfo(‘description’) : wp_title(”); ?></title>
<!– add feeds, pingback and stuff–>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”alternate” type=”application/rss+xml” title=”<?php echo get_bloginfo(‘name’); ?> RSS2 Feed” href=”<?php avia_option(‘feedburner’,get_bloginfo(‘rss2_url’)); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<!– mobile setting –>
<?php
if($responsive === ‘responsive’) echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>’;
?>
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body id=”top” <?php body_class($style.” “.$avia_config.” “.$blank); ?>>
<?php if(!$blank){ ?>
<div id=’header’ class=’ header_color <?php avia_is_dark_bg(‘header_color’); ?>’>
<?php
$social_args = array(‘outside’=>’ul’, ‘inside’=>’li’, ‘append’ => ”);
//subheader, only display when the user chooses a social header
if(strpos($headerS,’social_header’) !== false)
{
?>
<div id=’header_meta’ class=’container_wrap container_wrap_meta’>
<div class=’container’>
<?php
/*
* display the themes social media icons, defined in the wordpress backend
* the avia_social_media_icons function is located in includes/helper-social-media-php
*/
if(strpos($headerS,’bottom_nav_header’) === false) avia_social_media_icons($social_args);
//display the small submenu
echo “<div class=’sub_menu’>”;
$args = array(‘theme_location’=>’avia2’, ‘fallback_cb’ => ”, ‘container’=>”);
wp_nav_menu($args);
/*
* Hook that can be used for plugins and theme extensions like the wpml language selector
*/
do_action(‘avia_meta_header’);
echo “</div>”;
?>
</div>
</div>
<?php } ?>
<div id=’header_main’ class=’container_wrap container_wrap_logo’>
<div class=’container’>
<?php
/*
* display the theme logo by checking if the default logo was overwritten in the backend.
* the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
*/
echo avia_logo(AVIA_BASE_URL.’images/layout/logo.png’, false, ‘strong’);
/*
* Hook that can be used for plugins and theme extensions like the wpml language selector
*/
do_action(‘avia_main_header’);
if(strpos($headerS,’social_header’) !== false && strpos($headerS,’bottom_nav_header’) !== false) avia_social_media_icons($social_args);
/*
* display the main navigation menu
* modify the output in your wordpress admin backend at appearance->menus
*/
$extraOpen = $extraClose = “”;
if(strpos($headerS,’bottom_nav_header’) !== false){ $extraClose = “</div></div><div id=’header_main_alternate’ class=’container_wrap’><div class=’container’>”; }
echo $extraClose;
echo ‘<div class=”avia-button-wrap”><span class=”avia_iconbox_title”>MORTGAGE CALCULATOR</span></div>’;
echo “<div class=’main_menu’ data-selectname='”.__(‘Select a page’,’avia_framework’).”‘>”;
$args = array(‘theme_location’=>’avia’, ‘fallback_cb’ => ‘avia_fallback_menu’, ‘walker’ => new avia_responsive_mega_menu());
wp_nav_menu($args);
echo “</div>”;
?>
<!– end container–>
</div>
<!– end container_wrap–>
</div>
<div class=’header_bg’></div>
<!– end header –>
</div>
<?php } //end blank check ?>
<div id=’main’>
I would first say update your theme files to the most recent version as there have been a number of fixes released even since 1.2.
For the header background, you can add this to your quick css if the update doesn’t fix it:
#top .header_bg {
background: #fff !important;
}Regards,
Devin
this did not work:
#top .header_bg {
background: #fff !important;
}
sorry, see last post. I will try to upload new theme if you think its the best idea.
Here was my css code:
.main_menu ul:first-child > li > a {
font-size: 152px;
}
#header {
position: fixed;
}
I removed the top code and the site renders, but the bottom code cuts off about an inch of each page.
can you please help.
http://www.Amerifirst.us is not rendering. the entire screen is white. I uploaded to new theme 1.3.1 I am at a loss, and may need to can the site completely if I cant get it to work in IE8.
Thanks,
You can’t use the child selector in the css for IE8 as it has no support for it. That is why when you remove the .main_menu css it seems to work better.
You can also try adding this:
html.nonfixed_header .header_bg {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}or this
.header_bg {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
}
- The topic ‘Everything messed up in IE8 (even more so in Compatibility View)’ is closed to new replies.