Support » Fixing WordPress » Internet Explorer Problems

  • Resolved mattconley

    (@mattconley)


    I am using the Cutline 2.2 theme with modified code. My blog looks great/perfect in Firefox and Safari, but I am having the worst time making it look good in Internet Explorer. The header navigation is displaying wrong and the images in the posts show up about 1/4 of the way down the page. I tried copying my style.css and making ie6.css, ie7.css, and style-ie.css and put them in the same folder and put a hack in the code for IE to use those stylesheets, it didn’t do anything. I also tried just taking out the IE fixes entirely but that still didn’t work. I ran the code through a validator and tried fixing the errors, but I am not an expert at this at all and am having trouble fixing all the errors, I would like to just make it work in IE and move on. I am working on a deadline and could really use some help.

    The site is http://blacknotblack.net/notblack/

    Do you need my code or can you just view the source from the browser.

    Any help would be greatly, greatly appreciated, I have been scouring these forums looking for answers and the above was the best I found, but I’m still not getting it right.

    Thank you in advance.

Viewing 15 replies - 1 through 15 (of 17 total)
  • I am having the same issue on this blog:

    http://blacknotblack.net/black

    On this one I left in the IE fix, you can see it in the source code, but still same problems.

    esmi

    (@esmi)

    Forum Moderator

    You have quite a few validation errors on your front page that may be causing, or contributing to, the problem.

    Thanks for the reply, I am working on them one by one now. Do you have any idea which errors would cause this in IE, because if it’s looking good in Firefox and Safari, all I need is it to look good in IE, it would be great if I could just pin point the errors.

    esmi

    (@esmi)

    Forum Moderator

    Not really. There are just too many. Once the serious ones (mis-nested or missing tags) have been sorted, the design can be re-assessed to see if there any CSS issues or fixes than can be applied. But trying now with that many errors would be pretty fruitless, in my experience.

    Incidentally, which version of IE do you want to start work on?

    Fix all the errors since different browsers react differently to them and errors can be cumulative or cascading. For a guide in correct code for WordPress, see:

    http://codex.wordpress.org/HTML_to_XHTML

    Especially these parts:

    All attribute values must be within quotes
    All tags must be properly nested
    All tags must be closed, even single tags

    Thanks guys, I got the errors down to 46 which are mostly due to values in the embed code of the videos on there, nothing that should effect the design/layout. Except one, I think this might be the error I need fix to resolve this:

    FROM THE W3C VALIDATOR:

    Line 30, Column 25: document type does not allow element “div” here; assuming missing “li” start-tag

    <div id=”content_box”>

    Here is my index.php:

    <?php get_header(); ?>
    <div id=”content_box”>
    <div id=”content” class=”posts”>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <h2 class=”entry-title”>” rel=”bookmark” title=”Permanent Link”><?php the_title(); ?></h2>
    <h4 class=”meta”><?php the_time(‘F jS, Y’) ?> by <span class=”author”>“><?php the_author(); ?></span>
    #respond”>Respond</h4>
    <div class=”entry entry-content”>
    <?php the_content(‘[Read more →]’); ?>
    <p class=”tagged”>Tags: <?php the_tags(‘  ‘,’ · ‘) ?><span class=”add_comment”><?php comments_popup_link(‘No Comments.’, ‘1 Comment’, ‘% Comments’); ?></span></p>
    </div>
    </div><?php /* end post */ ?>
    <?php endwhile; ?>
    <?php include (TEMPLATEPATH . ‘/navigation.php’); ?>
    <?php else : ?>
    <h2 class=”page_header center”>Not Found</h2>
    <div class=”entry”>
    <p>Sorry, but you are looking for something that isn’t here.</p>
    <?php get_search_form(); ?>
    </div>
    <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
    </div>
    <?php get_footer(); ?>

    I am really lost here, every time I try to modify it, it looks wrong in Firefox/Safari. I am close! I am new to XHTML so all help is very appreciated.

    esmi

    (@esmi)

    Forum Moderator

    Check your sidebar.php file. I think it’s missing a closing </ul>.

    As for the embed errors, you can safely ignore them. In fact <embed> is still the most accessible method of adding some media to pages, so don’t worry about them.

    Couple of unwanted <p> tags associated with your text widgets. If you’re adding code to the Text widget, might be best to turn off the auto-insertion of paragraph tags.

    Hi esmi,

    Do you see the issues I’m talking about, it looks good in firefox/safari, not good in internet explorer. Here is my sidebar.php:

    <div id=”sidebar”>
    <ul class=”sidebar_list”>
    <?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar()) : ?>
    <?php if (function_exists(‘get_flickrrss’)) { ?>
    <li class=”widget-special”>
    <h2>Flick<span class=”flickr_pink”>r</span></h2>
    <ul class=”flickr_stream”>
    <?php get_flickrrss(); ?>

    <?php } ?>
    <li class=”widget”>
    <h2>Search It!</h2>
    <?php get_search_form(); ?>

    <li class=”widget”>
    <h2>Recent Entries</h2>

    <?php if (function_exists(‘blc_latest_comments’)) { ?>
    <li class=”widget”>
    <h2>Recent Comments</h2>
    <ul class=”latestactivity”>
    <?php blc_latest_comments(); ?>

    <?php } ?>
    <li class=”widget”>
    <h2>Tag Cloud</h2>
    <?php wp_tag_cloud(‘smallest=10&largest=10&number=25&format=list’); ?>

    <?php get_links_list(‘id’); ?>
    <?php endif; ?>

    </div>

    Do you have any advice about that last error, the “div content” error?

    Thanks!

    Cool thanks, I fixed the sidebar, can you please advise me on how to fix this line in my index.php:

    <h2 class=”entry-title”>” rel=”bookmark” title=”Permanent Link”><?php the_title(); ?></h2>
    <h4 class=”meta”><?php the_time(‘F jS, Y’) ?> by <span class=”author”>”><?php the_author(); ?></span>
    #respond”>Respond</h4>

    It’s not showing up as an error in the validator, the blog still looks bad in explorer though, so frustrating! Please advise…

    esmi

    (@esmi)

    Forum Moderator

    What’s the problem? Looks OK in IE8 to me.

    Hmmm, must just be IE7 & IE6, I can’t put a screenshot in here?

    The header navigation is wrong, the last bar (SIT REP) shows up under STAGING and makes it really tall and the images in the posts show up 1/4 of the way down the page, everything else looks fine. And the blog description shows up in between the header image and the navigation and above the header image.

    Help please!

    I can email screenshots if that helps assess.

    esmi

    (@esmi)

    Forum Moderator

    If it’s specific to IE7 or below,it’s a CSS problem. Best solved by serving an additional 1 or 2 sheets – aimed at specific versions of IE – using conditional comments.

    http://www.elated.com/articles/internet-explorer-conditional-comments/

    I added these in the code header.php:

    <!–[if lte IE 7]>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie7.css” media=”screen” />
    <![endif]–>
    <!–[if lte IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie6.css” media=”screen” />
    <![endif]–>

    I copied the style.css and made ie6.css and ie7.css and uploaded them to the themes folder. Does that code look right?

    Still having issues…

    I am still having issues, errors are fixed, conditional elements in there, please help, now all the images in the blog posts in internet explorer are low, there is a gap between the title and the image, some videos aren’t loading, some images aren’t even showing up, still perfect in firefox and safari.

    Could it be something in my IE6.CSS & IE7.CSS files? PLEASE CHECK:

    /[huge code moderated – please use a pstebin or link to file]

    NOTE ON LAST POST:

    I didn’t modify anything in the IE6.CSS and IE7.CSS files, just changed the original stylesheet file name and uploaded them to the correct servers.

    Should I modify the IE CSS files somehow?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Internet Explorer Problems’ is closed to new replies.