Website doesn't display properly in IE6, Why??

unfortunately ie6 does funny stuff with the margin and padding.

safest way now imo would be to either:

1. add a conditional statement checking for ie6 on the page and then link to a stylesheet for ie6 fixes, e.g.

<!--[if IE 6]>
<link href="style/style-IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Click to expand...
#menu a {
margin-left: 3px;
padding: 7px 6px;
}
Click to expand...
note that only the code to fix the ie6 problem is needed, not all the styling for the element

2. or form within the same stylsheet add what i think is classed as a hack. e.g.

#menu a {
display: block;
float: left;
background: #6AB000;
margin-left: 5px;
padding: 7px 10px;
_margin-left: 2px;
_padding: 7px 8px;
}
Click to expand...
the underscore is only read by ie6. imo this is not as good an option but some prefer to have the code all together.

in future, or you could even try now, add the below to reset all to a specified style. may cause other problems now but worth a try and if not remember for next time

* {
margin: 0;
padding: 0;

}
Click to expand...

edit: sorry didn't say exaclty what was wrong with it but if you can have a play with the padding/margins as this should be the problem.
 
Last edited:
It depends, IE6 is usually fine especially with the Strict doctype. It does however have bugs where it can add a double margin to floating elements and a few others.

As already said, best place to start in future is to reset everything for all browsers and go from there.

Also use conditional comments (1. above), don't use hacks (2. above).
 
If you have problems with the IE double margin bug with floated elements, the easiest way to fix the problem is:

float:left;
margin: 10px 10px;
display: inline

If you add the display: inline; it changes nothing in FF but stops the double margin bug :)

Make sure you are using a reset file, do not use a global one, instead use something like the Meyer reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-size:62.5%;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Click to expand...

Also, use a GIF for your logo not a PNG unless you are going to use a PNGFix, which is hassle sometimes. GIFs can do transparency, just not shadows properly. If ts just a solid transparent background you need then use a GIF, if you need something more "sophisticated" such as a shadow effect then a PNG with a PNGFix such as this

If you start using CSS hacks then your CSS file won't validate so its best to try and avoid any hacks, I'm yet to use one on a website. With a mixture of conditional stylesheets(very very rarely used) and making sure everything works the same across the board I've never had to. Google or these forums are your friend if you get stuck!
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom