Support » Fixing WordPress » Sidebar pushed over in Firefox

  • Resolved jamesfiv

    (@jamesfiv)


    My sidebar looks fine in IE, but is pushed to the right in Firefox, squeezing the content downward.

    I tried position: absolute, but that just pushed the sidebar nearly off the page. Right now I have it in with position: relative and float: left.

    I tried putting the sidebar in under The Loop, but it just got stuck below the content.

    Does anyone know how to get the sidebar to the left in Firefox with the text next to it rather than under it?

    My blog: http://www.jamesfive19.com/blog/

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter jamesfiv

    (@jamesfiv)

    I already validated the blog with W3C before I started the thread, the blog checked out ok. Do you mean the CSS by itself?

    Thread Starter jamesfiv

    (@jamesfiv)

    Went to your link, thaKing. Oh boy, it looks like I have a lot of work to do… I’ll validate the CSS first and then ask again if the problem persists. I’ll try not to forget to close this thread if it works, if not then I’ll get back here within a few days I hope. Thanks for the tip!

    the only thing you “need” to fix are the errors…the warnings are less critical…

    Thread Starter jamesfiv

    (@jamesfiv)

    I DO feel good about myself today! I fixed all errors in the CSS (did XHTML before) – and even pasted my trophy W3C buttons into the sidebar. Took a quick look at the warnings, but all is ok, no need to change them.

    But the sidebar is still off to the right in Firefox. Confused. I still don’t get it.

    ypour content is simply too wide for the fixed width.

    For starters look at this page, specifically where the title of that post ought to be:

    http://jamesfive19.com/blog/?p=89

    either you need adjust your current CSS so that it knows what to do with extra long titles, or you need to shorten that, considerably. Its also an OBVIOUS problem on the front page.

    you have major issues on that site beyond what I can figure out.. You do realize that your sidebar is supposed to be on the left, dont you? Atleast thats what I see when I use firefox’s web dev extension.

    I can show you an image:

    http://www.village-idiot.org/broke/wtf.gif

    Amazingly, THAT page only looks that way once Ive turned on the 2 settings in web dev.. looking at it normally shows me a sidebar on the right hand side.

    I would set all those posts as drafts, make one post, NOT by copying and pasting, but by typing into the write post box, and see if that small post displays where it should.

    If not, youve hosed something up beyond just a simple posting problem.

    Ill hazard a guess and say that youve attempted to modify a working theme and have borked things seriously. Best bet would prolly be to reupload the original files, and start again OR find a theme that more closely resembles what you want as a finished product.

    Thread Starter jamesfiv

    (@jamesfiv)

    I see that the title did mess things up. I’ll have to read up on how to fix that in CSS.

    The sidebar is on the left in IE – which I usually use. I only recently started using Firefox and noticed the huge problems.

    If you look at the front page of the blog in IE, the title of that post is cut off, but the sidebar is still where it should be. But I’ll get to the CSS now. Thanks.

    Thread Starter jamesfiv

    (@jamesfiv)

    Instead of messing with the css for titles, I just shortened the title. I found one post that was too wide because of code, so I changed the size. I narrowed the content.

    Unfortunately the sidebar is too far to the right in Firefox, its position completely unchanged.

    Thread Starter jamesfiv

    (@jamesfiv)

    Whooami wrote: “You do realize that your sidebar is supposed to be on the left, dont you? Atleast thats what I see when I use firefox’s web dev extension.”

    When I look at the link you gave, I see that the sideboxes are on the left, but that the sidebar and content are ordered up above, below the header image. I still don’t have the foggiest why that is happening.

    Thread Starter jamesfiv

    (@jamesfiv)

    I may take a look at the original php for suBLUemenal tomorrow.

    one thing you have is
    #content {
    width: 520px;
    margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 240px;
    }

    reduce that last one to say 20 px and that will at least move up your content…or it should….

    Thread Starter jamesfiv

    (@jamesfiv)

    I fixed the width like you said, thaKing, and found that the text jumped up to the left of the sidebar in Firefox, it was still on the right of it in IE. I then changed the sidebar float from left to right, and adjusted the margins a bit and it seems to work well enough. The look in Firefox isn’t ideal, it still looks better in IE, but at least the sidebar and content are next to each other.

    I think that whooami’s suggestion was right, too. The original suBLUEmenal probably has the sidebar on the right, and just couldn’t take a change to the left. I still want it on the left sometime, but am happy that the site looks halfway decent in Firefox now.

    I was using the large left margin of the content to force it to the right and the sidebar up to the left, but it just wasn’t the right solution for Firefox no matter what I tried.

    I’ll consider the case resolved for now. Thank you thaKing and whooami for your quick and patient support! 🙂

    glad it is working, even if not perfect…

    This is 12 months late, but I just worked through almost the same issue, so I thought I’d put it up anyway:

    When using CSS for page layout, you need to be careful when using ‘margin’ and ‘padding’ – reason is that IE interprets them differently from other browsers!

    e.g. imagine this code:

    div {
    margin: 5em;
    padding: 4em;
    border: 1em solid green;
    width: 30em
    }

    This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.

    In IE however, the “border and padding are included in the width” of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em.

    (All the above information is from – http://www.codeproject.com/html/css-internet-explorer.asp, which also has a ‘hack’ to work around it!)

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Sidebar pushed over in Firefox’ is closed to new replies.