WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Twelve] Internet Explorer issues (8 posts)

  1. Guggles2004
    Member
    Posted 1 year ago #

    I've created a website based on twenty twelve theme, adjusted in a child theme. The header contains a logo floated to the left with centered text. The navigation bar has rounded corners and a gradient color with white fonts. One page contains various small pictures aligned by float left and right.

    Everything works great in Firefox, Safari, Chrome and IE-10. But when viewed in IE07, IE08 and IE09, various issues appear:

    1. In IE07, the centered header text appears left aligned and in front of the logo. In IE08 the same, but appears behind the logo. IE09 displays OK.

    2. In IE07 and IE08, the menu bar has a properly colored border, but no rounded corners and a white background instead of green gradient. At least the text of the menu items is displayed in grey, so it is readable. In IE09 however, I see border, rounded corners, a white background, but the fonts are white also. So no text is visible in de menu bar.

    3. In IE08, the page with all the pictures doesn't display the pictures that are floated to the left. Pictures floated to the right are displayed normally. In IE07 and IE09, everything displays normally.

    I've searched the net to find proper hacks or other clues, but I found nothing useful. I'm not too proficient on CSS to figure it out myself, so I hope anyone on the forum is able to help me out.

    [note: I have another website based on twenty eleven with similar formatting and this one has no problems with prior IE versions...]

    website: http://wijkraaddeblaak.nl

    pictures page: http://wijkraaddeblaak.nl/het-bestuur

    Thanks
    KJ

  2. leejosepho
    Member
    Posted 1 year ago #

    I also have a Twenty Twelve theme, and this plugin helps with round corners at my site:
    http://wordpress.org/extend/plugins/ie-css3-support/

    The bit of code at the end of this thread helps IE9 with the Navbar at my site:
    http://wordpress.org/support/topic/working-out-my-sites-ie-compatibility-bugs?replies=3

    This code I have in a plugin of my own makes typing appear in IE8's pwrd box at my site:

    <?php
    /*
    Plugin Name: IE8 PwrdFix
    Description: Makes typing appear in the Password Box during IE8 Login
    Version: 0.1
    License: GPL
    Author: _CK_
    Author URI: http://ckon.wordpress.com/2009/03/19/how-to-fix-internet-explorer-8/
    */
    /* function fix_ie8
    # in use as of 01/02/2012 as "IE PwrdFix" (plugin)
    # from: http://ckon.wordpress.com/2009/03/19/how-to-fix-internet-explorer-8/
    # Make a mini-plugin out of it and activate.
    #(you might be able to put it into functions.php if that executes before other data is sent but I am uncertain) */
    function fix_ie8() {
    if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE 8")) {header("X-UA-Compatible: IE=7");}
    }
    /* add_action('bb_send_headers','fix_ie8'); // for bbPress */
    add_action('send_headers','fix_ie8'); // for WordPress
    /* end of function fix_ie8 */
    ?>

    Along with the above, I also have a Developer who has done some overall cleanup and some IE-specific tweaking for me.

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you want webpages to be browser-compatible, you should first run them through W3C's validator and strive for successful validation.

    The default position is for websites to fail across browsers and browser versions. Only if a website is coded in a particular manner will this be different.

    Asking for browser compatibility beyond and below Internet Explorer 8 is too much from a free theme vendor.

    If you want to explore this yourself, read up on Internet Explorer 8 in relation to media queries http://12412.org/2012/01/media-queries-ie/ .

  4. Guggles2004
    Member
    Posted 1 year ago #

    @Andrew: I started with twenty eleven and was pleased with the fact that the theme turned out to be cross browser compatible. So, when updating to twenty twelve, I didn't figure to go thru validation myself...

    And for shitty IE: I just mentioned IE7 to indicate the differences and show that an upgrade of IE doesn't necessarily mean an improvement ;-) Unfortunately, with a lot of Windows XP users (equals IE8) and Windows 7 (=IE9) out there, it is not yet possible to abandon IE compatibility for these versions... But I'll follow your link and try to understand IE.

    @leejosepho: thanks for your suggestions, I'll start playing with those.

  5. leejosepho
    Member
    Posted 1 year ago #

    So, when updating to twenty twelve, I didn't figure to go thru validation myself...

    Ditto concerning the additional IE trouble, but the mobile folks so far say they like it.

  6. Guggles2004
    Member
    Posted 1 year ago #

    Just to let you know I've solved the "floating img" issue.

    I had:
    <div style="float:left"><img src="..." alt=".." width=".." height=".." /></div>

    not good in IE8.

    I changed this to:
    <div><img src="..." alt=".." width=".." height=".." style="float:left" /></div>

    and now IE8 displays the pictures on the left.

    Weird?!? I don't care anymore ;-)

  7. Guggles2004
    Member
    Posted 1 year ago #

    The issues mentioned have been solved.

    Apparently, when fiddling with IE-correcting plugins, an ie.css file was created outside of my scope, which did override my own child theme style.css on these specific issues. Now that I've commented out the culprit lines in this ie.css, everything works "as designed" across all browsers.

    Cheerz!

  8. leejosepho
    Member
    Posted 1 year ago #

    Apparently, when fiddling with IE-correcting plugins, an ie.css file was created outside of my scope, which did override my own child theme style.css on these specific issues. Now that I've commented out the culprit lines in this ie.css, everything works "as designed" across all browsers.

    I think I might have a little of all of that going on, but I do have a specific ie.css sheet that was written last, so maybe it helps hold all the other IE patches together.

Topic Closed

This topic has been closed to new replies.

About this Topic