IE8 css border rendering

[Duncan Rounding]

I'm trying to solve a problem with IE8 - IE6, 7, FF etc are ok.

I have styled a number of input boxes with a thin border so that the input box is seen easily on the white background. The border doesn't show in IE8 though.

Below is some typical code and the styling. Can anyone help me resolve why this is happening and what to do to fix it for IE8 please?

<input type="text" id="QS" onfocus="this.value='';" value="Quick Search" size="15" name="SS"/>

#QS {
border:thin solid #CCCCCC;
}

.searchfield {
margin-top:-2px;
padding:0;
}

[grantglendinnin]

IE8 seems to be having quite a few problems with borders.

A dirty hack like below would solve the problem for V7+ users, partially, but obviously isn't advised:

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

IE8 seems to be having problems with 'border-style' element, perhaps you could try this:

border: 1px outset #CCCCCC;

[grantglendinnin]

Also, what happens when you try:

#QS {
border-top:thin solid #CCCCCC;
border-bottom:thin solid #CCCCCC;
border-left:thin solid #CCCCCC;
border-right:thin solid #CCCCCC;
}

Not ideal, just wondered how IE8 would behave

[Duncan Rounding]

I'll give those ideas a go - thanks Grant.

[leehack]

#QS {
border: 1px solid #ccc;
}

would be my starting point, i've never used the thin option before, not sure what it gives you if indeed anything less than 1px, can't see how it can personally though.

You mention you are doing it on a few of them, yet you seem to have created an ID, is there a multiple ID issue on the page possibly? Create a class and apply the class to the input box instead for multiple instances if so, that would solve that part.

[Duncan Rounding]

It's only the QuickSearch that has the id - other pages have a class - no duplication of IDs on one page.

I've not optimized the css to combine the classes hence the class and id on the example.

I have a feeling it's the thin vs 1px that's the cause. I can only try perhaps tomorrow but I'd bet a buck that's it.

Ta

[Steve G Griggs]

Borders and IE 8.

Hi all.
IE 8 apparently has a bug in it's rendering of borders whereby if you have multiple values in a border property, the border-style is not recognised.
if you declare the border style seperately after the border property, it gets interpreted correctly.

Standards compliance??