Hi all!

 

I am new to this forum and i am wondering if anyone can offer me any advice on this problem.

 

I am in the process of designing a website www.carpetcleanerglasgow.co.uk.

 

It displays fine in all browsers (IE8,Chrome,Firefox,Safari etc..) BUT NOT IE6 & IE7.

 

I believe it may have something to do with margins or width but I am at a loss to discover the problem. The code is W3C compliant. I have tried a few hacks - that i have seen recommended - but to no avail.

 

Any advice will be greatly received.

 

I have included the ie6.css file ie6.css(any other info that may be useful - i'll happily oblige).

 

Many thanks.

 

Fitz

It looks fine in IE7. The only difference with Firefox is that the bottom border goes through the white van instead of behind it.

 

In IE6 there is text .clearfix { zoom: 1; } at the top (probably from a style that is not inside style tags) and this is forcing down the whole page.

 

Both IE6 and IE7 have text at the top to upgrade to IE8 and this is also adding to the page height.

 

It helps in IE7 if you edit the conditional comment to increase the footer height to allow for the van and then move the copyright div down:-

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../ie6.css" />
<p>To view this properly please UPGRADE to Internet Explorer 8 or 
view in FIREFOX, CHROME, OPERA etc. Thank you...</p>
<style type="text/css">
#footer { height: 83px; }
#copyright { margin-top: 9px; }
</style>
<![endif]-->

 

You shouldn't really put a p tag in the conditional comment; what you should do is put an id style like #onlyie7 in there with display: block; so that it shows in IE7 and then put the same style with display: none; in the main stylesheet so that it doesn't show in non-IE browsers or IE8 and then put the p tag and text as the first item in the body with the id="onlyie7".

 

You don't need doctypes in conditional comments either.

It looks fine in IE7. The only difference with Firefox is that the bottom border goes through the white van instead of behind it.

 

In IE6 there is text .clearfix { zoom: 1; } at the top (probably from a style that is not inside style tags) and this is forcing down the whole page.

 

Both IE6 and IE7 have text at the top to upgrade to IE8 and this is also adding to the page height.

 

It helps in IE7 if you edit the conditional comment to increase the footer height to allow for the van and then move the copyright div down:-

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../ie6.css" />
<p>To view this properly please UPGRADE to Internet Explorer 8 or 
view in FIREFOX, CHROME, OPERA etc. Thank you...</p>
<style type="text/css">
#footer { height: 83px; }
#copyright { margin-top: 9px; }
</style>
<![endif]-->

 

You shouldn't really put a p tag in the conditional comment; what you should do is put an id style like #onlyie7 in there with display: block; so that it shows in IE7 and then put the same style with display: none; in the main stylesheet so that it doesn't show in non-IE browsers or IE8 and then put the p tag and text as the first item in the body with the id="onlyie7".

 

You don't need doctypes in conditional comments either.

 

Hi.

 

Thank you for the quick reply!

 

The .clearfix { zoom: 1; } was a hack i tried - and never worked. (forgot to update site with it's removal)

 

I have implemented your suggestions for IE7 (and removed <p> tags and doc type (i thought STRICT instead of TRANSITIONAL - may have had an effect?)

 

I use IEtester - but the content text is still below the left hand menu in IE6 and the van still has a line through it in IE7 (OK in IE6), unfortunately .

 

I put in the lame caveat (about viewing/upgrading in other browsers) until i figured out what i could do - it is not part of the problem.

 

Any other thoughts? Anyone..?

 

Kind regards.

 

Fitz

To remove thew line from the van you will have to add position:relative; to the van div, as z-index wont work without positioning

 

Pat

 

EDIT: also margin-top:7px; to be added to the van div for ie7

The van image height is 88px while the footer height is less. I increased it to 83px in my edits but perhaps you should increase it to 88px just for IE until you can find a way to get the van image on top of the border.

 

I tried z-index but couldn't get it to work.

Thanks for your help so far!

 

I put position relative and z-index into the van div - i think this has worked in IE7 - it looks fine using MS Web 3 SuperViewer but still has line thru in IETester?! - however although this is annoying i am more concerned with IE6. It's all over the place.

 

The reason IE6 is important is i know many companies still use IE6 - the company i am contracted too at the moment in Glasgow, plus Cable and Wireless where my partner works both use IE6 (many hundreds of employees). a lot of employees check the net for these domestic, carpet cleaning things etc. - during their lunch hour ;)

 

I am aware that IE6 does not conform to 'proper' W3C standards. but..what are IE6 standards... :wacko:

 

Any other suggestions, to solve this IE6 layout problem, are greatly appreciated. Defintely learning things which i am very grateful for.

 

Fitz.

Thanks for your help so far!

 

I put position relative and z-index into the van div - i think this has worked in IE7 - it looks fine using MS Web 3 SuperViewer but still has line thru in IETester?! - however although this is annoying i am more concerned with IE6. It's all over the place.

 

The reason IE6 is important is i know many companies still use IE6 - the company i am contracted too at the moment in Glasgow, plus Cable and Wireless where my partner works both use IE6 (many hundreds of employees). a lot of employees check the net for these domestic, carpet cleaning things etc. - during their lunch hour

 

I am aware that IE6 does not conform to 'proper' W3C standards. but..what are IE6 standards...

 

Any other suggestions, to solve this IE6 layout problem, are greatly appreciated. Defintely learning things which i am very grateful for.

 

Fitz.

Just had a look in ie6, have you tried putting a negative margin-top in your right div, something like margin-top: -400px; in your ie6 css

 

Pat

Just had a look in ie6, have you tried putting a negative margin-top in your right div, something like margin-top: -400px; in your ie6 css

 

Pat

 

 

Cheers!

 

That has worked - had to do same for menutop also. Right hand border is not right - has something to do with menutop, i beleive - but it'll do for now. Will keep messing about!

 

Thank you both for the help.

 

Fitz.

Sounds like you've got content within a div that's "bigger" than the div. Rather than deal with with it nicely, IE6 & 7 tend to throw the content outside the div completely or it may expand your div causing it to overlap with another div and then causing the same problem.

 

Have a look at your sizes and see if there is anything that might not "fit".