Hey guys,

I’m not running compatibility mode in IE8, it’s simply how it is by default.

I went ahead with all of the custom css you recommended, Ismael (thanks for the help!). Some of it worked and some did not. Here are the remaining issues:

– Menu overlays logo

– Applying the img { max-height: 100% } broke my layer slider (images didn’t fit together anymore, things were off-center), so I didn’t use that

– The ‘You Might Also Like’ images on blog posts are stretched vertically

– The ‘Special Heading’ font is a bit too big/wide and makes several titles stretch into the sidebar, is there a way to reduce the size of these on IE 8 only?

– Most of the icons from the included icon font do not work and appear as 2 tiny rectangles

– My sidebar forms all seem to stretch off the page

– Images in the ‘Recent Posts’ widget only take up a portion of the image holder box

– Images on the ‘Meet the Team’ page go white/disappear on hover

– While there is now a hover effect on the buttons, I would prefer to use the gradients which were previously on the buttons. Is that possible? Or at least make it that way for non-IE8 browsers?

Thanks,

Tom

Thanks, Dude. You just gave me some energy back, as frustration had taken hold. Cheers! DT

Just advising that I’ve solved the issue with the following tweaks.

I was able to identify the elements that needed tweaking:

1) Header block with logo and social/contact info above is now static and “sticky” by choosing Fixed heading in the theme settings. Following code was to fix.

#header {

position: fixed;

}

/* fix the height of the header block and lock it down */

#header_main .container {

height: 82px !important;

line-height: 82px !important;

}

2) Text colour was thru theme settings, but had to apply the following changes:

/* Social Icons & Contact

*/



/* put the icons on the right */

#top .social_bookmarks li {

float: right;

}



/* move the contact # left of the icons */

.sub_menu {

right: 70px;

}

.social_header .phone-info {

color: #5f5e5e!important;

font-size:1.2em;

font-weight:normal;

}

Thanks to the tips on the Avia Menu at https://kriesi.at/support/topic/avia-menu-repositioning#post-124971 I was able to place the menu block exactly where I wanted it, aligned to the bottom of the header block in line with the baseline of the logo. A few tweaks were needed to move the menu indicator as well through the .avia-menu-fx tag.

/* Main menu position

*/

.main_menu {

height:25px;

top:55px;

}



.main_menu ul li a {

height: auto !important;

line-height: 20px !important;

}

.main_menu ul:first-child > li > a {

padding:0 7px;

}



.main_menu .menu ul {

margin-top:8px;

}



.avia-menu-fx  {

bottom: -8px;

}

Edit – screen shot of the result after the above tweaks.

Hey Ismael, thanks for the response.

I implemented the code you suggested, which did fix the blog previews and the buttons, although the menu issue did not change. Suggestions?

Also, I discovered a few more issues:

– The header logo is stretched vertically

– The ‘You Might Also Like’ images on blog posts are stretched vertically

– The ‘Special Heading’ font is a bit too big/wide and makes several titles stretch into the sidebar, is there a way to reduce the size of these on IE 8 only?

– Most of the icons from the included icon font do not work and appear as 2 tiny rectangles

– My sidebar forms all seem to stretch off the page

– Images in the ‘Recent Posts’ widget only take up a portion of the image holder box

– Links in the footer are randomly underlined and not underlined

– Images on the ‘Meet the Team’ page go white/disappear on hover

EDIT: Also, it seems that the buttons no longer have hover effects, in IE8 or Firefox/Chrome/Safari/etc. Is there a way to get those working again?

Hopefully all of these items are fixable, as a majority of my company uses IE8.

Thanks for your support,

Tom

thanks and after I increase the font size, seems the problem solved.

thanks ismael thats great!

Ismael,

Thank you for the fast reply! Still needing some help here.

I am using “header with social icons and bottom” with “stretched layout” styling.

There are three sections of the header. Here’s what I’m trying to accomplish:

– Set background color of the top navigation bar (background color needs to be full width, the previous code you gave only sets the link background color)

– Set font color for both links and small info text on top navigation bar

– No background color behind the logo

– Set background color for the main navigation bar and drop down menus

– Set font color for main navigation bar (right now it derives two custom dynamic colors, one for the drop down menus, and one for the top level links) I need to change both.

The CSS code on the base level is a nightmare is sort out with this theme. I thought I was good with CSS until I tried making sense of the overly complex code behind this theme.

Appreciate your help.

Hi ismael thnx for your answer,

Point 1 solved

point 2 work in process

Point 3. i didn´t understand

Simply by dropping the 2 pieces of code in the custom.css wil solve the issue?

Salvador