#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    4
    Rep Power
    0

    Question Issue with Sidebar placement on Firefox only.


    I'm having a problem with a wordpress theme I'm creating for a site. I'm basically laying out the structure at this point before I start to really style it as I wanted to code everything from scratch (as sort of a hobby/learning experience) and I've wanted to implement things like custom taxonomies and custom post types. Anyway I've got most of the structure (except the navigation) up and working. My single problem right now is that the sidebar is pushed down to the bottom of the page on Firefox on both mac and windows. Every other browser displays it fine, even IE6 (although that one has my footer pushed up below the sidebar instead of at the bottom of the page, but I'll go back and worry about all the IE bugs later).

    One thing I noticed while trying to diagnose this using the various browser developer tools available is that FireBug shows the sidebar as being in between some <section> tags (I'm using html5) and the other browsers show it being below the <section>, if you think of the section as the container div I think it'll give you a better idea of what I mean.

    This is the css, it seems to validate ok:

    Code:
    /* == Reset == */
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section { 
        display:block;
    }
    
    
    
    /* == BASICS == */
    
    body {
        margin: 0 auto;
        width: 960px;
        }
        
    section {
        overflow: hidden;
        width: 600px;
        float: left;
        clear: none;
        }
        
    /* == POSTS == */
    
    article[id*=post-] {
        padding: 10px 0;
        }
    article>header p, 
    article>footer p {
        font-style: italic;
        }
    article+nav {
        font-weight: bold;
        }
    section>h1 {
        padding-top: 10px;
        }
    
      /* == SIDEBAR == */
    
      aside {
          margin-top: 30px;
          overflow: hidden;
          width: 320px;
          float: right;
          clear: none;
          }
          aside li {
              list-style: none;
              }
              aside li ul li {
                  list-style: disc outside;
                  }
                  
            /* search form 
            -------------------------------------- */
            .searchform {
                display: inline-block;
                zoom: 1; /* ie7 hack for display:inline-block */
                *display: inline;
                border: solid 1px #d2d2d2;
                padding: 3px 5px;
    
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
    
                -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
                -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
                box-shadow: 0 1px 0px rgba(0,0,0,.1);
    
                background: #f1f1f1;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
                background: -moz-linear-gradient(top,  #fff,  #ededed);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
                -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
            }
            .searchform input {
                font: normal 12px/100% Arial, Helvetica, sans-serif;
            }
            .searchform .searchfield {
                background: #fff;
                padding: 6px 6px 6px 8px;
                width: 202px;
                border: solid 1px #bcbbbb;
                outline: none;
    
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
    
                -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
                -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
                box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
            }
            .searchform .searchbutton {
                color: #fff;
                border: solid 1px #494949;
                font-size: 11px;
                height: 27px;
                width: 27px;
                text-shadow: 0 1px 1px rgba(0,0,0,.6);
    
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
    
                background: #5f5f5f;
                background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
                background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
                -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
            }
    
    /* == FOOTER == */
    body>footer {
        padding-top: 100px;
        text-align: center;
        overflow: hidden;
        width: 100%;
        clear: both;
        }
    You can check the page for yourself at http://www.jasonfoulke.com/md2/ I don't think posting the html here would really help because it basically includes a bunch of different pages, so the best way to see it is to view source on the page.
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Hi,

    Your problem is that there is no room for the sidebar to be floated up. You have <section> width 600px, and the child <section> takes up 100% width of that 600px because of the default 600px width on it.

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    4
    Rep Power
    0
    Thank you so much. I've been looking at it so long the simplest thing didn't jump out at me.
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    No problem
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo