Skip to:
Content
Pages
Categories
Search
Top
Bottom

Help with css layout

  • I’ve skinned up the BBPress Kakumei theme and am running into a layout issue that I can’t problem solve.

    As you can see on this screenshot, the title “Latest Discussions” above the ‘Latest’ table is getting pushed to the right of my screen (i put in a red box to show the problem). On Safari it acually pushes the whole table as well.

    http://www.aists.org/images//problem-screenshot.jpg

    I have scoured my html and css and am not expert enough to figure this out. Can anyone suggest how to resolve this?

    Thank you very much

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

  • Olaf Lederer
    Participant

    @finalwebsites

    I think the title is embedded inside the table, you need to “isolate” that header element

    Thanks for the quick reply Olaf.

    Nope, unfortunately the title isn’t in the table. It is sitting above it in an h2 tag.

    I’m really pulling my hair out at this one.


    chrishajer
    Participant

    @chrishajer

    Can you post a link to your forum please? I’m having a hard time finding it.


    chrishajer
    Participant

    @chrishajer

    In Safari and Chrome on Windows XP it looks like this with the whole table pushed over, in line with the heading.

    http://chrishajer.com/bbpress/sset-chrome.png

    In IE8 and FF3.5, it looks like mdolf’s screenshot.

    I think that might help someone figure out why it’s all aligned like that. It didn’t make sense to me for just the heading to be over there and the table look fine.


    buddha trance
    Member

    @buddha-trance

    The problem is with the menu tabs. If you cut the html part out, the heading aligns fine.

    I tried some css changes, but to no avail. Really odd… in any event, the problem seems to fix itself if you add a div with some height (40px), like this:

    <div id="blog-menu" class="clearfix">
    <ul>
    <li class="about"><a href="/about-2">About</a></li>
    <li class="join"><a href="/join">Join</a></li>
    <li class="blog"><a href="/blog">Blog</a></li>
    <li class="contact"><a href="/contact">Contact</a></li>
    <li class="wiki"><a href="/wiki">Member - Wiki</a></li>
    <li class="forum"><a href="/forum">Member - Forum</a></li>
    </ul>
    </div>
    <div style="height:40px;"></div>

    There must be some other solution, but at least there is a quick fix for now, and you know where to look for the source of the issue.

    Hope this helps.

    Thank you buddha trance, that did solve the issue. I wouldn’t have thought to add an extra div.

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Skip to toolbar