SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text not wrapping around floated image in IE

    Hi there,
    I was hoping someone could help me figure something out, I'm supposed to wrap this up today & I don't think I'm thinking too clearly! Here is the page:
    http://www.dapperdesigns.net/clients/monarch/about.html
    It looks right in Firefox but in IE6 it is not wrapping around the photo the way it should in IE 5-6.

    I tried moving the div with the image in it just after the first <p> tag--that did wrap around the image but then the text aligned center & I couldn't figure out why.

    Any thoughts?

  2. #2
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah nevermind, the brain kicked in. Wrapping the image in a span rather than div fixed it, since div is block type element I assume that was why it was forcing the text to start after the image...


  3. #3
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    First, the wrapping issue. IE seems happy to wrap IF you put the pic b4 the text, AND you align the image. Saving your site to my pc is hard due to the content/images - it simply won't work without me spending too much time on it. I see you spotted the span thing, after I posted this, anyway.

    [Edited] ... You could do with adding some margin-right to the style too, say about 5px.

    Second. The trebuchet font is simply not designed to be this small, it doesn't look right. Also, it isn't on a lot of systems, so that will ruin the look on them. Try Verdana first and Arial as a backup by defining a font-family.

    Third. You've used an old trick to center the page. The logo slips right in IE out of the box. This is what centering should look like:

    body {
    text-align:center; /* IE Win Centering hack */
    width: 615px; /* Minimum page width for Moz to
    stop elements sliding off left side of page */
    }
    .page {
    text-align:left; /* reverse IE centering hack. Otherwise divs inside this can break out of container */
    position:relative; /* contents can break out of container in IE */
    margin:0; /* sets all margins to 0 */
    margin-left:auto; /* have to use verbose
    centering method to keep Mac IE happy */
    margin-right:auto; /* have to use verbose centering
    method to keep Mac IE happy */
    width: 615px; /* needed for centering to work */
    }

    BTW. Some of your divs use classes unique to them. It is better coding to make these divs their own styles, so the above would be:

    #page {
    foo
    bar
    }

    and then

    <div id="page">foo bar</div>





    Trevor

  4. #4
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for the tips. I will take another look at the fonts. I'm not sure if you could see my css, but I've actually used most of the css you noted, and I actually wanted the logo in the header to be aligned right.

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Yes, I did look at the css, and you have only about half of what I posted above, and some of it was not as shown (ie margin: 0px auto won't work in MAC IE all the time).

    However, the reason I posted it all was that a container poppoing out of the box is a classic symptom of not getting the centering correct in IE Win.




    Trevor


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
  •