CODEWITHSUNDEEP
htmlcssinternet-explorerblock
mike
mike

Reputation: 21

submit button and display block in IE

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>

Upvotes: 2

Views: 1155

Answers (3)

doctororange
doctororange

Reputation: 11810

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;
}

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186562

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.

Upvotes: 3

methodin
methodin

Reputation: 6712

If you are testing on ie6 try:

#div1 form .submit {display:block;}

Upvotes: 0

Related Questions