WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts

WeLoveCSS > WEB DESIGN > Browser Compatibility > Sidebar pushing to bottom of page in Firefox only

  Thread Tools Display Modes
Old 15th September 10, 05:38 PM   #1
WLC Member
Join Date: Sep 2010
Posts: 1
Default Sidebar pushing to bottom of page in 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).

One thing I noticed while trying to diagnose this using the various browser developer tools available is that FireBug shows it 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:

/* == 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 {

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 

/* == 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;
And if you want to see what the page looks like and view source its here
demonscars is offline   Reply With Quote

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 07:35 PM.

Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.