WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] In IE, Not always the stylesheet created for IE is used.

[Resolved] In IE, Not always the stylesheet created for IE is used.

  • Hi guys,

    As the title shows, I’ve got a problem which only occurs in IE.
    The layout of my website seems to be different in IE, and after a lot of reading i have now created a different stylesheet only for IE. This helped me in editing the layout of my menu etc when IE is used.

    The problem is, that the menu is overlapping the header image in IE, so i would like to position my menu a bit downwards. So I wanted to change my CSS for my menu but nothing happened. It seems, even in IE, it is still using my normal stylesheet for just the menu, since i was able to change other elements with my IE stylesheet.

    Is there a way to fix this problem?

    My website is http://www.perfectcatering.nl.

    Thanks in advance!

    Nick

Viewing 15 replies - 1 through 15 (of 24 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Are you sure you were using the correct CSS selectors?

    Uhm, not sure.

    In my header.php is used this code in the head section:

    <!--[if IE]>
    	<link rel="stylesheet" type="text/css" media="all" href="http://www.perfectcatering.nl/wp-content/themes/catch-box/all-ie-only.css" />
    <![endif]-->

    then i copied the whole of my normal style.css into all-ie-only.css and started editing in that file.

    does this help?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try adding a significantly noticeable style in that stylesheet to explore whether it is loading;

    body {
     border: 10px solid red !important;
    }

    Ok, I tried that and it does not seem to work at all in IE10.
    Although yesterday i checked on my dad’s computer(IE9) and there the changes were visible, just not the one i wanted.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Oh that explains that part, so for IE10 am i supposed to replace my

    <!--[if IE]>
    	<link rel="stylesheet" type="text/css" media="all" href="http://www.perfectcatering.nl/wp-content/themes/catch-box/all-ie-only.css" />
    <![endif]-->

    For this:

    <script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>

    Also, the problem still exists for IE9 and below.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    The 10-pixel, red border is working for me in IE9.

    Most changes worked for me in IE9. the point is that in order to show my header properly in IE9 and below i have to change the margin-top from 52px to 98px for my menu:

    #branding #access, #colophon #access-footer {
        background: none repeat scroll 0 0 #3D3D3D;
        clear: both;
        display: inline;
        float: left;
        margin-bottom: 2px;
        margin-top: 52px;
        width: 100%;
    }

    but this doesn’t work when i change it in all-ie-only.css but it does when i do it in style.css but then in all other browsers there will be a big white strip underneath my header and above my menu.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    That’s probably because you’re including your IE stylesheet right at the top of the page, before any other stylesheets. This means other stylesheets that have the same CSS selectors will override your styles.

    You need to include your IE stylesheets after any other conflicting stylesheets.

    You mean i have to replace the link in my header.php?

    this is how my header file looks like:

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package Catch Themes
     * @subpackage Catch_Box
     * @since Catch Box 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <!--[if IE]>
    	<link rel="stylesheet" type="text/css" media="all" href="http://www.perfectcatering.nl/wp-content/themes/catch-box/all-ie-only.css" />
    <![endif]-->
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_uri(); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?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 <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    			<hgroup>
                   	<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( ! empty( $header_image ) ) :
    				?>
    				<h1 id="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    					<img src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
    				</a></h1>
    				<?php endif; // end check for removed header image ?>
    
    				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup>
    
    			<?php
    			// Check to see if header search has been disable
    			$options = catchbox_get_theme_options();
    			if ( $options ['disable_header_search'] == 0 ) :
    				get_search_form();
                endif;  ?>
    
    			<nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Primary menu', 'catchbox' ); ?></h3>
    				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'catchbox' ); ?>"><?php _e( 'Skip to primary content', 'catchbox' ); ?></a></div>
    				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'catchbox' ); ?>"><?php _e( 'Skip to secondary content', 'catchbox' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                    <?php if ( has_nav_menu( 'primary', 'catchbox' ) ) {
    					wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-header-container' ) );
    				} else { ?>
                    	<div class="menu-header-container">
    						<?php wp_page_menu( array( 'menu_class'  => 'menu' ) ); ?>
                        </div>
    				<?php
                    } ?>
    			</nav><!-- #access -->
    
    			<?php if ( has_nav_menu( 'secondary', 'catchbox' ) ) { ?>
                    <nav id="access-secondary" role="navigation">
                    	<h3 class="assistive-text"><?php _e( 'Secondary menu', 'catchbox' ); ?></h3>
    						<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    						<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'catchbox' ); ?>"><?php _e( 'Skip to primary content', 'catchbox' ); ?></a></div>
    						<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'catchbox' ); ?>"><?php _e( 'Skip to secondary content', 'catchbox' ); ?></a></div>
                        <?php wp_nav_menu( array( 'theme_location'  => 'secondary' ) );  ?>
                    </nav>
                <?php } ?>
    	</header><!-- #branding -->
    
    	<div id="main" class="clearfix">
    
    		<div id="primary">
    			<div id="content" role="main">
        			<?php
    				// Passing The Slider Value and Running the slider in the Homepage or Front Page only
    				if ( is_home() || is_front_page() )  {
    					if ( function_exists( 'catchbox_pass_slider_value' ) ) { catchbox_pass_slider_value(); }
                		if ( function_exists( 'catchbox_sliders' ) ) { catchbox_sliders(); }
    				} ?>

    Where should it be placed then? sorry if this is the easiest question ever (a)

    Also, I didn’t include all the other [If IE] codes, what are those for?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    You should only make changes to the themes files within a Child Theme environment, but yes, you’ll have to place the link to the IE stylesheet lower down in your header.php (but still before the </head> element.

    Thank you very much! I hope this works, I’ll check when i get home.

    One last question:

    Where should I put the:

    <script>if(Function(‘/*@cc_on return document.documentMode===10@*/’)()){document.documentElement.className+=’ ie10′;}</script>

    In order for my website to work properly in IE10
    (at least I read the article you linked to and i think this is the code I have to put somewhere

    Thanks in advance

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I think you should add that just before the </body> tag.

    What template should that be? because there is no </body> tag in header.php
    I can only find: <body <?php body_class(); ?>>

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Perhaps it’s in footer.php, but I don’t know.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘[Resolved] In IE, Not always the stylesheet created for IE is used.’ is closed to new replies.