Help with fine tuning a layout

Hope someone can help me crack this - I've basically just about got a layout as I'm trying to get it, but its got a couple of pixels out with a couple of things.

The page is here :

homepagenearly.php

And the main CSS file is here :

home_styles_nearly.css

My two issues are :

1. The main image between the red and green sections is displaying as 1px too short in IE6. (I've only got access to IE6 at the moment, so if anyone could quickly check that in 7 and/or 8, that would be great.)

Its OK in Safari, and Firefox (PC and Mac)

2. The real tough nut I've been trying to crack for hours, is to create a 1 px border between the red section and green sections and the main image. (To match the 1 px border immediately at the bottom of the red and green panels.)

I've been playing around with every combination of my <div> widths and margins, and after getting close, then breaking one or other browser, this is as close as I've managed to get it, and in the most browsers.

Hopefully it will be pretty obvious to a fresh pair of eyes though.

Many thanks.

Hi Iain,

Haven't looked at the css yet, but attach screen shots of page in IE7 and IE8 as tested in browsers.

A good resource for you in situations like this is to use Adobe's 'Browser Labs' where you can find out how your pages appear in most platform/browser combinations.

Thanks for that - I just changed my IE CSS to be IE 6 specific - so that seems to have cleared up the IE7 and 8 glitches.

And thanks for the Browser Labs thing - can't believe I haven't stumbled across that before!

Only the IE tester thing, but that's windows only, and pretty flakey.

If you could spot the tweaks to bring narrow the gap between the image and the red and green panels to 1px, by hook or by crook, that would be much appreciated.

I've been tearing my hair out for hours - thought it should just be a case of tweaking the margins, but every which way I went it broke.

You could try this - setting the contenttop div and image widths in home_styles_nearly.css

change the rules in contenttop div to:

#outerWrapper #contentWrapper #contenttop {
	height:218px;
	margin:auto;
	padding:0px 0px 0px 0px;
	background-color: #666666;
	text-align:center;
	width:472px;
}

(You don't need to change the margins from px values to auto, but it makes it a lot easier to adjust the div width and you won't always have to adjust the margins at the same time!)

Then select the image and give that a width of 472px also.

I'm not sure how this plays out in IE, you may have to tweak the ie css too.

Thanks Neilo - that's it looking great now in everything apart from IE6.

The latest version is here :

homepage202.php

And the main CSS is here :

home_styles202.css

If you have any idea what tweak might tidy it up in IE6 that would be much appreciated.

The general cause for this kind of layout issue is that the width of the contents is too wide for the container that it is in. Try reducing the width on the image and contents of the middle column and seeing if that helps resolve the issue.

Thanks Jimmy - I was playing around with it for ages.

At the end of the day, the image will be the same size which ever browser, so should I be able to fix it by playing around with the left and right columns rather than the middle column?

I have managed to get the pic up where it should be though - spotted that IE 6 was adding a padding outside the div, rather than in it.

Hi Iain,

That's a good looking site you have there. Will have a look at the IE6 conditionals a little later, and if I spot anything I'll post back.

I wouldn't make any general adjustments to the image or middle column just yet though.

Its actually very close now - pretty much as it was originally, but exactly as I wanted it in everything apart from IE6.

And I should probably say that I can't take credit for the design - I've just been approached to maintain the site, and maybe give it a refresh at some point. The original was in asp.net, which I'm not familiar with, so have been trying to recreate it in HTML / CSS.

I have tried to tidy a few things up thought - the right hand panel was all screwed in IE6 in the original too.