8 Replies Latest reply on Feb 4, 2010 9:05 AM by TaylorMade_Productions

    Table issue in IE

    TaylorMade_Productions

      Hi I'm having trouble with my table properly adjusting in Internet Explorer. The table below the yellow line is suppose to be right up against the yellow line. In firefox, chrome & safari it works properly. Can someone tell me what is making it mess up in IE?

       

      Link:http://mulchmadness2010.tm-productions.net/

       

      Thanks,

      TMP

        • 1. Re: Table issue in IE
          John Blaustein Level 4

          Your page looks fine on my PC -- Dell laptop, IE 8.  See attached image.

           

          John

          • 2. Re: Table issue in IE
            TaylorMade_Productions Level 1

            Hmmm... I wonder if it has something to do with the version because i have IE 7. If that is the case, does anyone know if there is a special code that makes it work correctly in all version of IE?

            • 3. Re: Table issue in IE
              mhollis55 Level 4

              Microsoft's browser is the most incompatible browser offered. And we have proof here that it's not even consistent between versions.


              I think the issue with your table is in padding and margins. Here are a few things you should have in your page head:

               

               

              <!--[if IE 5]>

              <style type="text/css">

              /* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */

              #outerWrapper #contentWrapper #leftColumn1 {

                width: 190px;

              }

              </style>

              <![endif]-->

              <!--[if IE]>

              <style type="text/css">

              /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */

              #outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {

                zoom: 1;

              }

              </style>

              <![endif]-->

               

               

              Now, I have been told that IE8 is more compliant with respect to the proprietary zoom, so this last "if" statement may not apply to IE8.


              Here is something you should have first in your css stylesheet:

               

               

              html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {

                margin: 0;

                padding: 0;

                border: 0;

                outline: 0;

                font-size: 100%;

              }

              This resets your core set of elements so that everything you define in your style sheet further on will look the same in all browsers because each browser has a different default top margin value. If you reset everything to zero, you change all browsers' defaults so that your subsequent styles will look consistent.

              Now, when you define your table, set margins and padding initially to zero

              There is also a box model hack that a guy named Tantek Çelik allows you to offer "false" values for Microsoft's non-compliant browsers and then an accurate value for compliant browsers (this goes into your style sheet):
              div#example {
                   padding: 20px;
                   border: 5px solid #000000;
                   width: 250 px;
                   voice-family: "\"}\"";
                   voice-family: inherit;
                   width: 200 px;
              }
              html>body#example {
                   width: 200px;
              }
              I think that if you take a look at Tantek's website you will learn more about how to hack around Microsoft stupidity.
              • 4. Re: Table issue in IE
                TaylorMade_Productions Level 1

                Do i need to put these codes in a div tag or do i just copy and paste? I know I'm very rarely use IE but I want to make it compatible for all viewers and quite a few people still use IE because it come as the default on their PC.

                • 5. Re: Table issue in IE
                  mhollis55 Level 4

                  No.

                   

                  Put the code I indicated that should be in between your <head> and </head> tags between them.

                   

                  The rest should be in your style sheet.

                   

                  There's another workaround for IE and that is to create a style sheet just for Microsoft's browsers. Then you create an if - endif statement like this:

                   

                  <!--[if IE 7]>

                  <style type="text/css" media="all">

                  @import url("../css/ie7.css");

                  </style>

                  <![endif]-->

                   

                  Then you create a specific style sheet for IE 7 that is loaded for that browser only. You can do that for any browser, in fact, adjusting things so that every browser shows exactly what you mean it to show. That makes for a lot of style sheets, but in the case of certain elements, like navigation, it's worth it.

                  • 6. Re: Table issue in IE
                    TaylorMade_Productions Level 1

                    The last CSS you mentioned goes on the whole page correct?

                    • 7. Re: Table issue in IE
                      mhollis55 Level 4

                      The if-endif statements go on your web page.

                       

                      With the last, I'm recommending you create a separate CSS stylesheet for E7.

                       

                      If there is a hack that will get you out of your current quandary, then I don't recommend you create a special style sheet for Microsoft's browsers because that's a lot of work and minor differences between browsers may not matter. But if the hacks aren't working, you can take this additional step just to work around the problems in IE7.

                      • 8. Re: Table issue in IE
                        TaylorMade_Productions Level 1

                        Ok thanks so much for your help! I think all i need to do is figure out how to make the table move up in the IE7 CSS. Bcuz it works great in all the other browsers. I think most people now will have IE 6,7 or 8