Float & Box Model problem

[Marko]

I've been put of using CSS for page layout because of the issues with IE. Last year I had a go, but fell foul when I tested in IE.

I've had a go this weekend (not that I'd had better things to do!!!), hours later I'm still still having trouble. http://www.graphicdesignforums.co.uk...on_cursing.gif

The page looks OK in Safari and IE 8 (and IE5 Mac) but fails in IE6. As I understand it, it's all to do with the IE problems reading the Box Model & Float code!! I've tried all the "fixes" but unable to get it to work in IE 6.

Any advise would be very much appreciated.

The 'test' page in question is found at this URL:
My Content
http://www.barrowpool.co.uk/styles/threefixed-02a.css

I've deleted most things from the html page just to leave the offending bits:

• centre section does not go to the top of the page (between the left and Right graghics, both in float Div's)
• Red background (with L/R cushion graphic) is not correct width.

I've added a measurement to all Div's class to try resolve float problem.

I've added the hack code:
* html .middle {
width: 645px;
w\idth: 595px;
}
to try resolve size problem
http://www.graphicdesignforums.co.uk.../icon_Wall.gif

[creatabledesign]

To me it looks like a clearing issue, try adding a clearing class and then place a div after the middle float with class clear or something along those lines, I have only really peeked at it but when I get a little more time I could take a look into it further for you.

Jonathan

[Marko]

Johnathan,

I've added 'clear: none' to the .middle-top class (yellow Bgd + top pool table cushion image), this class is a container for the .middle class (red background + left & right cushions image).

attached is a screen shot of what the page should look like.

Marko

[gman]

Would you have a screenshot of what it currently looks like in IE6 handy as well, for comparison?

[Marko]

gman,
doing my day job at the mo, I'll post a IE6 Screen shot this evening.

[Marko]

Here is the IE6 Screenshot as required

[creatabledesign]

Johnathan,

I've added 'clear: none' to the .middle-top class (yellow Bgd + top pool table cushion image), this class is a container for the .middle class (red background + left & right cushions image).

attached is a screen shot of what the page should look like.

Marko

Marko do me a favour a sec matey, can you upload a zip file of the project and I will take a look at it on my local dev server. I am currently on holiday hence why it's taken me a while to come back to you. However I may have a little time this evening if you could send it over and I will be able to fix it for you.

Cheers,
Jonathan

[Marko]

creatabledesign,

here is the site, zipped. I've added a second file I was working on. It uses all the same files except for the CSS.

thanks for your help, much appreciated.

[gman]

Below is my take on this; I've removed the relative positioning and the margins on the 'middle-top' div and set it to float:left instead.

The issue seems to have been with the centre section clearing the righthand nav and thus appearing below it. I've added an extra div in the html to get the green background to encompass all the content with the new positioning values.

Whatcha think?

.left {
	float: left;
	width: 145px;
}
.right {
	float: right;
	width: 145px;
}
.middle-top {
	float: left;
	background: #FFFF00;
	width: 645px;
}
.middle {
	background: #FF0000 url(images/cushion-left_right.gif) repeat-y;
	padding: 0 25px 20px;
	width: 595px;
	}
* html .middle {
	width: 645px;
	}

[Marko]

Thanks gman,

I've put your amended .html and .css on the web for all to see:
My Content

My original html/css passed W3C Validation with flying colours. My problem was creating a hack (box model hack) for IE5/6 win, because it reads .middle width as being 545px not 595px (thanks MS).

You amended this by removing the second width 595px. Here was what was in my original css:

* html .middle {
width: 645px;
w\idth: 595px; /* line you removed*/
}

The first width is for IE 5/6 (windows) the second is for IE 5 (Mac) to read the correct width. After you removed it I looked into it further. The IE 5 (Mac) hack does work but IE6 (windows) also reads it!!! so it looks like it did before adding the hack.

I've kept hack as you have it so it works for IE 5/6 windows. If any one has any idea how to stop IE 5 Mac reading this hack (width 645px) and read 595 as listed in .middle class.


Here is the link to where I read about the hack I used:
The Box Model Problem

The above URL takes you to the 2nd page of the article, click previous to read from the start.

Again thanks to gman for digging me out of this hole.