Grow your CSS skills. Land your dream job.

page-wrapping div is dropping down

  • # January 1, 2009 at 7:54 pm

    Hello,

    I am working on a WP theme following the screencast 25, 26, and 27. I pretty much followed them word for word, but i get this weird problem when i start working on the posting area.

    I’ve actually found were the problem is, but can’t figure out why it is doing this.

    If put a page wrapping div into the starkers WP theme and then put a wrapping div around the "main-col" as the screencast calls it or the posting area, the page wrapping div immediately drops down from the top.

    I don’t have a live site because i’m working on a local WP install. Just to make things easy, I installed a fresh un-altered starkers WP theme. I did not change anything except for add the two div’s.

    They are labeled as "PAGE-WRAP" and "POST-WRAP".

    I tested it in Chrome, Safari, Flock, FF3, IE7, Opera and it only seems to happen in

    Chrome, FF3, and IE7.

    The other weird thing is that when i delete these two divs that page does not go back to the top left. It stays put.

    Any help would be appreciated.
    Thanks in advance,

    Ch4sethe5un

    Code:
    ?< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <br /> For-Instance


    For-Instance

    Just another WordPress weblog

    Hello world!

    December 31st, 2008

    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

    Posted in Uncategorized | Edit | 1 Comment »

    ?

    For-Instance is proudly powered by WordPress 2.6.2 | Entries (RSS) | Comments (RSS).

    Rob
    # January 2, 2009 at 3:24 am

    is this resolved here?

    viewtopic.php?f=2&t=1394

    # January 2, 2009 at 4:30 am

    thanks

    But i did not have the same error as the other guy. I believe it is a similar symptom.

    I’ve been trying to figure it out all day and i still can’t…

    thanks again,

    Ch4sethe5un

    The style sheets are here:

    Code:
    /* RESET */
    /* —————————————– */

    /* Global reset */
    /* Based upon ‘reset.css’ in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ol, ul, li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
    q:before, q:after { content:”}

    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight: bold }
    em { font-style: italic }
    a img { border:none } /* Gets rid of IE’s blue borders */

    Code:
    /* LAYOUT */
    /* —————————————– */

    /* These rather presentational classes are generated by WordPress, so it’s useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
    .aligncenter { display:block; margin:0 auto }
    .alignleft { float:left }
    .alignright { float:right }
    .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

    /* You might find the following useful */
    br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
    div { position:relative } /* This will save you having to declare each div’s position as ‘relative’ and allows you to absolutely position elements inside them */
    li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */

    # January 2, 2009 at 11:18 am

    so i wanted to see if i could replicate it somewhere else. I think i remember it happening to me in kubricks or the default theme.

    I saw the the theme that you made during the screencasts was available for download so i tried to replicate the same ‘effect’ on the theme. The interesting part was that your theme already had the two divs there.

    And i could.

    All i had to do was remove the ID tag from the body and remove php that ‘included’ the socialsidebar. It them dropped it down like the other things that have been happening to me.

    I’m starting to wonder, does it have to do with the fact that i’m editing with expression web? I’m only using it as a text editor, nothing more. But saving the files in this enviroment, would that affect it in anyway?

    Here is the code to your theme on my local WP install:

    Code:
    ?< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    For-Instance

    Just another WordPress weblog



    Hi. Welcome to the new digs. I was going to put my most recent blog entry right up here, but then I got to thinking that might be confusing. What if I wanted to blog about Sea Monkies one day? People stopping by might think this is just yet-another-site about Sea Monkies. It’s not. It’s actually about…

    31

    Dec

    2008

    Hello world!

    1 Comment »

    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

    # January 3, 2009 at 3:04 am

    hello again,

    So i was able to get a live link.

    I am just using the bar bones starkers theme and i added the two divs with the IDs called: ‘pagewrap’ and ‘postwrap’. If you look at the top it is pushed down even though it is reset.

    http://for-instance.net/

    If anyone can help, please do.

    It has completely stopped my development of this theme and my site.

    Thanks again, in advance.

    Ch4sethe5un

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

You must be logged in to reply to this topic.

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