Support » Themes and Templates » Sidebar issues

  • Resolved Chelsea

    (@chelsea)


    I’ve been fiddling around with the widths for the past few days, and haven’t been able to figure out why the sidebar goes directly under the blog when WP is displayed in IE but the whole thing looks perfect in Firefox.

    The URL is http://unchained-melody.net and the WP version is 1.5

    Thank you in advance for any help offered..

Viewing 15 replies - 1 through 15 (of 21 total)
  • Add the following code in your CSS below the code for your content:

    * html #content {
    display: inline;
    }

    That should do the trick…I had the same problem on my blog, and that’s what I needed. Internet Explorer is screwey when it comes to the box-model.

    No luck. 🙁 It didn’t work.

    Well it maybe. But it doesnt help that folks do not understand the simple steps necessary to avoid this type of thing. Put simply you need more width.

    I’ve added a hundred more pixels to the width – no avail, so I changed it back. I’ve added up the width of the blog and the sidebar – it really should fit.

    IE has issues with CSS to say the least. Chances are you’re a victim of it’s box-model boobery. Bunnygirl’s suggestion would probably work if you were being hit with the 3-pixel-jog bug, but if that didn’t work, you might need to go through all the margins and paddings (at least the content and sidebar ones) and make sure that either they’re cross-browser compatible, or use the various hacks to give different values to different versions of IE.

    Yes, it’s a pain in the butt to have to do, but since MS has no apparent desire to support the same standards that every other browser-maker is supporting, hacks are the name of the game.

    I changed every padding/margin to really small numbers.. grr…

    I hate IE with a passion.

    Where are some hacks? Anyone know of any?

    OMG. I have just read the CSS. This used to be a Gemini template before it was hacked to death

    Yes, it used to be a Gemini. . . .

    . . . Are you saying that I did a bad job editing it?

    You have 550 px of width. 530 of menu and content. Plus padding and margins.
    It is bursting its container. Take put the padding / margins, add colored borders and test and adjust.

    I did.

    It still doesn’t work.

    IE adds margins and padding to the width of a box, but they’re supposed to be included. So if you have 530px of content/menu width and more than 5px of margin AND padding per side in total, it’ll be broken in IE. At least, I think that’s how that works….

    To be honest, I’ve gotten in the habit of assigning 0 margins and padding to all block elements with very rare exceptions. Saves me a LOT of headaches 🙂 Then I can just put a margin/padding on elements that don’t get a specific width (like p and h2 and whatnot) and viola – no more box-model hacking 🙂

    Sigh.. I just removed practically all of the padding / margins completely and it’s screwed up even more. I’ve also added it up so there’s 550px of content and 550px width.

    Well no you havent. The outer container still has a 1px border. That is quite enough to bork it.

    oh yea, borders too (sorry, forgot about that) 🙁

    OK.. I’m working on it.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Sidebar issues’ is closed to new replies.