hi, why does the code below put the submit button on its own line in FF but on the same line in IE?
<style type="text/css">
#div1 form input.submit {display:block;}
</style>
<div id="div1">
<form>
hi
<input type="submit" class="submit" value="hello there">
</form>
</div>
Because IE doesn't conform to web standards.
It looks to me as though the form selector is getting in the way, at least with the tripply nested selector:
This works:
#div1 input.submit{
display:block;
}
This works:
form input.submit{
display:block;
}
This doesn't:
#div1 form input.submit{
display:block;
}
The reason this happens is because you are missing a <body> open tag. When the <body> open tag is not explicitly in the HTML, IE (6 at least ) misrenders the document tree and any selectors involving form elements don't work properly.
Here, I added the body tag and it works.
Just yesterday I documented pretty much the same bug. It looks like I'll have to update the description to account for not only the form being unstylable with the body tag missing, but other elements unstylable if its in the selector.
And as doctororange points out, you can workaround this by not specifying form in the selector as well, but I advise you to throw in the <body> tag.