IE vs Firefox display issues

[AdminAdmin is verified member.]

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]

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

S

 

[philliph]

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

http://validator.w3.org/

 

[denchomsky]

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.

/*----------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]

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

 

[tifosi]

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

 

[fermes]

thanks for reply! Will check that out