What is wrong with these margins?

You know, the aim of this whole “exercize” was to make possible for whoever wants to jump into helping you – to have to look only at the specific issues related to the misplacement of the sidebar (and content text), without guessing which of the 35 errors might be at fault.

Now a knowledgeable CSS expert can focus on your sidebar ??

the site is www. modeblog .nl and the site looks good in IE6, but in Opera 9 and IE7 it looks messed up.

This is very tell-tale. It tells me you designed the site in IE6, and then decided to check other browsers afterwards. HUGE mistake. (You should see what it looks like in Firefox!)

IE (especially 6 – IE7 is a bit more standards-compliant) is in its own little world when it comes to design. Most every other browser out there conforms to standards, but IE renders styles in it’s own way. So when you code for IE, you code in a bad browser – and it’ll break in everything else.

You *should* code for standards-compatible browsers – Opera is a good choice (as is Firefox). If you can get your site looking good in one of those, then fixing IE is a snap. But if you try to “fix” other browser to conform to what you’ve done with IE, then what you’re trying to do is break every other browser out there – and you’ll just end up with a HUGE headache.

That’s tip #1 for you!

That you for the tip doodlebee.

When the site was made 7 months ago I looked at statistics and here in The Netherlands 91% of the users used IE6, 5% Firefox, 1% Opera and 3% other browsers.

So I tested the site with IE6 and Firefox to reach the majority of 96%. Now that IE7 is starting to gain market share from IE6, I noticed that the site was not compatible with IE7 and also tested it on Opera.

Its interesting to see how the statistics have changed here. 81% of the users used IE, 7% Firefox, 5% Opera, 2% safari and 5% other browsers.

So now I would like to make the site compatible with at leased IE7, Firefox and Opera.

Statistics are fine to go with, but you should *always* code for standards-compliant browsers like Opera or Firefox – even if your stats don’t show many users with it. The fact is that people *do* use other browsers. Why alienate those people, no matter how small the margin?

If you code for standards-compliance, then *everyone* will see your site in it’s full glory. Even IE users.

Code for Opera or Firefox first – trust me on this (I’ve been designing sites for about 7 years now). IE (even IE7 – it still has it’s issues) is *easy* to fix once it’s perfect everywhere else.

I am definitely going to do that with my future sites. So how can I fix the current problem?

I see you are using a theme called “mode2” – is this the original style sheet? Or one you have modded? Perhaps it is best to roll back to the original then make changes one by one and testing them – for validation and looks.
I still don’t get the (-) you have in your margins. Have you played with this any?
btw, it’s stretching FF 1.5.0.7 also. Some of the content in the sidebar is lost.

Next up – while we wait for a *knowlegeable CSS expert* to show up – we need a uri. The guys need to see the layout, the markup, the CSS and they need to use Firefox Web dev. All of which requires the uri.

It’s up above:
https://www.modeblog.nl

That’s true as well – usually, you have a negative margin like that (to answer you, samboll – I’ve used that method before) when you have your content div set to 100%, and then you want the sidebar to be pulled into place. You set the content at “width:100%;”, the outer #wrapper div at “width:800px; padding-left:150px;” (to give the outer container a width of 950px), and then pull the sidebar in by adding “width:150px; margin-left:-150px;”

I use this most often when I need to have an outer container stretch to 100% of the browser window screen – it’s a CSS trick.

But yeah, this theme looks like it’s been messed with quite a bit, because the margins and stuff are totally out of whack and are throwing the original idea (or what I assume to be the original idea) out the window.

I’d definitely go with Sam’s idea there and redo it – I tried messing with it myself, and it’s going to take a *lot* of work to fix it – not just one thing.

OK.

#content {
float: right;
width: 620px;
}

#sidebar {
float: left;
width: 257px;
}

Thats it.

@doodlebee & samball
I took a theme that had the sidebar to the right and looked nothing like this page and changed it all.

@root
Its pretty close ?? Just abit far from the head now.

Its just fine tuning now. Good luck.

Thank you verymuch Root,

Is the best way to fine tune using margin: or padding: in the stylesheet?

Dont use margin / padding in the horizontal plane. Vertically either would suit. Its trial and error really.

“Vertically either would suit.”

I don’t understand why you mean by that?