Grow your CSS skills. Land your dream job.

Why is CSS3 rendering differently in IE when served from Apache2 ??

  • # November 1, 2013 at 5:38 am

    I’ve been developing an intranet site, using WAMP. CSS3 renders properly from localhost but when I’m publishing to my Apache2 server (utilizing a Turnkey WordPress VM Appliance host) certain elements break, but Only In IE !! Chrome & Firefox render properly (go figure).

    I’m not sure what could cause this and am throwing a lifeline to see if anyone out there has any ideas… could it be an htaccess issue? Could it be an Apache module? Something with WordPress?

    Any thoughts would be appreciated – Thanks!

    # November 1, 2013 at 5:46 am

    We’d need to see a link…

    Since it renders in everything except IE (which version?)…it’s unlikely to be a specific CSS issue…more likely a DOCTYPE or something.

    Yeah, definitely need to see a link.

    # November 1, 2013 at 7:55 am

    Paulie_D – thanks for the reply; not sure what I would change that to as it’s currently using HTML 5. I’ll try changing it around and see how that goes. In any case the styles break in any IE version – things like multiple background, animation effects, some of the typical element spacing issues, etc.

    Being that the site is internal (not on a public web) I can’t provide a link.

    # November 1, 2013 at 8:04 am

    as it’s currently using HTML 5

    You might be using HTML5 elements but that doesn’t mean that the DOCTYPE is correct.

    In any case the styles break in any IE version

    That seems unlikely….even for IE.

    Are you using the Shiv…Modernizer, Normalise, Bolierplate etc?

    Obviously, if you can’t provide us with a link we can’t help. We can’t diagnose code we can’t see.

    Perhaps just post the <head> section since my bet is that s where the problem lies.

    # November 1, 2013 at 8:41 am

    Thanks – Here’s the header.php contents; you’re correct, hard to fix what ya can’t see. Yes, Modernizr is used, called in functions.php…

    function web2feel_scripts() { wp_enqueue_style( 'style', get_stylesheet_uri() ); wp_enqueue_style( 'component', get_template_directory_uri() . '/css/component.css'); wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css'); wp_enqueue_style( 'theme', get_template_directory_uri() . '/css/theme.css');
    
        wp_enqueue_script( 'modernizer', get_template_directory_uri() . '/js/modernizr.custom.js', array( 'jquery' ), '20120206', true );
        wp_enqueue_script( 'toucheffects', get_template_directory_uri() . '/js/toucheffects.js', array( 'jquery' ), '20120206', true );
        wp_enqueue_script( 'superfish', get_template_directory_uri() . '/js/superfish.js', array( 'jquery' ), '20120206', true );
        wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '20120206', true );
    
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
    
    
    } add_action( 'wp_enqueue_scripts', 'web2feel_scripts' );
    
    ==============
    
    <?php /** * The Header for our theme. * * Displays all of the section and everything up till <div>
      * * @package web2feel * @since web2feel 1.0 */ ?> <html > <meta charset="" /> <?php /* * Print the tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'web2feel' ), max( $paged, $page ) ); ?> <link rel="pingback" href="" /></p> <p>
      </p>
    
      <p>
        <!--[if lt IE 9]>--> <script src="/js/html5.js" type="text/javascript">
      </p>
    
      <p>
      </p>
    
      <p>
        <body >
      </p>
    
      <p>
        <
      </p>
    
      <p>
        div id="page" class="hfeed site">
      </p>
    
      <pre><code><header id="masthead" class="site-header" role="banner">
        <div class="container_12 top cf">
    
        <div class="site-branding grid_4">
            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><h1 class="site-title"><?php bloginfo( 'name' ); ?></h1></a>
        </div>
    
        <div class="grid_8">
            <nav role="navigation" class="site-navigation main-navigation">
            <?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_id'=>'web2feel' ,'menu_class'=>'sf-menu','fallback_cb'=> 'fallbackmenu' ) ); ?>
            </nav><!-- .site-navigation .main-navigation -->
        </div>
    
        </div>
        <?php get_template_part( 'subhead' ); ?>
    </header><!-- #masthead .site-header -->
    

    <

    div id=”main” class=”site-main container_12 cf”>

    # November 1, 2013 at 8:47 am

    Yeah…we need to see the rendered HTML/output of the head section…the PHP isn’t going to tell us much.

    I’m moving this to PHP issues because that seems likely to be the relevant issue.

    # November 1, 2013 at 8:58 am

    Thanks, Paulie_D…

    # November 2, 2013 at 6:05 am

    If this is part of your actual code, then I’m not surprised it’s not working in IE, since that browser is not very forgiving for typos/errors in your markup:

      <p>
        <body >
      </p>
    
      <p>
        <
      </p>
    
      <p>
        div id="page" class="hfeed site">
      </p>
    
    # December 17, 2013 at 10:21 am

    I found the issue, for those out there that might be curious. I had to change the IE compatibility level to “edge”, as follows (in the header file):

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    

    Gotta love IE.

    # December 18, 2013 at 3:29 pm

    If you have to add that line to your page to make it look good in IE, there’s still something wrong with your code — not IE.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".