display problems in ie6

May 21, 200917 yr

I've just designed a small one page site which looks fine in ie7/8 and firefox. its just in ie 6 it looks horrible. any ideas why?

Have used conditional comments for IE and am currently using the ie7 style sheet for both ie6 and 7.

very close to giving up but i know therer are still people who use ie 6 so got to keep trying!

site is: brucemummery.com

HERE IS XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Accountant in St Austell | Bruce Mummery</title>

<!--[if IE 8]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if lt IE 7]>

<![endif]-->

</head>

<body>

<span class="linksHead">Useful links:</span>

<p><strong>Tax and National Insurance: </strong>

<a href="http://www.inlandrevenue.gov.uk">www.inlandrevenue.gov.uk </a></p>

<p><strong>Federation of Small Businesses:<br />

</strong><a href="http://www.fsb.co.uk">www.fsb.co.uk</a></p>

<p><strong>Association of Public Accountants</strong><br />

<br />

<strong>Federation of Tax Advisors</strong><br />

<br />

<strong>Institute of Financial Accountants</strong><br />

</div>

<p class="mainText">You may be starting a new business,

needing advice about accounts, income tax, VAT and other

financial matters. Perhaps you’ve dealt with your own

tax affairs, but now you need help to deal with HM Revenue & Customs.

Or maybe you already have an accountant and you’re looking for a change.</p>

<p class="mainText">I have worked as an accountant in St Austell for over

thirty years. <br />

I know that every client needs service tailored to his

or her specific requirements. My office is part of my home,

and I am always willing to visit clients at their businesses

or their homes to suit them, including evenings and weekends.</p>

</div>

<span class="contactHead">Contact: </span>

<p class="contactText">7 Menabilly Road, <br />

St Austell, <br />

Cornwall <br />

PL25 4DY</p>

<p class="contactText"><strong>Telephone: </strong><br />

01726 65654</p>

<p class="contactText"><strong>Mobile: </strong><br />

07932 234743</p>

<p class="contactText"><strong>Email:</strong><br />

<a href="mailto:brucemummery@btconnect.com">brucemumm ery<br />

@btconnect.com</a></p>

</div>

<span class="subHead">My services</span><br />

<br />

Amongst other things, I deal with:

<ul>

<li>Tax Returns for sole traders, partnerships and individuals</li>

<li>Annual accounts</li>

<li>Payroll and PAYE</li>

<li>VAT Returns and record keeping</li>

<li>Tax advice and planning</li>

<li>Book keeping</li>

</ul>

<p>I have contacts with accountants and other businesses

which provide services outside my field of expertise,

so if I can’t help you, I know someone who can.</p>

<p><span class="subHead">Qualifications</span><br />

<br />

I am a member of the Association of Certified Public

Accountants, the Federation of Tax Advisers and the

Institute of Financial Accountants. Membership of these

professional bodies depends upon maintaining a high

standard of service and upon keeping up to date with

the latest tax developments. To find out more about

these organisations, please click on the links to the

left:<br />

</p>

<p><span class="subHead">Charges</span><br />

<br />

As far as possible, I will agree a fee before

starting work, and this will depend upon the

type and extent of work you need. The initial discussion

is always free.</p>

</div>

<div class="footerText">Valid <a href="http://validator.w3.org/check?uri=referer">

<a href="http://www.dccdesign.co.uk">Web Design Cornwall</a>

</div>

</div>

</div>

</div>

</body>

</html>

HERE IS CSS:

@charset "UTF-8";

/* CSS Document */

body {

background-image: url(../images/top.gif);

background-repeat: repeat-x;

margin-top: 0px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333;

}

a:link {

color: #2C61B2;

}

a:visited {

color: #2C61B2;

}

a:hover {

color: #283C63;

}

a:active {

color: #2C61B2;

}

#wrapper {

width: 800px;

margin-right: auto;

margin-left: auto;

}

#container {

float: left;

}

#title {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 24px;

}

#content {

margin-top: 20px;

height: 270px;

}

#leftContent {

float: left;

width: 175px;

}

#linksLeft {

float: left;

width: 160px;

background-color: #95bcd6;

padding-top: 10px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

