WordPress.org

Forums

[resolved] Sidebar dropping below content in IE7 (22 posts)

  1. thewebologist
    Member
    Posted 2 years ago #

    I've read many of the postings discussing that same issue but I still can't resolve the issue. I've tried all of the suggestions but can't find the answer.

    It's more than possible I've missed something with this being my first site launch and custom theme but please help me figure out what to do to get the sidebar appear as they do in Chrome, Firefox, Safari, IE8+.

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Have you validated your pages for errors? I'd guess that was suggested in other threads you looked at?

    Without seeing the site, impossible to give any further help.

  3. thewebologist
    Member
    Posted 2 years ago #

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    No problem, sorry, that was actually my miss. Unfortunately, your layout seems to be put together in a very unusual way...so I'm not sure how to address the problem. Sidebars are typically all in one section -- often floated to the side, but your lower section (the mortgage calculator) is separate from the top part.

    I don't have IE7 but I looked at it in Adobe browser lab and it looks like the lower section is the part that is dropping. You might try floating it to the right and see if that fixes the problem - though you'll need to adjust margins for that to work okay.

    Beyond that, what I'd really suggest is that you redo the layout...as is, I think you are going to have continuing problems with it, perhaps not just in IE. If you're not experienced with layouts and CSS, you could dissect some other themes using Firebug to see how they are put together.

  5. thewebologist
    Member
    Posted 2 years ago #

    It's only divs nested within an aside. Is that really likely to cause that much of an issue?

    Thanks for the help

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Did you try changing the float to right?

  7. thewebologist
    Member
    Posted 2 years ago #

    I have just tried it with no luck. As far as I can see there are no clears, float or width issues. Very confusing and frustrating

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    How did check to see whether it was a width issue?

  9. thewebologist
    Member
    Posted 2 years ago #

    Removed widgets, added text only content, reduced width to 100px. Is that the best way to go about it?

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Reduce width to 1px to make sure.

  11. thewebologist
    Member
    Posted 2 years ago #

    Done that and the issue persists

  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Which bit is your sidebar?

  13. thewebologist
    Member
    Posted 2 years ago #

    Sorry I've been playing around with a fix. It's the Mortgage calculator and Recent Posts on the right of the majority of mortgages pages, e.g.

  14. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    You may have to float left your container, or move that sidebar within the container.

  15. thewebologist
    Member
    Posted 2 years ago #

    I've tried floating all div's I can see involved left, and the *float:none, *display:inline and finally tried adding div{float:left; *float: none; *display: inline} and it still looks the same.

    When you say move it within the container what do you mean exactly? I'm relatively inexperienced, apologies

  16. WPyogi
    Forum Moderator
    Posted 2 years ago #

    If you look at the order of the elements on that page, the <aside class="oneThird"> div (which contains the mortgage calculator) is at the very bottom of the page just above the footer section). It's even below the iframe in the bestbuys div -- which makes no sense at all and is going to be problematic no matter what CSS you use. You really need to change that HTML code to make anything work in IE.

  17. thewebologist
    Member
    Posted 2 years ago #

    That makes perfect sense, thank you.

    How would I go about doing that though as the sidebar is called through the page.php and therefore comes in after the content has been requested.

  18. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Did you create that theme or template? Like I said initially, it's not a real sidebar. A sidebar is typically ONE element that goes the full length of the page -- it can contain multiple elements inside it, but having one wrapper around all of them is what makes it work as a sidebar.

  19. thewebologist
    Member
    Posted 2 years ago #

    I did create the theme. Like I say I'm a complete newb and thought it was the right way to go, if I were to start from scratch I would create a child theme.

    It does have a wrapper around it in the <aside> tag, this then has the two divs within it. There is a margin at the top as a bit of a hack to allow the sidebar to start further down the page.

    So you have the content within a div with a width of 600px and an aside with a width of 320px (and a margin: 424px 0 50px 0 and a couple of divs within it)

  20. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You need to look at the entire structure of the page -- it would need to be something like this below the navigation -- this is just to give you an idea -- not the only way, but a more typical layout:

    Content section
           Main content - float left, set width
               Various divs in here
           Sidebar - float right or left -- can work either way; set width
               Various divs in here, including
               "Remortgaging/contact us"
               "Mortgage calculator"
    End content section
    
    Full width best buys div
    
    Footer
  21. WPyogi
    Forum Moderator
    Posted 2 years ago #

    If you'd rather not redo a lot of work, you might be able to make the page work okay as is if you move the "bad" div inside a div that also contains the "application process" div. I think that's what Andrew was suggesting.

  22. thewebologist
    Member
    Posted 2 years ago #

    Again, makes perfect sense. Thank you for taking the time to explain it to me in terms I understand.

    I'll start looking into how I can add the widgets to the main content as opposed to the sidebar.

    Thanks again

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags