13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Website Appearing Different in IE

by Mao Flynn
11 replies
  • WEB DESIGN
    • |
Hi there,

Look for advice from a HTML expert. I have a new site live at Passive Traffic Machines - Make True Passive Income Online With Perpetual Passive Traffic.

It's perfect in Chrome, the browser I usually use.

The top part of the template is very slightly askew on Firefox any ideas why?

Secondly the template looks terrible in Internet Explorer because it is flowing off the page. I can't understand why. It was written in Dreamweaver CS4 and looks perfect there and in Chrome.

Is this an encoding issue and how do I fix it so that it looks perfect on all browsers.

Thanks for your help.

Mao
#appearing #website
  • Profile picture of the author Ryan UK
    Your webpage is in "Quirks mode" with no proper doctype.

    Put this code at the very top of your page and see if that changes it

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    The code should go above your HEAD tag. So remove the code you have now above the HEAD tag and use the code above.
    {{ DiscussionBoard.errors[2424654].message }}
    • Profile picture of the author Mao Flynn
      Originally Posted by Ryan UK View Post

      Your webpage is in "Quirks mode" with no proper doctype.

      Put this code at the very top of your page and see if that changes it

      HTML Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
      The code should go above your HEAD tag. So remove the code you have now above the HEAD tag and use the code above.
      Thanks for your reply Ryan,

      I made that amendment and disabled the old code, but it had no effect on the text scrolling off the page in IE. Any other idea?

      Best,
      Mao
      Signature
      Thread is CLOSED
      {{ DiscussionBoard.errors[2424710].message }}
      • Profile picture of the author Ryan UK
        Originally Posted by Mao Flynn View Post

        Thanks for your reply Ryan,

        I made that amendment and disabled the old code, but it had no effect on the text scrolling off the page in IE. Any other idea?

        Best,
        Mao
        In your CSS, put this value
        HTML Code:
        width:600px;
        into this style
        HTML Code:
        #salesletter
        That should put a width on your text to stop it from overflowing.
        {{ DiscussionBoard.errors[2424740].message }}
        • Profile picture of the author Mao Flynn
          Originally Posted by Ryan UK View Post

          In your CSS, put this value
          HTML Code:
          width:600px;
          into this style
          HTML Code:
          #salesletter
          That should put a width on your text to stop it from overflowing.
          Thanks Ryan tried that but no luck, it cut my text off mid sentence. Any other tricks?

          Best,
          Mao
          Signature
          Thread is CLOSED
          {{ DiscussionBoard.errors[2425439].message }}
          • Profile picture of the author Luxmo
            Originally Posted by Mao Flynn View Post

            Thanks Ryan tried that but no luck, it cut my text off mid sentence. Any other tricks?

            Best,
            Mao
            CSS:
            Code:
            word-wrap: break-word;
            Should fix the issue...although the word-wrap is new functionality with other browsers than IE...so in older versions of other browsers it will not work.

            Also, use the CSS "!important" feature at your will. You could possibly have other styles over-riding what you're trying to do with those elements...which could be the root of the issue.
            {{ DiscussionBoard.errors[2425482].message }}
            • Profile picture of the author Mao Flynn
              Originally Posted by Luxmo View Post

              CSS:
              Code:
              word-wrap: break-word;
              Should fix the issue...although the word-wrap is new functionality with other browsers than IE...so in older versions of other browsers it will not work.

              Also, use the CSS "!important" feature at your will. You could possibly have other styles over-riding what you're trying to do with those elements...which could be the root of the issue.
              Thanks for the advice luxmo. I tried this code but it didn't make any difference. I will keep working down through all the suggestions here until I find the solution.

              Thanks again for taking the time to post a possible solution.

              Best,
              Mao
              Signature
              Thread is CLOSED
              {{ DiscussionBoard.errors[2429423].message }}
  • Profile picture of the author jmbinfo
    I like it!
    {{ DiscussionBoard.errors[2425634].message }}
  • Profile picture of the author StrongboxSolutions
    Man... you are killing me... making me open up an I.E. browser! LOL.. I personally hate I.E. so much that I decided that anyone who uses I.E. doesn't deserve to see my site the way I intended it! ;0)

    Without looking at your css files and XHTML structure I think that you need to define the width of the 'div' that the content is within which is overlapping your #container. Basically your #salesletter div is defaulting to 100% width and is not properly nesting itself within the #container div.

    If you want me to fix this I will do so for only $25.00 figuring an hour to diagnose and repair... my normal rate is $50.00 per hour for design work, but as I actively support this forum I will cut my rate in half.

    The content etc for the rest of the site looks great, keep it up!

    ~Rick
    {{ DiscussionBoard.errors[2426339].message }}
  • Profile picture of the author csmcmanus
    [DELETED]
    {{ DiscussionBoard.errors[2427589].message }}
  • Profile picture of the author mary_k
    Your problem is really simple to fix. In your index page source code you have this for the first table:

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                  <tr>
    delete both width="100%" properties and you're good to go. change it to this:

    Code:
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td><table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
    it worked when i tried it in IE8. firefox stayed the same. should solve your problem. my help is free but you're more than welcome to donate
    Signature
    "Spend your time working on what you love."
    {{ DiscussionBoard.errors[2434394].message }}
    • Profile picture of the author Mao Flynn
      Originally Posted by mary_k View Post

      Your problem is really simple to fix. In your index page source code you have this for the first table:

      Code:
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                  <tr>
      delete both width="100%" properties and you're good to go. change it to this:

      Code:
      <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td><table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
      it worked when i tried it in IE8. firefox stayed the same. should solve your problem. my help is free but you're more than welcome to donate

      Thanks a million Mary,

      Problem fixed. Sometimes it's the simplest solutions that we overlook.

      Very much appreciated

      Mao
      Signature
      Thread is CLOSED
      {{ DiscussionBoard.errors[2448477].message }}

Trending Topics