Sidebar css width issue only shows in IE

gigag04
(@gigag04)

19 years, 10 months ago

http://www.shakingthegates.com/blog/ is the site.

At present, it shows fine in FF/Flock and in IE 7. In IE 6 however it shifts the side bar down to the bottom, starting right below the content but on the right of it of course.

the css for the site is:

http://www.shakingthegates.com/blog/wp-content/themes/industrial-08/style.css

The content is float: left and the sidebar is float: right from what I can gather (still semi new to this). If a make the #sidebar width 150px, it will display “properly” as in to the right of content. Currently it is the correct value of 198px. I’m not sure if that helps but I thought I would throw that in there.

I don’t want to change the width of my sidebar, but I’m wondering what I need to add/change in the .css to make it show up correctly in IE.

From I’ve gather reading on here is that IE “overflows” (not in the css way but in the not enough room way) the sidebar to the bottom since it won’t “fit” next to the content container.

Any help/ideas are appreciated in advnace!

-nick

Viewing 9 replies - 1 through 9 (of 9 total)

vkaryl
(@vkaryl)

19 years, 10 months ago

In general, IE6 has problems with content width due to the borked box-model. So you need to take a look within the sidebar content and/or the post/entry area content for something that’s larger than the stated widths for both/either.

Sometimes it’s a post, sometimes a graphic, sometimes an extra-long link….

Thread Starter gigag04
(@gigag04)

19 years, 10 months ago

THanks for the reply. Still nothing though.

I removed the image, the adsense, and the referals all from the sidebar (those are the 3 things I added) and it still doesn’t want to behave.

Anything else to check?

Also – how come if I made the sidebar container (div) narrower it will fit in IE? If the content was too wide would it not be squeezing it down in this scenario as well?

thanks again!

-nick

vkaryl
(@vkaryl)

19 years, 10 months ago

If you make the sidebar div narrower, then IE6 is “less broken” – due to the way it adds margins and padding. Try fiddling with the post entry div width – make it narrower, leave the sidebar div alone…. and see what happens.

Thread Starter gigag04
(@gigag04)

19 years, 10 months ago

Ok –

I cut the width of the content div (which I assume is the same as post entry) in half, to 300px and the problem persisted.

What about padding/margin issues?

I haven’t changed those values at all from when I loaded the template though.

Let me know if any of you have any other thoughts.

I’ll keep banging on it.

thanks

-nick

vkaryl
(@vkaryl)

19 years, 10 months ago

Hi Nick – well, due to circs beyond my control, right now I can only access IE7, and your site looks fine in it, as it does in anything gecko based.

So I’m only guessing about the IE6 situation, and my guesses you’ve already proved weren’t on target. Hopefully Yosemite or Handy or Moshu will have something better for you in a bit.

Sorry!

moshu
(@moshu)

19 years, 10 months ago

(which I assume is the same as post entry…

Nope.
You have:
wrap
and inside that:
content and sidebar (the rest are details)
Now, the width of content+sidebar+borders+padding+margins… alltogether cannot be wider than the wrap even by 1px –> it will kick down the sidebar in IE.

Thread Starter gigag04
(@gigag04)

19 years, 10 months ago

moshu –

thanks for the heads up on that.

I went in and tried setting the #wrap width to auto, and then I tried something big like 800px and niether of those worked.

Should I try shrinking the width of content+sidebar+borders+padding+margins? If so where should I start?

Thanks for y’alls help! I’m learning slow.

-nick

dnabob
(@dnabob)

19 years, 10 months ago

I resolved this problem which was apparently caused by some text that I had copied from an e-mail into TextPad. I deleated the original post and started again by re-typing the text in a new TextPad file. When I pasted that text into the new post, the page formating returned to its former state with the sidebar at the top.
May not be the same cause, but the sidebar drop was the same.

yosemite
(@yosemite)

19 years, 10 months ago

I still recommend using a conditional comment (in header.php) that is ignored by every browser except IE 5 and earlier that adds an IE specific stylesheet. Then tweak away at the IE css sheet (usually removing margins/padding).

This will make it work in IE6&5 and won’t break anything in IE7.

Take a look here: WordPress Troubleshooting: My blog looks horrible in IE!

EDIT: BTW, this is how M$ recommends you do it.