WordPress.org

Forums

Display Issues: IE vs Gecko Browsers (14 posts)

  1. gregor
    Member
    Posted 12 years ago #

    Hey All,
    I just downloaded and installed WP today. I've been toying with the default index.php template and the default CSS. I have some problems I'm hoping that you can help me with ...
    I'm wondering why in IE new posts shift a little to the right?! If you take a look at my site you'll notice that the topmost post is where it should be but all others are shifted a little to the right? Huh? Why? Is this because they're all posted on the same day? Is that also the reason why the date only appears once? Also in IE, the right sidebar is displaying at the bottom of the page. It looked fine when there was just one post but as I inout more it shift. I know that this must be CSS related.
    Ok, in Firefox and the Gecko browsers, the right sidebar stays where it should but only one post displays in the content DIV. There are two --> --> (1 for each post) following the one post that actually displays. Why is this?
    My CSS can be found here and my default template's PHP (saved in .txt format) here.
    Thanks!

  2. gregor
    Member
    Posted 12 years ago #

    Ooops ... the default template PHP is here.

  3. NuclearMoose
    Member
    Posted 12 years ago #

    Gregor,
    First of all, IE SUCKS. There, I have that out of my system. I have an idea for you to try.
    In your INDEX.PHP file, move all of your right-hand menu content stuff to be BEFORE all of the #CONTENT div. IE freaks out on floats.
    HTH.
    Craig.

  4. Sushubh
    Blocked
    Posted 12 years ago #

    IE might suck but that still forms 97% of the online user.
    So when someone else want the site to work in IE. Let him have it! :)

  5. gregor
    Member
    Posted 12 years ago #

    Thanks. Unforuntaely (in IE) positioning the Right DIV content before the Centre DIV causes all of the Centre content to push itself to the bottom of the page.
    I'm also wondering why after entering new catgories into the database they don't show up ... even after multiple page reloads?!

  6. Sushubh
    Blocked
    Posted 12 years ago #

    categories are only shown when they have atleast 1 post attached to them!
    logical isn't it?

  7. tcervo
    Member
    Posted 12 years ago #

    I haven't had time to peek at your code, but I can say I've had similar problems in the past, particularly with IE pushing the right content down to the bottom. In my case, it was IE making the center div too wide...try adjusting the width until you find a setting that works in IE, then perhaps the box model hack (Google it...) will be a solution. (Again, I have no idea if this is the same issue, but it sure sounds similar...)
    -Tony

  8. Anonymous
    Unregistered
    Posted 12 years ago #

    I do not know if you have tweaked the code a bit since the posts above. What I can tell you is that on my computer in IE everything looks cool. On the other hand in Firefox the layout really sucks. There may be an important message in there somewhere. It is just that after four fingers of Jack Daniels I am not sure what it is.

  9. TechGnome
    Moderator
    Posted 12 years ago #

    Hmmm.... must be the JD talking anon.... looks jsut fine on this install of FF.
    TG

  10. Anonymous
    Unregistered
    Posted 12 years ago #

    Amongst other horrors I have got a really scrambled bg. It looks horrible. Some of it might be a FF thing. I've still got the day 1 download installed. But nevertheless the differences are striking. At least on my system. And the JD fine as it always is; is not; in this case, responsible.

  11. Anonymous
    Unregistered
    Posted 12 years ago #

    I have not looked at your page or your code but as far as the float is concerned try this.
    First adjust the float position to look right in ie.
    Not sure how you have positioned your element(float) left: #% or px or by using margin: ####
    So example:
    #floatright{
    margin: 10px 0 0 360px;
    another rule;
    another rule;
    another rule;
    another rule;
    }
    or
    #floatright{
    left: 360px
    another rule;
    another rule;
    another rule;
    another rule;
    }
    looks correct in ie.
    Then afterward
    simply add back
    html>body #floatright{
    correct firebird position;
    }
    Simple hack works good in most cases.
    but remember you will go nuts trying to please all viewer conditions under all situations.
    Just stick to the lowest common denominator and run with it.
    William

  12. awh
    Member
    Posted 12 years ago #

    "why in IE new posts shift a little to the right?!"
    Because IE sucks very, very much. The world should switch to Mozilla.
    Here is the solution I use.
    On every page I call the following Javascript code. It moves everything slightly to the right in IE, but not in any other browser. It's not perfectly centered, but it looks better than otherwise.
    // Moves stuff to where it should be in obsolete browser.
    // This is iemargin.js
    if (navigator.appName=="Microsoft Internet Explorer")
    document.write("<style type='text/css'>body {margin-left: 10px}</style>");
    // -->

  13. tdw
    Member
    Posted 12 years ago #

    design your site for mozilla first. Then when testing in IE apply styles to IE only throught the * html hack in your css file. Example:
    // competent browser
    #mydiv {
    margin: 20px;
    }
    // IE only
    * html #mydiv {
    margin: 10px;
    }
    or better yet pu all your IE fixes in a seperate css file and in clude it woth an IE conditional statement.
    <!--[if gte IE 5]>
    <link rel="Stylesheet" href="ie5.css" media="screen" />
    <![endif]-->

  14. tdw
    Member
    Posted 12 years ago #

    design your site for mozilla first. Then when testing in IE apply styles to IE only throught the * html hack in your css file. Example:
    // competent browser
    #mydiv {
    margin: 20px;
    }
    // IE only
    * html #mydiv {
    margin: 10px;
    }
    or better yet pu all your IE fixes in a seperate css file and in clude it woth an IE conditional statement.
    <!--[if gte IE 5]>
    <link rel="Stylesheet" href="ie5.css" media="screen" />
    <![endif]-->

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.