WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] In IE, Not always the stylesheet created for IE is used. (25 posts)

  1. nickmeul
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you sure you were using the correct CSS selectors?

  3. nickmeul
    Member
    Posted 1 year ago #

    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?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    body {
     border: 10px solid red !important;
    }
  5. nickmeul
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

  7. nickmeul
    Member
    Posted 1 year ago #

    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.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  9. nickmeul
    Member
    Posted 1 year ago #

    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.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  11. nickmeul
    Member
    Posted 1 year ago #

    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?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  13. nickmeul
    Member
    Posted 1 year ago #

    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

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  15. nickmeul
    Member
    Posted 1 year ago #

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

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  17. nickmeul
    Member
    Posted 1 year ago #

    Okay, i placed the script just before </body>, i tried placing it in the header too, nothing seems to change the IE10 display for me, nothing has changed.. is there anything else I can do? or is this script just not right?

  18. nickmeul
    Member
    Posted 1 year ago #

    I came across this comment:

    Both solutions posted here (with slight modifications) work:

    <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

    or

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

    You include either of the above lines inside of head tag of your html page before your css link. And then in css file you specify your styles having "ie10" class as a parent:

    .ie10 .myclass1 { }

    And voilĂ ! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.

    Can you please explain me what he means with the Bold part, what is the code i have to add to my css?

    Thanks in advance

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Providing the JavaScript has worked, the <html> element will have a class named, "ie10" and therefore can be referenced to using CSS. You can then apply certain styles to elements only within IE10.

  20. nickmeul
    Member
    Posted 1 year ago #

    So in practice:

    I need to change the margin-top to 98px. does this mean i have to add:

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

    to my style.css?

    this was the original code:

    #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%;
    }
  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, if that CSS was in your IE stylesheet, then you'd just use the same code and prepend the .ie10 class to your selectors (as exampled by you). Instead of being in an IE stylesheet, it would be in your actual stylesheet for other browsers.

  22. nickmeul
    Member
    Posted 1 year ago #

    Yesss! got it working for IE10, now i just have to check IE9 when I'm home. Thanks!

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    You're welcome :)

  24. nickmeul
    Member
    Posted 1 year ago #

    Also working on IE9 now! thanksss

    (donation is on its way:))

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Thanks! :)

Topic Closed

This topic has been closed to new replies.

About this Topic