Conditional Comments for IE Legacy Browsers

[jenniferh]

Hello,

I'd like to add conditional comments for Internet Explorer legacy browsers using an external style sheet.

I'm a little uncomfortable making changes to the functions.php file, so I need detailed instructions on how to do this. Can anyone help with this?

Thanks!
Jennifer

http://www.ezline.com/

[Victor Font]

Hi Jennifer,

Looks like you're using the Minimum Pro theme. Copy the custom css file to the theme's directory through FTP. Download functions.php from the theme's directory and edit it locally. Don't edit the file with the WordPress theme editor. If you make a mistake, you wil white screen the site in which case you would have to FTP into it anyway to fix it.

Look for the following function at line 21:

function minimum_enqueue_scripts() {

	wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION );

}

function minimum_enqueue_scripts() {

	wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'custom-css', get_bloginfo( 'stylesheet_directory' ) . 'custom.css', array(), '1.0.0' );
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

Just realized I left a backslash out of the code. This is the corrected version:

function minimum_enqueue_scripts() {

	wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'custom-css', get_bloginfo( 'stylesheet_directory' ) . '/custom.css', array(), '1.0.0' );
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[jenniferh]

Hi Victor,

Thanks for your help with this! Yes, I will work this via ftp and keep a backup of the original functions.php.

I'm trying to pinpoint the css correction that I need to make for IE (specifically Windows XP/IE 6 & 7). I'm using Browserstack emulator to test it and the big problem is with the main navigation menu dropping down vertical rather than horizontally as it should be.

I believe the issue is with this class below, but I can't figure out how to correct it for IE:

.genesis-nav-menu .menu-item {
display: inline-block;
margin: 0;
text-align: left;
}

Can you suggest a css modification to correct this issue?

Jennifer

[carasmo]

Inline block is not recognized by IE 6 or 7, you will need to go look for old CSS hacks for those browsers, I believe it's display:inline and zoom (yep, I was right, see link below). These are not specifically conditional css, this is a browser css hack. Conditional comments is different and requires that you add classes to the html or body tag like html5 boilerplate.

http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block

You would stack it so those hacks are first in the property so that the newer browsers will use inline-block.

Float also works on super old browsers. Microsoft dropped support for IE 6 and 7 a long time ago. IE 8 support is being dropped soon (or has been).

---

Genesis Theme Customization and Help

[Victor Font]

Most developers don't bother with such old browsers any longer, most just post a message that this browser isn't support, Please update your browser.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[jenniferh]

Thank you Victor and Carasmo,

I was able to correct the nav menu using your suggestion Carasmo:

*display: inline;
zoom: 1;

There are still other minor issues when viewing with the old IE browsers, but like you both have said we can only do so much to accommodate them!

Appreciate your help with this!
Jennifer

[Author]

Posts