SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick favor from IE7 users

    Hi, I'm working on an OO-CSS gallery and trying to polish the components I'm displaying. Can you please take a look at this demo of text wrapping around captioned images and let me know how it looks?

    http://www.earthchronicle.com/EC/Content/Computers/Programming/~OOCSSGallery.aspx#advancedCaptions

    In the closest I can get to IE7 (IE8 compatibility view) the images in my demo are not floating nicely and before I spend a week trying to tech the issue, I'm wondering if it really looks like that in IE7.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

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

    The floated captions are broken in Firefox as well as IE7 because they haven't been cleared.

    The main problem in IE7 is haslayout which can be fixed like this and cure the clearing at the same time.

    Code:
    .testOutput {overflow:hidden}
    * html .testOutput {height:1%;overflow:visible}
    Note that your css file is outputting a BOM (byte order mark) at the start of every file and could cause some browsers to miss the styles.

    Code:
    
    Change your editor settings so that the BOM isn't output.

    I also note that the IE7 css file is first in the html so I assume that there are no conflicts inside it otherwise the normal rules will over-write them (I didn't check what was in your IE7 file though.)

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The floated captions are broken in Firefox as well as IE7 because they haven't been cleared.
    Too funny, it works in 6 and 8 but not 7, and in FF 2 and 3.6, but not your version? Ahhhhh... the joys of CSS. What version of FF are you running?

    Quote Originally Posted by Paul O'B View Post
    Note that your css file is outputting a BOM (byte order mark)

    I also note that the IE7 css file is first in the html so I assume that there are no conflicts inside it otherwise the normal rules will over-write them (I didn't check what was in your IE7 file though.)
    The default settings of my editor are set to no BOM, and usually it's not a problem, but occasionally I find files like this where I have to yank it. I'll fix that with the other mods.

    And thanks for the heads up on the conditional comment. One of the great things about master pages is that you can group things more logically in the content page, but it means you forget their actual order on the page. These are OO-CSS components so there shouldn't be any serious conflicts, but I have switched the conditional comment on my dev box to come after the embedded styles. When I'm finished with the rest of the changes, I'll upload it and test again.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    Too funny, it works in 6 and 8 but not 7, and in FF 2 and 3.6, but not your version? Ahhhhh... the joys of CSS. What version of FF are you running?
    You only notice the problem in Firefox 3.6 when the screens is wide and the floated caption isn't contained because the parent is not high enough. It's the same in ie6 and 8 but IE7 was more broken with the haslayout bug I mentioned above.
    Attached Images Attached Images


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
  •