height: 470px;

margin-top: 2px;

margin-bottom: 2px;

}

#pic {

width: 170px;

height: 270px;

}

#centerContent {

float: left;

width: 625px;

}

#leftCenter {

width: 431px;

float: left;

height: 255px;

background-color: #ddf1fe;

margin-right: 2px;

margin-left: 2px;

padding-top: 10px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

}

#rightCenter {

width: 160px;

float: right;

background-image: url(../images/righttop.png);

background-repeat: no-repeat;

background-position: right top;

background-color: #c1ddef;

height: 255px;

padding-top: 10px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

line-height: 15px;

}

#leftBottomCenter {

width: 603px;

float: left;

height: 470px;

background-color: #eff8fe;

margin-left: 2px;

margin-top: 2px;

margin-bottom: 2px;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 5px;

padding-left: 10px;

}

#footer {

width: 800px;

border-top-width: 2px;

border-top-style: solid;

border-top-color: #8BAFD0;

padding-top: 5px;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #A2BBD9;

padding-bottom: 5px;

margin-bottom: 10px;

}

.footerImage {

float: right;

width: auto;

}

.footerText {

float: left;

width: auto;

text-align: right;

margin-top: 55px;

}

.mainHead {

font-size: 18px;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #666;

color: #222;

}

.subHead {

font-size: 16px;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #666;

color: #333;

}

.contactHead {

font-size: 18px;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #344C7F;

color: #344C7F;

}

.linksHead {

font-size: 18px;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #FFF;

color: #FFF;

}

.linksText {

font-size: 12px;

color: #FFF;

}

.mainText {

font-size: 14px;

color: #3D3D3D;

}

.contactText {

font-size: 12px;

color: #344C7F;

}

Thanks in advance

May 21, 200917 yr

looks like this is the problem

<!--[if IE 8]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if lt IE 7]>

<![endif]-->

you've specified if ie7 twice instead of if ie6

May 21, 200917 yr

Author

<!--[if lt IE 7]> means if lower than IE 7. thanks anyway tho! i hate ie

May 21, 200917 yr

Look up ie7.js, it makes ie6 act like ie7, should solve your problem?

May 21, 200917 yr

What do you have in the ie7 stylesheet?

Looking at your site in IE6, it looks like a float bug. When you float an element and apply margin in the same direction, IE6 can double the margin causing the layout to break. Have a play around with the widths and/or margins of leftContent, centerContent, leftCenter and rightCenter respectively.

May 22, 200917 yr

Author

Here is the style sheet that is being applied for IE6: I only included the divs that are causing probs. The leftContent and linksLeft are in the right place but it is the centerContent which is being stacked vertically. I have taken out the margins but the same problem is happening.

Is it wrong to float two divs left and one to the right to make three coloumns?

#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}

#container {
float: left;
}

#content {
margin-top: 20px;
height: 270px;
}

#leftContent {
float: left;
width: 175px;
}

#linksLeft {
float: left;
width: 160px;
background-color: #95bcd6;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
height: 470px;
margin-top: 2px;
margin-bottom: 2px;
}

#pic {
width: 170px;
height: 270px;
}

#centerContent {
float: left;
width: 625px;
}

#leftCenter {
width: 431px;
float: left;
height: 255px;
background-color: #ddf1fe;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}

#rightCenter {
width: 160px;
float: right;
background-image: url(../images/righttop.png);
background-repeat: no-repeat;
background-position: right top;
background-color: #c1ddef;
height: 255px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
line-height: 15px;
}

Thanks.

May 22, 200917 yr

Author

managed to sort it. for some reason the floated leftContent was creating a right margin of 2 which was pushing everthing down. so I added margin-right: -2px; which sorted the problem.

cheers for your help anyway.

May 22, 200917 yr

In future, fix ie6 float problems by adding display: inline to any floated divs

May 22, 200917 yr

Author

will do, cheers

May 23, 200917 yr

Good discussion i've learned something new

May 24, 200917 yr

The site I am doing also looks terrible in IE6. But well, there are less and less people using it so should I bother?

May 25, 200917 yr

Fix the ie6 code and add the updated one as mentined in the previous post.

display problems in ie6

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)