help please...

The index page on my website

www.fatbeetle.com

looks fine when I open it at home, on both firefox and IE.

However, when I open it at work, it's virtually all one column, instead of two.

Can anyone advise please?

Which browser did you use at officer? And what is the version of the browser?

Patrick, it's Internet Explorer at the office,version 6.0.2800.1106CO .

Thanks for taking interest.

Well, I can confirm the problem in IE6.

I'll offer a guess as to what's going on, but I haven't done any testing to know if my guess is correct. From the looks of things, your sidebar content is overflowing the width of the sidebar that you specify in your stylesheet. Because of this, IE6 expands the width of the sidebar despite your declaration of how wide it should be. When it does that, it realizes that .sidebar width + .content width is greater than can fit inside .bodyi, so it knocks .body downward. The reason for the overflow, I think, is the padding you've put on the sidebar content.

Now with numbers, here's what I think is going on:

To normal browsers:
bodyi has width of 532px
content has width of 362px
sidebar has width of 162pxpx
362px + 162px = 524px
524px < 532px, so everything works.

To IE6:
bodyi has width of 532px
content has width of 362px
sidebar has assigned width of 162px
sidebar content has width of 162px
sidebar content has padding of 24px
sidebar has actual width of 162px + 24px = 186px
362px + 186px = 548px > 532px, so things break.

I suspect, but will leave you to prove or disprove, that if you increase the bodyi and body widths to 548px or higher, everything will work fine everywhere.

Wow, thanks very much.

I take it I have to make those adjustments on the CSS sheet, in notepad or something?

I'm very new to this lark.

The page was made using a template page, downloaded off the net, in Nvu.

Again, many thanks

I agree with Alpicola.

It seems IE6 and IE7 interpret margin and padding differently. I had a bad time managing my css files. I'm not a CSS expert yet. But from what I've experienced, be more careful with padding, float.

I don't have IE6 and can't fix the problem. But if it is caused by padding, you can try this method. Basically it is to use margin to replace padding

If you need

<div styles="padding: 10px;">
yourtext
</div>

You can

<div>
<div styles="margin: 10px;">
yourtext
</div>
</div>

In reply to:

---

I take it I have to make those adjustments on the CSS sheet, in notepad or something?

---

Yeah. Just look around in your stylesheet file and you should be able to find all the lines which specify width:532px and change them easily enough in Notepad.

many thanks again, I'll let you know how I get on.

To avoid padding/margin problems in IE6, do not try to set them on any block level element that also specifies a width. It is better to nest that element in another element. See this ancient article I wrote about the CSS box model for a bit more detail on what is going wrong, and why.

-- si-blog --

Still not working, I may write it off and try another template.

Thanks for the advice guys...

I don't bloody believe it!!!

I used another template, and it's done exactly the same...

Maybe if I shrink that first image it'll work?

Hey, here's an idea, if I post the css here, could someone adapt it and show me the changes?
Be most grateful

Bloody Nora, i don't believe it..

It's righted itself, even here at work..

Ok, who used their magic wand on it? :)