29 Oct

IE6 reading text colour for border colour!

In creating a particularly complicated styling for a project I'm working on, I've come across a corker of a bug in IE6.

if (ie6) border-color = color

If you're using td { border-color: transparent; } (which I have to create this specific project effect), then IE6 will literally replace this with the colour of the text in the td.

I only noticed this because the colour of the text in my td is different to the background colour - and wham! In IE6, the border colour is taken from the text colour if borders are transparent.

See the example

View the example in Firefox, then view it in IE6 - classic!

http://jsbin.com/iquyi (to edit: http://jsbin.com/iquyi/edit)

Challenge?

If anyone is up to the challenge, have a crack at getting the transparency working (note that this needs to be on a td and not a div - for which I've seen a fix already).

The long solution is to use border-color: #fff; - but it not as easy as that in my situation since I got lots of different colours to deal with, and it would (and probably will) require a lot of additional, conditional, CSS.

You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)

11 Responses to “IE6 reading text colour for border colour!”

Jamie Thompson October 29th, 2008 at 12:26 pm

one word... lol
Rob Hayward October 29th, 2008 at 12:42 pm

haha! good one to know!

Cheers
Klaus October 29th, 2008 at 12:48 pm

IE 6 just doesn't support the value transparent for border-color, thus it is (correctly) inheriting the border's color from color.
Joe October 29th, 2008 at 1:30 pm

I had the exact same problem a few months ago working on a site and it drove me absolutely bonkers! Unfortunately 80% of users on the project still use IE6. Doh!
Blog Author Remy Sharp October 29th, 2008 at 1:58 pm

@Klaus - damn! You're right. I understand now - since 'transparent' isn't recognised, it's looking for an alternative colour, rather than not colouring it at all:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

http://www.w3.org/TR/CSS21/box.html#border-color-properties
nightS October 29th, 2008 at 5:53 pm
did you consider using javascript to solve this?? I mean let it do the additional work..I'm still a beginner in this domain and when I get stuck with IE6 magic problems I use jQuery to do the work for me...

I tried this and it worked somehow...I don't know if this solution would help..this is what I tested, it's just a sample:
```
$('table').each(function(){
  // background color of the table or you can whatever color you
  // want...the body maybe??
  c=$(this).css('background-color');

  //change the borders
  $(this).find('td').css('border-color',c);
});
```
Yansky October 30th, 2008 at 3:40 pm
Remy, what about using an expression with a filter in the CSS? It's pretty hack-ish, but its kind of neat as well.
e.g.
```
td {
    border: 2px solid transparent;
    border: expression(filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50));
    width: 75px;
    font-size: 40px;
    padding: 10px;
}
```
I don't think that works, but you might be able to use a different expression or filter or summin...
http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx
Sean Curtis November 2nd, 2008 at 6:58 am

Remy you could increase the padding by 2px for when the border is transparent (padding 42px, border none). I'm guessing you want to change the border color to something either on hover or depending on some particular scenario?
xhlv November 6th, 2008 at 9:58 am
"transparent" in IE6 is very strange. You can do like this :
```
td {
	border:2px solid transparent;
	_border-color:tomato;
	_filter:chroma(color=tomato);
}
```
gcyrillus August 27th, 2009 at 9:59 pm
hi ,

why don't you use just conditionnal comments or !important to erase border and increase padding of 2 pixel ?

ex: with !important :
```
td {
border:2 px solid transparent!important;
border:none;/* IE6 and less */
padding:10px!important;
padding:12px;/* IE6 and less */
}
```
since transparent is not understood by IE6 , color takes defaut value , so text-color . The funny thing is that it still gets part of it (border-style & border-size) .

Little late to answer , but just got lost here
Just remenber , if one rule is not understood , the previous or default value will be used .

opacity , radius , box-shadow , ....for instance (tempting to use hey ! , ) :
declare first the one that would be understood by older or specific browser then regular one:

Once older browser gets update , it might turn to the right one if it stands last without express need to clean CSS.

Conditionnal Comments are really usefull for those funny IEs .

GC
anh January 21st, 2010 at 3:37 am

aaahhh! i've been searching for this code but for making text transparent itself ^_^
when i use
input{color:transparent}
input:hover{color:plum}
it works well with GC, FF, Opera, Safari but IE(text color is black always). i was so sad till i found this on your page \_/7 have a nice day