WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom .css for IE not working (46 posts)

  1. felilikesflowers
    Member
    Posted 1 year ago #

    Hello,
    so I am finished with my website and it looks great on all major browsers except, of course, IE.

    I have spend the last 2 days looking all over the forums for an answer to why Internet Explorer isn't reading the custom 'iestyle.css' file I created for it.

    It all seems very simple and makes a lot of sense to create a second css file just for ie, but for some reason it is not working for me.

    Any help with this would be greatly appreciated.

    I am working with IE7 and created a child theme of twenty eleven. The url is http://www.enlightenedinnergame.com

    So I duplicated the style.css file, renamed it iestyle.css and uploaded it with my FTP client to my child theme's folder 'twentyeleventest'.

    In my header.php file I added this between the <header></header> tags:

    <!--[if lte IE 7]>
    <link href="http://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    I tried out different versions for the url, but nothing seems to work.

    If everything would work fine, I would have to edit the custom .css file solely through the FTP client, correct?

    If anybody is out there that is familiar wit this old problem and can tell me how to overcome it, please help!!

    Thank you so much in advance,
    Felicitas

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Have you validated your markup & CSS?

  3. felilikesflowers
    Member
    Posted 1 year ago #

    Hello esmi,
    I did, it showed me 4 errors, but when I checked the errors all of them were actually correct and not wrong like the validator said. (It was mostly about missing closing tags '>', which were all in place.)

    Do you have any other idea?

    I have to upload and access it via a FTP client, right?

    Thank you for your time!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You ought to focus on the error message, not the highlighted red character in the error code example.

    Are you sure the the "iestyle.css" stylesheet isn't loading? Have you tried checking the browser's console using a developer tool like Firebug-Lite, or tried adding an obvious style in iestyle.css like body{background: red !important}?

  5. felilikesflowers
    Member
    Posted 1 year ago #

    Hi Andrew,
    yes, I know for sure that the iestyle.css isn't working. I have tried something similiar like you suggested. Thank you for the tip!

    When going over the errors with the validator, how do I know where the error is then, if it is not at the highlighted place? I can't seem to find any errors in the lines suggested.

    Thank you for your response,
    Felicitas

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This may help you with the validation issues:

    http://codex.wordpress.org/Validating_a_Website

  7. felilikesflowers
    Member
    Posted 1 year ago #

    Thanks WPyogi for all the links, they are very helpful!

    But unfortunately that still doesn't answer my question why my new iestyle.css file won't be read. Is something wrong with the syntax I put in the header.php file?

    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php
    	/*
    	 * Print the <title> 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', 'twentyeleven' ), max( $paged, $page ) );
    
    	?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    
    <!--[if lte IE 7]>
    <link href="http://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
    <![endif]--> 
    
    <!--[if IE ]>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    </style>
    <![endif]-->
    
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* 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>

    If anyone can help, please do!!

    Thank you,
    Felicitas

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    It isn't loading because the file is not found.

  9. felilikesflowers
    Member
    Posted 1 year ago #

    Hi Andrew,
    thank you for your response on both threads!

    If I go into the folders with filezilla it shows me that the file is there though....

    Do you have any idea why this is? Or is there another way of uploading the file?

    Thank you!!

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you send us a link to a print-screen of your filezilla directory, in which the stylesheet designates?

  11. felilikesflowers
    Member
    Posted 1 year ago #

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    What are the permissions on that stylesheet?

  13. felilikesflowers
    Member
    Posted 1 year ago #

    I don't know what 'permissions' means... :/

  14. felilikesflowers
    Member
    Posted 1 year ago #

    It says numeric value: 644

    Owner permission: Read Write
    Group permission: Read
    Public permission: Read

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    From your screenshot, you can scroll to the right here http://awesomescreenshot.com/0c7us189d .
    Can you post another screenshot, but this time scrolled all the way to the right?

  16. felilikesflowers
    Member
    Posted 1 year ago #

  17. felilikesflowers
    Member
    Posted 1 year ago #

    Thank you so much Andrew, I really appreciate your help! <3

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    What do you have in your .htaccess file?

  19. felilikesflowers
    Member
    Posted 1 year ago #

    I don't have that file in my directory and can't find it in twentyeleven either...

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you talked to your hosting service providers of this issue?

  21. felilikesflowers
    Member
    Posted 1 year ago #

    That I can't find the file, you mean?

    No, not yet, will do. Dreamhost has an excellent customer service.

    Is the syntax I put in the header.php file correct though?

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is the syntax I put in the header.php file correct though?

    Yes. For example, if you're searching for this;

    http://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/style.css

    The file is found.
    Then you change (in the browser URL) the filename from style.css to iestyle.css and the file is not found.

  23. felilikesflowers
    Member
    Posted 1 year ago #

    Yes, I tried this too.

    But I mean is this

    <!--[if lte IE 7]>
    <link href="http://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    correct? I put it between the two <head></head> tags.

  24. Andrew
    Forum Moderator
    Posted 1 year ago #

    Looks okay, but I hadn't checked the syntax. Run it through W3C's validator to make-sure.

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    The validator says it's fine, it does throw an error but that's because I had just tested that snippet of code. It was expecting a document.

  26. felilikesflowers
    Member
    Posted 1 year ago #

    Thanks Andrew!
    I contacted dreamhost... let's see what they say. I hope they will shine some light on this.

    If you should come up with any other ideas I'd be more then grateful for any advice.

    Danke!

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the Remote site directory of 'iestyle.css', from this screenshot, is there a file named 'style.css'?

  28. felilikesflowers
    Member
    Posted 1 year ago #

  29. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the mean-while, let's try using JavaScript to add a class in your <body> element if the browser is IE7 or less. So you can target pages in CSS that only have that class.

    Instead of your iestyle.css file, can you try adding this JavaScript;

    <script type="text/javascript">
     jQuery(document).ready(function($) {
        $('body').addClass('ie7');
     });
    </script>

    So, from this;

    <!--[if lte IE 7]>
    <link href="http://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    To this;

    <!--[if IE 7]>
    
    <script type="text/javascript">
     jQuery(document).ready(function($) {
        $('body').addClass('ie7');
     });
    </script>
    
    <![endif]-->
  30. felilikesflowers
    Member
    Posted 1 year ago #

    Okay, cool. Done.
    But this would only be for IE 7, right? Or should it say

    <!--[if lte IE 7]>

    instead of

    <!--[if IE 7]>
    ?

    Also, how would I edit stuff for ie now with that new code in place?

    (Sorry, I have no clue about Javascript..."blush")

Topic Closed

This topic has been closed to new replies.

About this Topic