h:commandButton with css not the same in IE

Question

I have a h:commandButton with styleClass="waiButton". The generated html is

<input class="waiButton" type="submit" value="Add existing" name="detailForm:j_idt184">

In the css I have the following:

a.waiButton, a.waiButton:link, a.waiButton:visited, input.waiButton[type="submit"], input.waiButton[type="button"]
{
    background: none repeat scroll 0 0 #C7E4F7;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    display: inline-block;
    font-size: 11pt;
    margin: 4px 2px;
    padding: 2px 10px;
    text-decoration: none;
}

Can someone tell me why in all browser but IE my buttons are displayed this way (the wanted one) enter image description here

and in IE this way enter image description here

In FF with Firebug I can see that the button has the right style assigned, while in IE (F12) the style is not assigned...

What is different with IE? Any hint will be appreciated.

EDIT:

The doctype is there:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

EDIT 2:

As said, the DOCTYPE is set, but I noticed something strange: clicking F12 in FF I see in the page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org TR/xhtml1/DTD/xhtml1-transitional.dtd">

while in IE

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->

Could this <!Doctype vs <!--DOCTYPE be the problem?

If yes, why IE set it as a comment? In my code there is <!DOCTYPE ...

just guessing, did you mention doctype at starting of the html code? — Mr_Green, Oct 28 '13 at 14:52
is this issue appears in all versions of IE or Specific IE Version? — SRy, Oct 28 '13 at 14:53
Your CSS is applied from IE7 (in Standards mode only) on, except `border-radius`, which has been introduced in version 9 in IEs. — Teemu, Oct 28 '13 at 15:07
I'm using IE9 and the behavior is the same in compatibility mode too. — Francesco, Oct 29 '13 at 13:42
Please take a look at the console, IE finds errors from your DTD. — Teemu, Oct 29 '13 at 13:45
Like said, [your code](http://jsfiddle.net/YJzvx/) works in IE > 7, except `border-radius` which you can see only in IE > 8... If I put your DTD into a file, IE10 says something like: "`HTML1524: Invalid doctype, the shortest possible doctype definition is .`" — Teemu, Oct 30 '13 at 15:56
... or, [combatibility view settings](http://stackoverflow.com/a/13287226/1169519) in IE. — Teemu, Oct 30 '13 at 18:10

score 1 · Answer 1 · answered Oct 29 '13 at 06:37

1

The border-radius property is supported only for IE9+ browsers. For the css attribute selector input.waiButton[type="submit"] to work for IE8 and earlier browsers, a !DOCTYPE must be declared.

answered Oct 29 '13 at 06:37

Piyush Khera

467
5
9

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Problem found. I found here that if you have an HTML comments before the DOCTYPE declaration, this will trigger the quirks mode.

I shifted the DOCTYPE declaration at the top and now it works...

edited May 23 '17 at 12:05

Community

1
1

answered Nov 13 '13 at 10:12

Francesco

2,350
11
36
59

h:commandButton with css not the same in IE

2 Answers2