SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Float Problems... Again.

    LINK-
    http://www.tocdocs.com/toc-spine.100610.html

    In IE6 and IE7 the main paragraph text in the large white box seems to be pushed under the first image which is floating to the right. Can someone help me fix it so that the main paragraph looks the same as in IE8? I would greatly appreciate it.

    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Notice that the TocSpines logo is floated right, but it has a width defined for it and that the text seems to float around it just fine? From my understanding, if you float an element, for older browsers to display them properly, you must define a width on the floated element. Otherwise, they will see the floated element as spanning 100%.

    Try that out and see if it works on that floated div with the image.
    Follow me: @josh_max

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ok_hornet View Post
    Notice that the TocSpines logo is floated right, but it has a width defined for it and that the text seems to float around it just fine? From my understanding, if you float an element, for older browsers to display them properly, you must define a width on the floated element. Otherwise, they will see the floated element as spanning 100%.

    Try that out and see if it works on that floated div with the image.
    I added a width and height to the first floated image and it still is not rendering properly. Any other ideas?
    Todd Temple > T2 Design

  4. #4
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just checked your source, you have to add the width to the surrounding div because that is what is technically being floated.
    Follow me: @josh_max

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ok_hornet View Post
    I just checked your source, you have to add the width to the surrounding div because that is what is technically being floated.
    So I have now removed the div wrapping the image in question and simply added the class "floatRight" to the actual image and I added the width to that image but it still is not working.
    Todd Temple > T2 Design

  6. #6
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Older browsers just won't take that I guess... Here's a way to be able to get the images stacked on top of each other as you want them to look.

    Add this to your css:
    Code CSS:
        div.images { float:right; text-align:right; }

    This is what your code needs to look like
    Code HTML4Strict:
        <div class="images">
            <script language="JavaScript">
                <!-- Hide this script from old browsers -->
                    document.write('<img class="floatRight" width="318" height="215" src="' + image + '">')
                // -- End Hiding Here -->
            </script>
            <img src="i/gfx_logo_tocSpine.jpg" alt="TOC Spine - Orthopaedic Center for Spinal Excellence" name="gfx_logo_tocSpine" width="280" height="53" class="floatRight" id="gfx_logo_tocSpine" />
        </div>
     
        <p align="left">Because, taking care of you is our mission. Our new location is in close proximity to Parkwest Medical Center allowing you easier access to a wider variety of diagnostic equipment. Additionally, you now have even greater access to the TOC team of board certified, fellowship trained physicians and their subspecialties. Our doctors often work together on cases to ensure you have the best medical advice and care available. </p>
     
        <p>Our Doctors:</p>
        <ul style="margin-top: 0;">
            <li class="sub"><a href="white.html">P. Merrill White, III M.D.</a></li>
            <li class="sub"><a href="kahn.html">Edward Kahn, M.D.</a></li>
            <li class="sub"><a href="bolt.html">Patrick Bolt, M.D.</a></li>
        </ul>

    We'll see how that turns out for you. If it doesn't work still, we'll go from there!
    Follow me: @josh_max

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ok_hornet View Post
    Here's a way to be able to get the images stacked on top of each other as you want them to look...
    I have added this code and it is still not working. Any other ideas?
    Todd Temple > T2 Design

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are two IE bugs going on here.

    The first is that a right floated float inside a right floated parent actually spans 100&#37; in IE7 and under unless you give both a width as mentioned above.

    The other bug is that IE7 will only rise the text up alongside subsequent floats as long as there is nothing between each float. In your case the second float starts inside the parent p element and therefore IE only lets the float rise to the top of the p element and not slide up alongside the other float.

    This is quite awkward and you would need to do move the second float into the same container as the first float and then change the floats so that the child float is floated left inside a right floating parent to kill the 100% wide effect.


    Code:
    <td width="450" class="sub"><div class="images">
            <script language="JavaScript">
                    <!-- Hide this script from old browsers -->
                    document.write('<IMG  class="floatRight" width"318" height="215" src="http://www.tocdocs.com/' + image + '">')
                    // -- End Hiding Here --></script>
            <img src="http://www.tocdocs.com/i/gfx_logo_tocSpine.jpg" alt="TOC Spine - Orthopaedic Center for Spinal Excellence" name="gfx_logo_tocSpine" width="280" height="53" hspace="10" class="floatRight" id="gfx_logo_tocSpine" /></div>
    
        <p class="sub">Because, taking care of you is our mission. Our new location is in close proximity to Parkwest Medical Center allowing you easier access to a wider variety of diagnostic equipment. Additionally, you now have even greater access to the TOC team of board certified, fellowship trained physicians and their subspecialties. Our doctors often work together on cases to ensure you have the best medical advice and care available. </p>
    Code:
    div.images {
        text-align: right;
        float: right;
    }
    div.images img{clear:right}
    * html div.images img{float:left!important;clear:none}
    *+html div.images img{float:left!important;clear:none}

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    This is quite awkward
    I reworked the HTML and added the CSS rules and it works in IE7 and IE6, BUT now it is breaking in IE8 and Safari. UUUUGGGGGGHHHH!
    Todd Temple > T2 Design

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You missed one of my rules out

    Code:
    div.images img{clear:right}

  11. #11
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Be sure to fix the width attribute inside your script to have the = sign.

    Your code:
    Code:
    document.write('<IMG  class="floatRight" width"318" height="215" src="' + image + '">')
    Follow me: @josh_max

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    well spotted

  13. #13
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both! I found the missing "=" and added that in. I can't thank you both enough for your efforts. I would have never figured this out on my own. Is there a one-stop resource for IE bugs and fixes that you know of?
    Todd Temple > T2 Design

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    . Is there a one-stop resource for IE bugs and fixes that you know of?
    Yes the SitePoint forums

    The problem with bugs is not that they haven't been documented but in users realising which bug is triggering their problem.

    The sitepoint reference has a lot of the common compatibility problems written into the reference but you need to read up on them and then when you see a bug in your page you have to recognise which bug it is and then act accordingly.

    Most people have heard of margin collapse and the double margin float bug etc but don't know the reasons why they occur or when to recognise them in their layout.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •