ansaurus

Question

IE8 and border css property on select menus

Answer 1

A:

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.

ILMV 2009-12-10 11:53:56

no joy there either fella. This is a really odd one.

Paul 2009-12-10 12:05:34

Answer 2

A:

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>

jerjer 2009-12-10 11:54:34

have tried 3 different document types and all manner of css including not using any shorthand.no joy...

Paul 2009-12-10 11:57:49

have you tried adding type on style tag?

jerjer 2009-12-10 12:09:21

good point, try <select style="border: 1px solid red;">

ILMV 2009-12-10 12:12:30

certainly have...

Paul 2009-12-10 12:14:41

please see my updated post

jerjer 2009-12-10 12:22:13

I've tried adding the style directly to the element too...

Paul 2009-12-10 14:56:54

Answer 3

+2 A:

try putting this in your HEAD tag:

<meta http-equiv="X-UA-Compatible" content="IE=100" >

as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Dave Markle 2009-12-10 12:25:04

ansaurus

tags:

views:

answers:

IE8 and border css property on select menus

related questions