Grow your CSS skills. Land your dream job.

Floating sidebar, unclickable text-input & non-working links

  • # August 30, 2009 at 4:17 pm

    I thought I was soon going to be finished with my first wordpress theme, when I realized that the sidebar was not working as I thought I tould it should. I don’t really know why, but I use Opera all the time to see what happens to the blog when I’m writing in Coda. So after adding some few div with links to twitter and facebook in the sidebar, the posts below the sidebar, would not fill out the white area below the sidebar. I posted a similar question about exactly that problem some days ago: http://css-tricks.com/forums/viewtopic.php?f=2&t=4154.
    But when I remove these divs, it seems like everything is as it should be. But I can’t find whats the problem in those two divs.
    So I checked in Firefox and Safari to see what was going on there. It seems like Firefox is living in another world, cause the text input before the search button are unclickable (same in Safari, but as I remembered it worked fine in IE8).
    And only a few links are clickable and hovering as they should be (the last four tags and a the "Follow me" is only clickable in a very small area, just at the top of the text itself).
    Here’s the complete chaos: http://lepton.freehostia.com/index/blog

    But when I edit the index.php file to import the sidebar just before the footer is imported (after the post-loop/page-content), instead of right after the header is imported, then everything in the sidebar seems fine in every browser (although the page-layout gets messed up). An example of that can be seen here http://tinmannsvik.com/twitter#sidebar.
    (The sidebar links and the search-text-input also works fine when I remove the float:right; property from the sidebar-div, but yet again: messed up page-layout)

    How do I fix so that all the links works, so that I can write in the search-field and so that the posts fill out the area below the sidebar, without messing the layout up?

    Oh, and one last thing; I know that I may made the twitter and facebook links in a messy way, but it seems like the icons are pushed further down in firefox (not safari, nor opera) than they should be.

    Thanks to anyone who can figure out of this mess :D

    sidebar.php:

    Code:
    # August 31, 2009 at 1:06 am

    I had a similar problem that appears to be the same as you have. Whatever div you have that is defining that main area (looks like it might be "post-59" div?) is overlapping your content and sidebar divs. It’s not clickable because it’s behind the overlaying div. The browsers are interpreting it differently.

    Others may have a better solution, which I would be curious to hear, but I fixed it by adjusting the z-index of the sidebar so that it laid on top. I suppose you could also change the widths.

    Hope that helps.

    # August 31, 2009 at 3:11 pm

    I just changed the z-index as you said, and now it works the way it should. Many thanks;)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".