Check out my latest project: JSBin - live JavaScript pastebin
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.

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

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

    one word... lol

  2. Rob Hayward October 29th, 2008 at 12:42 pm

    haha! good one to know!

    Cheers :)

  3. 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.

  4. 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!

  5. 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

  6. 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);
});
  7. 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

  8. 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?

  9. 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);
}
Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight