SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems in IE6 & IE7

    Here's my page I'm having trouble with:

    martcol.co.uk/brightontherapyservice/news/

    The Sidebar does not float properly in IE6 or IE7 and I can't work out why.

    I know some people say don't bother with IE6 especially but this is important to me here because our local authority/government sites are still using IE6 or 7.

    I would really appreciate any suggestions. Right now, I can't even think what to do next.

    Thanks

    martin

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Perundurai, Tamilnadu, India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May be you need to create IE 6 and 7 specific CSS.

    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
    <![endif]-->
    In ie7-and-down.css

    #sidebar { margin-top: -525px; }
    I am not able to find any other solution. May be others can help you out.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks tamilsuresh

    I'm perplexed by this because the problem only exists in this page which is the blog page. I was wondering if the loop is doing something that is throwing the page out.

    Still, maybe there is a CSS fix but whatever, I'm still chipping away at it.

    Martin

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try clear:right; either on the following existing rule or .post
    Code CSS:
    section article {
        width: 625px;
        float: right
        clear:right;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow!

    I don't know what to say! That seems to have fixed it. I understand what clear does but I don't understand what was happening there.

    Still, if feels good that it is fixed and I am grateful.

    Regards

    martin

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

    The problem is that you have floated multiple article elements to the right and then you expect the last bit of static text to wrap all the way up to the top of all the floats but IE7 and under will only wrap the text in line with the very last float.

    That is a bad design flaw anyway and you should float two columns only. One for the left content and one for the right content and then statically contain the content inside each. This will be more robust and work cross browser.

    Just throw a div around those article sections and float it right with the correct width. The float the sidebar to the right with no margins and it will all line up nicely. Never use negative top margins to line things up when you have fluid content as that is a recipe for disaster and only works for the single case you see and indeed will be misplaced n all browsers due to the way that fluid content wraps and fits differently depending on browser.

    That's a massive amount of code for such a small effect though but I guess you are bound by wordpress although I see no need for all the html5 bloat.

    Edit:


    The clear:right that Victor suggests will fix the problem but is basically using another IE bug to squash an IE bug and the best way to go is still to create two floated columns as mentioned already.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Paul O'B

    I see that exactly now and had actually started trying to fix it probably, as you were posting!

    I'm pretty new to WP and now HTML5 but I thought that I would have a go. I can see that HTML5 for a site like mine was not really necessary but hey, I had a go nonetheless. I'm also using a Boilerplate theme based on Starkers which has also had me tied up in knots a bit. Adding a <div> is not so easy as with a static site but now I think I have it and my sidebar is behaving itself.

    thanks again

    Martin

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by martcol View Post
    I'm pretty new to WP and now HTML5 but I thought that I would have a go. I can see that HTML5 for a site like mine was not really necessary but hey, I had a go nonetheless.
    Well we can't blame you for trying and you probably learned a lot in the process anyway


Tags for this Thread

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
  •