• Resolved ryecroft

    (@ryecroft)


    I’m running a modified version of Depo Clean on my site: memo.ryecroft. The site looks clean and aligned on Safari/Firefox, but when viewed through the IE7 the first entry’s alignment is slightly off to the right, and any entry or text below that is offset again to the right. You’ll be able to see when you look at the site.

    I know I can use an IE hack to correct the first alignment problem, but for the life of me, I can’t figure out why the second entries are offsetting again. Any help would be greatly appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)

    You could start by validating the site.

    Thread Starter ryecroft

    (@ryecroft)

    I got the site validated. Two problems were with the Flickr badge script (which was easy to fix) but the second validation problem was with the way WordPress creates the text…there were alot of unclosed <p> tags floating around…not quite sure how to fix that in the future, but I’ll keep my eye out.

    While needed, validation wasn’t the issue, though. Any other suggestions?

    there were alot of unclosed <p> tags floating around

    Were they associated with <!-- more --> tags, by any chance? When adding a <!-- more --> tag, always try to ensure that you leave at least 1 blank line before and 1 blank line after the tag. Another culprit can be code entered via the HTML tab. For example, a few paragraphs inside a <div> block can cause a problem if you didn’t manually add p tags but failed to leave a blank line before the closing </div>.

    With regard to your alignment problems on that first post, change all of your <br clear="all"/> to <br style="clear:all;" /> and add an extra one just after <div class="blogads"></div>. I don’t think the float:right on the blogads is being cleared properly in IE7.

    Thread Starter ryecroft

    (@ryecroft)

    I double checked the <!– more –> tag issue. Cleaned that up and it kind of fixed things. The entries stay in a line…but…

    In IE 8, the site now displays fine. In IE 7 (via the compatibility option in IE8) I still have the problem with the progressive shifting of entries.

    When I added the <br style=”clear:all;”/> to the <div class=”blogads”></div> sidebar…in IE8/Compatability Mode, the entries don’t start until after the sidebar/blogad clears…so I am assuming there is some sort of hack that needs to be done with the CSS to adjust the positioning.

    Yeh – I can see why the clear:all would create a problem. It definitely sounds like that blogads div is pushing the first post over in IE7, though. What about reducing the blogads width slightly? Maybe try 140px? If that ruins the display in FF and IE8, you could serve up an additional stylesheet targeted at IE7 or below using a conditional comment.

    http://www.elated.com/articles/internet-explorer-conditional-comments/

    At least that way, you could rejig the divs in IE7 or below without impacting on the better browsers.

    Thread Starter ryecroft

    (@ryecroft)

    esmi…

    thanks for all your help. I think I got it figured out. The major offset of the entries was centering once it cleared the “blogads” sidebar. So, I went back and found that the content was set to “center”…which was causing the offset after it cleared the sidebar.

    A validated code helps, your suggestion of checking the <!– more –> tags cleared up the inconsistencies…and the “clear all” reminded me of exactly what was happening. It appears to look good in IE8 and in “compatibility” mode…so I’m hoping that should be it.

    Thanks for the help.

    You’re very welcome. Just goes to show that display issues can be caused by a combination of different problems. Validation, whilst it may not be the prime cause, does make it a lot easier to track down the major culprits.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Deop Clean / IE bugs’ is closed to new replies.