#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0

    Text Elements fail to wrap floating image in IE only


    I recently built a website for a friend and the pages render as planned in Firefox and Chrome, but IE is giving me a hard time with the floating images and paragraphs of text which should be rendered adjacent to the images.

    IE fails to place text adjacent to the floating images and stacks all the elements individually. It's particularly annoying on the page linked above, but is a problem throughout the site.

    CSS is organized alphabetically.

    HTML and CSS both validate with W3C tools.

    Tables are places with a master div for the purpose of centering page in browser.

    Any pointers on what is causing the problem would be greatly appreciated along with suggestions of best way to fix it.

    It strikes me that there may be some inheritance dilemma in the CSS, but I don't see it.

    Thanks!

    Since I am unable to post links, copies of the web page and
    style sheet follow.


    HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            ">
    <!-- html>
    <head>
    <META http-equiv="Content-Type" content="text/html: charset=ISO-8859-1">
    <meta name="robots" content="noarchive">
    <meta name="description" content="Frequently asked questions about training and personal trainers.">
    <meta name="keywords" content="personal training FAQ, training questions and answers, Diabetes and training, weight loss and training">
    <title>Frequently Asked Question</title>
    <!-- CREATED 09/20/12  LAST UPDATED 10/15/12 -->
    <link rel=stylesheet type="text/css"
           href="css/jmst.css">
    </head>
    <body class="ALL">
    <!-- Provide mechanism for centering content on document -->
    <div class="PAGE">
    <!-- Create primary table with dimensional border -->
    <table class="PRIMARY">
         <tr>
              <td><center>
                    <!-- Start of HEADER class table -->
                    <table class="HEADER">
                         <tr>
                              <td>
                              <H1 class="JAMIE">Jamie  Specialist</H1>
                              <H2 class="LOCATIONS">Individualized </H2>
                              </td>
                          </tr>
                    </table>
                    <!-- End of HEADER class table -->
                              <H4 class="PAGETITLE">FAQ and Answers</H4>
                    <!-- Start of COPY class table -->
                    <table class="COPY">
                         <tr>
                              <td>
                              <img class="FAQ1" src="images/FAQ1rctb.gif" alt="">
                              <p class="QUESTION">I have 
                              <p class="ANSWER">In general...
                              <p class="QUESTION">I've 
                              <p class="ANSWER">I recommend
                              <img class="FAQ2" src="images/FAQ2rctb.gif" alt="">
                              <p class="ANSWER">It can also
                              <p class="QUESTION">I was re
                              <p class="ANSWER">Eating a healthy,
                              <p class="ANSWER">Burning plenty of that.
                              <p class="QUESTION">Is it bette
                              <p class="ANSWER">The idea th
                              <p class="ANSWER">Does that mean
                              <img class="FAQ3" src="images/FAQ3tb.gif" alt="">
                              <p class="QUESTION">Is it worth the
                              <p class="ANSWER">The answer to 
                              <p class="ANSWER">If you're
                              <p class="QUESTION">It appears 
                              <p class="ANSWER">I'm sorry
                              <p class="QUOTE">If hunger is not the problem, eating is not the solution
                              </td>
                          </tr>
                    </table>
                    <!-- End of COPY class table -->
              </center>
              </td>
         </tr>
    </table>
    <!-- End of visible document information -->
    </div>
    </body>
    </html  -->
    CSS
    Code:
    /* CASCADING  STYLE  SHEET  FOR  WEB  PAGES  */                                                                                                                                                                                                                       s
    /* Created 09/20/2012    Last Amended/Updated  10-15-2012  */
    /* Code Checked by  W3C CSS Validation Service on 10-8-2012  Ultimately Validated without Errors   CSS 2.1  */
    
    
    /* BODY PROPERTIES */
    
    BODY      {
                margin: 0;
                padding: 0
                }
    
    
    BODY.ALL   {
                width: 100%;
                height: 100%;
                background-color: #D2B48C;
                margin: 0;
                border: 0;
                padding: 0
               }
    
    
    BODY.CONTACT {
                width: 650px;
                height: 700px;
                background-color: #D2B48C;
                margin-top: 15px;
                margin-right: 5%;
                margin-bottom: 0;
                margin-left: 5%;
                padding: 0px
               }
    
    
    /* ANCHOR  PROPERTIES  */
    
    A.plain:link, A.plain:active {color: #000080}
    A:link {color: #000080}
    A:visited {color: #6666B3}   /* #4D4DA6} */
    A:active {color: #FF0000; font-weight: 500}
    A.fancy:visited {color: #6666B3; font-weight: 400}
    A.fancy:active {color: #FF0000; font-weight: 500}
    
    
    
    A.QUIET {
               color: #00004D;
               font-style: normal;
               font-weight: 600;
               font-size: medium;
               font-family:  Helvetica, Verdana, sans-serif;
               letter-spacing: 1px;
               text-decoration: none
               }
    
    
    
    A.WEBSITE {
               font-style: normal;
               font-weight: 500;
               font-size: medium;
               font-family:  Helvetica, Verdana, sans-serif;
               letter-spacing: 1px
               }
    
    
    /* DIV  PROPERTIES  */
    
    DIV       {
                margin: 0;
                padding: 0
                }
    
    
    DIV.PAGE  {
               background-color: #D2B48C;
               margin-top: 0;
               margin-right: auto;
               margin-bottom: auto;
               margin-left: auto
               }
    
    
    /* FONT PROPERTIES */
    
    
    FONT.AUTHOR {
               font-style: normal;
               font-weight: 500;
               font-size: medium;
               font-family: Helvetica, Verdana, sans-serif;
               letter-spacing: 1px
               }
    
    
    FONT.BITAL {
               font-style: oblique;
               font-weight: 600;
               letter-spacing: 1px
               }
    
    FONT.BOLD {
               font-weight: 700
              }
    
    FONT.BOOKTITLE {
               font-style: oblique;
               font-weight: 600;
               font-size: medium;
               font-family: Helvetica, Verdana, sans-serif;
               letter-spacing: 2px
               }
    
    
    FONT.ITAL {
               font-style: italic;
               font-weight: 400;
               letter-spacing: 1px
               }
    
    
    FONT.QUOTE {
               font-style: oblique;
               font-weight: 600;
               font-size: large;
               font-family: Helvetica, Verdana, sans-serif;
               letter-spacing: 2px
               }
    
    FONT.PLINK {
                color: #000080;
                font-weight: 600;
                font-size: 105%;
                letter-spacing: 1px
               }
    
    
    FONT.LINKS {
               font-style: oblique;
               font-weight: 500;
               font-size: large;
               line-height: 1.3;
               font-family: Futura, Helvetica, Verdana, sans-serif;
               letter-spacing: 1px
               }
    
    
    FONT.RED {
               color: #FF0000;
               font-weight: 500
              }
    
    
    
    FONT.SMALL {
                 font-style: normal;
                 font-weight: 500;
                 font-size: 66%;
                 letter-spacing: 1px
                 }
    
    FONT.SMITAL {
                 font-style: italic;
                 font-weight: 400;
                 font-size: 75%;
                 letter-spacing: 1px
                 }
    
    FONT.SUB {
               text-align: center;
               font-style: normal;
               font-weight: 300;
               font-size: x-small;
               line-height: 1.2
               }
    
    FONT.UNDLNI {
                  font-style: italic;
                  font-weight: 500;
                  text-decoration: underline;
                  letter-spacing: 1px
                }
    
    FONT.UNDLNB {
                 font-weight: 600;
                 text-decoration: underline;
                 word-spacing: 1px
                }
    
    
    /* RULE PROPERTIES */
    
    
    HR.TAN {
              background-color: #E2D4BA;
              text-align: center;
              color: #7E6C54;
              height: 2px;
              border-style: solid;
              width: 60%;
             }
    
    
    HR.NAVY {
              background-color: #6666B3;
              text-align: center;
              color: #00004D;
              height: 1px;
              border-style: solid;
              width: 60%;
             }
    
    
    /* HEADLINE PROPERTIES */
    
    H2.LOCATIONS {
                text-align: center;
                word-spacing: 4px;
                letter-spacing: 1px;
                background-color: #E4D2BA;
                color: #937E62;
                font-weight: 500;
                font-size: medium;
                line-height: 1.2;
                font-family: Helvetica, Verdana, sans-serif;
                padding: 10px;
                white-space: nowrap
               }
    
    
    H1.JAMIE       {
                   text-align: center;
                   word-spacing: 5px;
                   letter-spacing: 2px;
                   background-color: #E4D2BA;
                   color: #695A46;
                   font-weight: 700;
                   font-size: large;
                   line-height: 1.2;
                   font-family: Helvetica, Verdana, sans-serif;
                   vertical-align: middle;
                   padding: 12px;
                   white-space: nowrap
                  }
    
    
    H3.CONTACT {
                text-align: center;
                word-spacing: 4px;
                letter-spacing: 2px;
                color: #544838;
                font-weight: 600;
                font-size: medium;
                line-height: 1.05;
                font-family: Helvetica, Verdana, sans-serif;
                margin-top: 8px;
                margin-bottom: 8px
               }
    
    
    
    H1, H2, H3, H4 {
                    line-height: 1.1;
                    margin-bottom: 0
                   }
    
    H4.SECTION {
                   text-align: left;
                   word-spacing: 3px;
                   letter-spacing: 1px;
                   color: #2A241C;
                   font-weight: 600;
                   font-size: large;
                   line-height: 1.2;
                   font-family: Verdana, Helvetica, Futura, sans-serif;
                   padding: 0;
                   margin-top: 5px;
                   margin-bottom: 5px
                 }
    
    
    H4.PAGETITLE {
                   text-align: center;
                   word-spacing: 5px;
                   letter-spacing: 2px;
                   color: #2A241C;
                   font-weight: 800;
                   font-size: x-large;
                   line-height: 1.2;
                   font-family: Verdana, Helvetica, Futura, sans-serif;
                   padding: 0px;
                   margin-top: 20px;
                   margin-bottom: 20px
                 }
    
    
    /* PARAGRAPH PROPERTIES */
    
    
    P {
       width: 100%;
       clear: none;
       color: #00004D;
       font-weight: 300;
       font-size: medium;
       font-family: sans-serif;
       vertical-align: top;
       text-align: left;
       text-indent: 0;
       margin:  0;
       padding: 0
      }
    
    
    P.ANSWER {
            font-weight: 400;
            font-size: medium;
            line-height: 1.1;
            font-family: Helvetica, Verdana, Univers, sans-serif;
            vertical-align: top;
            text-align: justify;
            text-indent: 0;
            margin-top: 8px;
            margin-right: 15px;
            margin-bottom: 1px;
            margin-left: 15px
           }
    
    
    P.BLOG {
               font-style: normal;
               font-weight: 500;
               font-size: medium;
               font-family: cursive;
               letter-spacing: 1px;
               text-decoration: none;
               line-height: 1.1;
               vertical-align: baseline;
               text-align: left;
               text-indent: 0;
               margin-top: 7px;
               margin-right: 10px;
               margin-bottom: 3px;
               margin-left: 10px
               }
    
    P.COPY {
            width: 90%;
            font-weight: 400;
            font-size: medium;
            line-height: 1.1;
            font-family: Helvetica, Verdana, Univers, sans-serif;
            letter-spacing: 1px;
            vertical-align: top;
            text-align: justify;
            text-indent: 1.5em;
            margin-top: 8px;
            margin-right: auto;
            margin-bottom: 1px;
            margin-left: auto
           }
    
    
    
    P.COPYDECL {
                text-indent: 0em;
                text-align: center;
                font-weight: 400;
                font-size: x-small;
                font-family: Verdana, Helvetica, sans-serif;
                margin-top: 10px;
                margin-bottom: 8px
               }
    
    
    
    P.ERROR {
             clear: both;
             width: 70%;
             color: #FF0000;
             font-style: oblique;
             font-weight: 600;
             font-size: large;
             line-height: 1.25;
             font-family: Helvetica, Verdana, Univers, sans-serif;
             letter-spacing: 1px;
             word-spacing: 3px;
             text-align: center;
             text-indent: 0em;
             margin-top: 25px;
             margin-right: auto;
             margin-bottom: 25px;
             margin-left: auto;
             border-width: 6px;
             border-style: inset;
             border-color: #E8DAC6;
             padding: 15px;
             white-space: nowrap
            }
    
    
    
    P.QUESTION {
              clear: none;
              font-style: italic;
              font-weight: 600;
              font-size: medium;
              line-height: 1.05;
              font-family: Univers, Helvetica, Verdana, sans-serif;
              vertical-align: top;
              text-align: left;
              text-indent: 0;
              margin-top: 15px;
              margin-right: 10px;
              margin-bottom: 5px;
              margin-left: 10px
             }
    
    
    P.QUOTE {
             clear: both;
             width: 70%;
             font-style: oblique;
             font-weight: 600;
             font-size: large;
             line-height: 1.10;
             font-family: Helvetica, Verdana, Univers, sans-serif;
             text-align: center;
             text-indent: 0em;
             margin-top: 25px;
             margin-right: auto;
             margin-bottom: 25px;
             margin-left: auto;
             border-width: 4px;
             border-style: inset;
             border-color: #E8DAC6;
             padding: 12px;
             white-space: nowrap
            }
    
    P.RESOURCE {
            line-height: 1.1;
            vertical-align: top;
            text-align: left;
            text-indent: 0;
            margin-top: 7px;
            margin-right: 10px;
            margin-bottom: 3px;
            margin-left: 10px
           }
    
    
    P.TESTIMONIAL {
            font-weight: 400;
            font-size: medium;
            line-height: 1.1;
            font-family: Helvetica, Verdana, Univers, sans-serif;
            vertical-align: top;
            text-align: justify;
            text-indent: 2.5em;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 1px;
            margin-left: 10px
           }
    
    
    P.TSOURCE {
              font-style: italic;
              font-weight: 600;
              font-size: medium;
              line-height: 1.0;
              font-family: Univers, Helvetica, Verdana, sans-serif;
              vertical-align: top;
              text-align: right;
              text-indent: 0;
              margin-top: 1px;
              margin-right: 10px;
              margin-bottom: 15px;
              margin-left: 10px
             }
    
    
    
    P.SITELINKS {
                text-indent: 0;
                text-align: center;
                font-weight: 300;
                font-size: small;
                font-family: Verdana, Helvetica, sans-serif;
                margin-top: 10px;
                margin-bottom: 8px;
                white-space: nowrap
               }
    
    
    
    /* IMAGE PROPERTIES */
    
    
    IMG          {
                  vertical-align: top;
                  float: none;
                  border: 0;
                  padding: 0
                 }
    
    
    IMG.FAQ1 {
                  width: 424px;
                  height: 283px;
                  float: right;
                  clear: none;
                  vertical-align: top;
                  border: 0;
                  padding-top: 10px;
                  padding-right: 0;
                  padding-bottom: 15px;
                  padding-left: 15px
                 }
    
    
    IMG.FAQ2 {
                  width: 425px;
                  height: 282px;
                  float: left;
                  clear: none;
                  vertical-align: top;
                  border-width: 0;
                  border-style: none;
                  padding-top: 10px;
                  padding-left: 0;
                  padding-right: 15px;
                  padding-bottom: 15px;
                  padding-left: 0
                 }
    
    
    IMG.FAQ3 {
                  width: 319px;
                  height: 212px;
                  float: right;
                  clear: none;
                  vertical-align: top;
                  border: 0;
                  padding-top: 10px;
                  padding-right: 0;
                  padding-bottom: 15px;
                  padding-left: 15px
                 }
    
    
    IMG.INLINE   {
                  float: none;
                  vertical-align: top;
                  border: 0;
                  padding-top: 10px;
                  padding-right: 0;
                  padding-bottom: 10px;
                  padding-left: 0
                 }
    
    
    IMG.INLINE-L {
                  float: left;
                  vertical-align: top;
                  border-width: 0;
                  border-style: none;
                  padding-top: 10px;
                  padding-left: 0;
                  padding-right: 15px;
                  padding-bottom: 15px;
                  padding-left: 0
                 }
    
    
    IMG.INLINE-R {
                  float: right;
                  vertical-align: top;
                  border: 0;
                  padding-top: 10px;
                  padding-right: 0;
                  padding-bottom: 15px;
                  padding-left: 15px
                 }
    
    IMG.CONTACT  {
                  float: right;
                  background-color: #D2B48C;
                  border-color: #7E6C54;
                  border-style: ridge;
                  border-width: 4px;
                  padding: 7px
                 }
    
    
    
    /* TABLE AND TABLE ELEMENT BACKGROUNDS */
    
    TABLE    {
              vertical-align: top;
              margin: 0;
              padding: 0;
              background-color: #D2B48C
              }
    
    
    
    TABLE.ADDENDA {
                   width: 100%;
                   margin-top: 15px;
                   margin-right: auto;
                   margin-bottom: 15px;
                   margin-left: auto
                  }
    
    
    TABLE.COPY {
                 width: 90%;
                 text-align: left;
                 vertical-align: top;
                 margin-top: 0;
                 margin-right: auto;
                 margin-bottom: 0;
                 margin-left: auto;
                 padding-right: 15px;
                 padding-left: 15px
                 }
    
    
    
    TABLE.HEADER {
                 width: 90%;
                 background-color: #E4D2BA;
                 margin-top: 0;
                 margin-right: auto;
                 margin-bottom: 0;
                 margin-left: auto;
                 border-width: 6px;
                 border-color: #D2B48C;
                 border-style: outset;
                 padding: 0;
                }
    
    
    TABLE.INSET {
                 width: 90%;
                 text-align: left;
                 margin-top: 0;
                 margin-right: auto;
                 margin-bottom: 0;
                 margin-left: auto;
                 padding: 5px;
                 background-color: #D2B48C;
                }
    
    
    TABLE.LINKS {
                 width: 100%;
                 background-color: #D2B48C;
                 padding: 0px
                }
    
    
    TABLE.MAILFORM {
                   color: #000080;
                   font-weight: 400;
                   font-size: medium;
                   line-height: 1.1;
                   font-family: Helvetica, Verdana, Univers, sans-serif;
                   text-align: left;
                   background-color: #D2B48C;
                   margin-top: 25px;
                   margin-right: 25px;
                   margin-bottom: 0;
                   margin-left: 25px;
                   padding: 10px
                  }
    
    
    TABLE.PRIMARY {
                   width: 100%;
                   height: 100%;
                   background-color: #D2B48C;
                   margin-top: 15px;
                   margin-right: auto;
                   margin-bottom: 25%;
                   margin-left: auto;
                   padding: 0px
                  }
    
    
    TABLE.THANKYOU {
                   width: 100%;
                   margin-top: 15px;
                   margin-right: auto;
                   margin-bottom: 15px;
                   margin-left: auto
                  }
    
    
    TD    {
             margin: 0;
             padding: 0
             }
    
    
    
    TD.MAILFORM {
                   width: 50%;
                   margin-top: 0;
                   margin-right: auto;
                   margin-bottom: 0;
                   margin-left: 15px;
                   text-align: left;
                   vertical-align: baseline
                  }
    
    
    TR    {
             margin: 0;
             padding: 0
             }
    
    
    
    
    /* END */
    Last edited by Kravvitz; October 15th, 2012 at 04:39 PM. Reason: added [code] tags
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    You've got quite the coding style, there. You're doing a lot of things that don't follow best practices, and a lot of things that may not technically be wrong, but I wouldn't recommend. The biggest one of course is laying your page out in tables, which is going to cause all sorts of issues in the long run.

    But I digress.

    The culprit seems to be you have a bad doctype which IE is choking on. If you want to use the HTML 4 Transitional doctype, try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Or you could just use the HTML5 doctype, which is simply: <!doctype html>

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, The Other John.

    To add to what rdoyle said, you should change "<!-- html>" to "<html>" and "</html -->" to "</html>".

    Out of curiosity, would you mind explaining why you decided to use all uppercase for most of the class names? It's quite unusual.

    Originally Posted by rdoyle720
    The culprit seems to be you have a bad doctype which IE is choking on.
    I wouldn't use the word "choking" in this context. The doctype he is using is just not one of the ones that triggers "standards mode" (or "almost standards mode").


    P.S. The Other John, it would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0
    Originally Posted by rdoyle720
    You've got quite the coding style, there. You're doing a lot of things that don't follow best practices, and a lot of things that may not technically be wrong, but I wouldn't recommend. The biggest one of course is laying your page out in tables, which is going to cause all sorts of issues in the long run.

    But I digress.

    The culprit seems to be you have a bad doctype which IE is choking on. If you want to use the HTML 4 Transitional doctype, try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "( this is blocked by the house software )">

    Or you could just use the HTML5 doctype, which is simply: <!doctype html>
    rd720

    Thanks for the compliment on my coding style. It works for me by helping to keep the tables separated.

    Thanks for the suggestion. Actually, the real page includes the ""Traditional//EN... loose.dtd" statement, but since I'm a newbie, the house software stripped out the url as I am unable to post urls yet. As you see, it stripped out the part you posted when answering me.

    Since I long ago learned to create nested tables that were individual in style, they have worked well for me.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0
    Kravvitz,

    Thanks for the kind word of welcome and adding the
    Code:
    code brackets
    . The
    Code:
    <!-- html> comment marks </html -->
    were added to prevent somebody's browser from parsing what I had pasted in and chopped up.

    To answer your question, since both html and css are case insensitive, my coding style came about to help me see obvious errors more easily and help me prevent them. Using all CAPS class names makes them show up on the screen more easily.

    That's all.

    So, between the three of us, have we come up with anything new? Any other ideas based on the HTML code or css that strikes you as defective or headache inducing from IE's POV?

    I would have sent you to the site but I am prohibited.
    Last edited by Kravvitz; October 15th, 2012 at 07:57 PM. Reason: must we quote the whole post? :p
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Which versions of IE are you testing in? IE9? IE8? Older ones?

    The forum system automatically converts the angle brackets into "&gt;" and "&lt;", so you don't need to worry about that. It wouldn't have worked though because you have other comments in the page.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    You should really avoid using <font> elements. CSS is a much better alternative. This is rather old, but much of what it says is relevant -- What's wrong with the FONT element?

    To answer your question, since both html and css are case insensitive, my coding style came about to help me see obvious errors more easily and help me prevent them. Using all CAPS class names makes them show up on the screen more easily.
    Do you not use a text editor that has syntax highlighting? Or do you use that in addition to it?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0
    Originally Posted by Kravvitz
    Which versions of IE are you testing in? IE9? IE8? Older ones?

    You should really avoid using <font> elements. CSS is a much better alternative.

    Do you not use a text editor that has syntax highlighting? Or do you use that in addition to it?
    Thanks for your reply Kravvitz

    I tested in IE 9 and IE 6 (whoa!). My guess is that there is some bad code in the IE base code that is not interpreting the CSS the way it is written. That's why it works fine in Firefox v2.0 and up, and Google Chrome.

    <font> elements are always used very sparingly and in a css
    way anyhow, e.g., <font class="BOLD"> etc.

    As for text editors, I started coding HTML in monochrome with a great old text editor. Now use one with syntax highlighting, but never saw a need to change my coding style. The benefit is it shows up even better in color!
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Not many people still test in IE6 and FF2.

    It seems you've run into IE's hasLayout feature (IE8+ don't have this in their latest rendering modes, just in their IE5.5 and IE7 emulation modes). To understand what hasLayout is, read this: http://reference.sitepoint.com/css/haslayout

    In this case, you can simply remove the "width:100%" declaration from the "P" rule.

    By the way, the "vertical-align" property only applies to inline elements and table-cells and is ignored on floated elements. Therefore it won't have an affect on the paragraphs.

    Originally Posted by The Other John
    <font> elements are always used very sparingly and in a css
    way anyhow, e.g., <font class="BOLD"> etc.
    Ok, it could be worse then. However, it's time you use better elements. For example, <em> to mark up emphasized text (it's italicized by default but I often make it bold instead), the <strong> element to mark up strongly emphasized text (it's bold by default), or the good ol' <span> element for text that you want to style when there's no more appropriate element (it has no default style since it's designated as being semantically generic).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0

    Stranger than Fiction? Of course; it's Microsoft!


    Kravvitz,

    Thanks once again for the links and discussion of IE and its many, many faults. After noting how a solution was not easily forthcoming to this problem, I did a little further research and find the problem I am experiencing is an inherited code problem common to virtually all IE versions, post IE6, and manifests itself in a variety of ways. There are many hacks and workarounds to attempt to control IE's failures, but I'm not sure adding a lot of extra code really solves the problem so my solution is to provide a link to Firefox and a recommendation to IE users to "get with it" if they are seeing layout problems.

    I appreciate your comments on reforming my coding as I have not been a user of <em> and <strong> in the past, but will look into them and try to do better in the future.

    After having read a number of the articles on containment failures in IE, I am going to take another look at my structure and see if the problem can be fixed with some judicious clearing. If it's possible, I'll post a SOLVED reply at the end of the thread and explain what I did, together with links to the site and CSS.

    I will also drop the CSS "width: 100%;" declaration for <p>aragraphs and see if that has any effect.

    The ultimate solution is that although I may not have done everything in a right and robust manner, I may not have done anything wrong, which explains why the W3C checking tools passed my code, and the two standards-based browsers render as intended.

    Thanks again!
    The Other John
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    7
    Rep Power
    0

    Problem Solved




    Apparently IE follows formatting instructions without regard to what has gone before. The IE problem was rendered moot by eliminating from the CSS "width" declarations for two classes of paragraph used in juxtaposition to floated images.

    They were:

    P {
    width: 100%;
    more decs
    }

    P.COPY {
    width: 90%;
    more decs
    }

    Both were removed and the problem went away.

    No other code changes were required or made.

    Thanks again for your help Kravvitz!

IMN logo majestic logo threadwatch logo seochat tools logo