I am getting a really strange behaviour when viewing a very simple piece of HTML in IE, served up by IIS. I am at a loss to explain this...
Take the following html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.iWantaBorder
{
border:red solid 1px ;
}
</style>
</head>
<body>
<select class="iWantaBorder">
<option>1</option>
</select>
</body>
</html>
Save as html file to your desktop.
When viewed in IE8, the select menu has a red border.
Now copy the file to a website or virtual directory in IIS 5.1 or IIS6.
Browse to that file in IE8... no red border.
Can anyone tell me what is going on here? I really want a border on this menu. Thought this should be simple to be honest, but I'm pretty much confused!
try putting this in your HEAD tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
This might fix the issue:
<style type="text/css">
.iWantaBorder
{
border:solid 1px red;
display:inline-block; /*this should fix the bottom and right border*/
}
</style>
EDIT:
I have tried replicating the issue, you are right it doesn't work on IE8 but
if you are on IE8 Standards/Compatibility mode it works on IE7 Standards/QuirksMode it does not, don't know why it's not working on IE7 Standards/Quirksmode.
Anyway another workaround is to wrap the select element with another inline element and put the border on wrapper element.
<span class="iWantBorder">
<select>
<option>Sample Option</option>
</select>
</span>
Try this:
border: 1px solid red;
The border shorthand syntax should be weight, style, colour. You appear to have this in the wrong order.
Putting these in the wrong order might put IE8 into quirks mode, possibly causing your problem.
As it was form controls the border won't display in IE8, if you want develop custom select box to display in all browser consistently.
Quirks mode is nothing but document type declaration, if you use strict.dtd in the document type deceleration it will always render in standards mode.
Form controls (Radio button, check box, select box and dropdown) always renders depending on the operating system and browsers unless you develop custom controls.
