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

This topic is empty.

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

Author

Posts

November 1, 2013 at 5:38 am #154883

Participant

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 #154885

Paulie_D

Member

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 #154895

atlhuck

Participant

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 #154897

Paulie_D

Member

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 #154910

atlhuck

Participant

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 #154913

Paulie_D

Member

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 #154915

atlhuck

Participant

Thanks, Paulie_D…

November 2, 2013 at 6:05 am #155011

Senff

Participant

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 #158519

atlhuck

Participant

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 #158653

Senff

Participant

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.

Author

Posts

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

The forum ‘Back End’ is closed to new topics and replies.