IE vs Firefox display issues

Admin · Oct 1, 2007

I have a pretty basic HTML template that uses Divs and CSS for its layout, it looks fine in IE but it is all over the place in Fire Fox.

Anyone have any experience or tips on what Fire Fox interprets differently in the code?

Thanks

Admin

tifosi · Oct 2, 2007

probably better to work the other way round. FF is more standards compliant. Always code for FF & hack for IE (esp 6).

S

philliph · Oct 6, 2007

I find the best way is to make sure your code is valid;

http://validator.w3.org/

denchomsky · Oct 6, 2007

Wel there are alot of things that IE6 interprets differently and slightly less that IE7 does.

Tifosi is right, best to work with FF then test in IE6+7 and iron out problems.

Main concerns will be box model, spacing, margin's, padding, PNG's.

Try always starting your CSS with a leveler, ie CSS that's sets all your margins, padding e.t.c to zero.

I always start my CSS with this.

Code:

/*----------global settings----------*/

body,div,br,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	border-collapse:collapse;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

good luck.

fermes · Oct 8, 2007

Im workin on a small site in dreamweaver and its fine in ff but spacing in IE 6 is Messed up. Any ideas?

tifosi · Oct 8, 2007

fermes said:
Im workin on a small site in dreamweaver and its fine in ff but spacing in IE 6 is Messed up. Any ideas?

It's likely to be box model issues.

Start with a ccs default sheet like above (there's others out there as well which will clear a lot of issues)

Add an ie specific css file using conditional comments ( <--[IE LTE 6]--> & <--[IE EQ 7]-->). Make sure it's after the others!

Use as strict a DTD as possible.

Use google and search for 'hacks IE CSS box model' or similar. Plenty of css sites out there.

stop using wsywigs & hand code! (That's just me, not official!)
S