form has background image... and so do other things in ie :(

[johnyboy]

hi,

i've just noticed the background image which i have as the background of two forms on the same page is being also used as the background of some elements in the forms by ie

i found an odd problem/bug with ie and form elements having a left margin just recently (the "IE inherited margin on form controls bug"). (-- hence the conditional comments in the head of the file i'm about to link to, to cope with that problem).

the form's background, a test one to make it clear where it's being repeated when it is (which hasn't worked very well so i've put notes on the screenshots where it's repeating), should look like:



but in the ie 7 it looks like:



and in ie 6 it looks like:



here's the page those screen shots are taken of: http://www.hdbatik.co.uk/ectemp/b/contact-test.html

there are two background images set like so (in the head of the linked to web page):

form {
	background:blue no-repeat url(images/purple-cyan-bg.jpg) top left;
	...
}

form h3 {
	background:red no-repeat url(images/red-yellow-bg.jpg) top left;
	...

so the purple-cyan-bg.jpg background is being applied to other elements in the form(s) in ie. how can i stop ie from doing that?

any suggestions would be great, thanks

[johnyboy]

for the record using a table to lay the form items out, rather than using divs and float:left solved this problem and also solved the IE inherited margin on form controls bug i was getting.

basically the form inputs were inheretting margins from an outer (to the form) div and were inherring the form background image.

to get horizontal layout of the form (2 columns basically), rather than using divs round each label and input pair and floating left, using a table allowed much the same layout while avoiding unwanted inherriting of margins and backgrounds on the form elements.

just removing float:left on the form items solved the inherreted background problem (but obviously lost the wanted horizontal layout) i was seeing in the ie's.