The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [solved] Sidebar issues with Firefox

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #30244

    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;

    i need to see your html as well, post a link to the website


    Sorry I managed to fix this. I just had to change a section to a div.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.