Float & Box Model problem

M

Marko

New Member
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/images/funkyfresh/smilies/icon_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/images/funkyfresh/smilies/icon_Wall.gif
 
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
 
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
 

Attachments

  • Page-as_it_should_look.jpg
    Page-as_it_should_look.jpg
    36.5 KB · Views: 8
Would you have a screenshot of what it currently looks like in IE6 handy as well, for comparison?
 
IE6 Screenshot

Here is the IE6 Screenshot as required
 

Attachments

  • Screenshot_IE6win.gif
    Screenshot_IE6win.gif
    18.5 KB · Views: 9
Marko said:
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
Click to expand...

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
 
zipped project

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.
 

Attachments

  • Archive.zip
    31.8 KB · Views: 0
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?

Code: 
.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;
	}
 

Attachments

  • barrow-pagefix.zip
    2.5 KB · Views: 2
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.
 
Hi, you're right, I didn't really consider IE5/mac when doing these changes. In fact, I generally don't really give IE5/mac much consideration.

I'm sure someone is gonna disagree with this attitude - accessibility for all is certainly not something I want to underrate - but practically speaking, how many users to you realistically expect to visit the site in question using IE5 on a mac? Microsoft ended support for it in 2005, and if I'm not mistaken it hadn't been updated for years by that time, so it really is pretty ancient. Without having done any research on this, I would expect that many sites these days are somewhat broken or even completely unusable in IE5/mac.

If the site is useable in IE5/mac, albeit visually a bit broken, I would easily settle for that, rather than go out of my way to accommodate the mistakes that some Microsoft programmers made a decade ago and give IE5 users one less reason to upgrade to a modern, fast and secure browser.

Having said that, I'm sure it is possible to fix this to display correctly for IE5/mac too, if you feel it is worth the effort, or you just see it as a challenge :icon_smile: You could have a look at using conditional stylesheets to target only IE6 and IE5 respectively perhaps?
 
I must agree with you. I only added the mac hack bit as it was available, but it created the more problems which I couldn't see!!!

I stopped using IE 5 (mac) about 5 years ago as it displayed a lot of sites incorrectly. I started using icab (which works fine). I'm now using Safari.
 
I wouldn't worry about making sites work on anything older than IE6!

The box model hack is a useful one - now that you're aware of the issue, it should be easier to fix problems in the future.

Another one to watch out for is the IE float double margin bug....if you float left & add a left margin, the margin is doubled in IE6 - setting the display:inline; fixes it.

These two are the most common compatibility issues that I come across when coding.
 
Hey Marko,

Apologies for not being able to get back to you... I didn't even get a chance to play around with the css. I was on Holiday and only checking now and again. I am glad that gman was able to fix it for you. Thanks Gman.

Anyhow, please accept my apologies for promising something that I couldn't fullfil due to my holiday. Not how I wanted to start out on these forums.

Thanks,
Jonathan
 
You must log in or register to reply here.
Back
Top