Reputation: 51
The below code is not working in Internet Explorer 6. I can't put class
or id
in it. Are there any CSS hacks for that?
This code is in WordPress. I can't modify the code; I can only modify the CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
form input[type=submit]{
background-color:#FE9900;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:1px solid #000066;
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<FORM action="">
<INPUT type=text name=s>
<INPUT type=submit value=Search>
</FORM>
</body>
</html>
Upvotes: 3
Views: 18340
Reputation: 655845
The Internet Explorer 6 doesn’t support the attribute selector [attr="value"]
. So there is no way to address that submit input element with CSS only (IE 6 doesn’t support the adjacence selector +
and :last-of-type
selector neither that would help in this case).
So the only options you have is to either make that element uniquely addressable by adding a class or ID or wrapping it into an additional span
element.
Or – as you’ve already stated that you can’t do that – use JavaScript to select that element and apply the CSS rule to it. jQuery can make this fairly easy:
$("form input[type=submit]").css({
"background-color": "#FE9900",
"font-weight": "bold",
"font-family": "Arial,Helvetica,sans-serif",
"border": "1px solid #000066"
});
Upvotes: 3
Reputation: 1915
Instead, give the input a class, and then style it from there. Like this:
<input type="submit" class="myClass" value="Search" />
And then style the .myClass in your CSS. This should also work in IE6.
Upvotes: 11
Reputation: 34421
You're right, it doesn't work.
Quirksmode.org is an excellent site with browser compatibility info:
http://www.quirksmode.org/css/contents.html
Upvotes: 5