Attention: We are retiring the ASP.NET Community Blogs. Learn more >

A CSS Headache: Message for the IE 7 team

To those working on IE 7 - could you make sure you fix the CSS rendering issue with this:

.class-name
{
   border-color: Transparent;
}

That is perfectly legal CSS 2.0 as far as I understand - and it means I want a transparent border, not a black one. This has bit me several times, and reared it's ugly head again tonight. There's some moderately easy work-arounds that involve switching padding and margin values on mouseOver and sure, they work. It would just make my job as a web developer a bit easier if IE rendered Transparent as Transparent, and not black.

7 Comments

  • Apologies if i'm off-track here, cause its been a while since i did web development, but can't you achieve the same thing with border:none and cell-spacing?



    -x

  • Rex - if you set "border: none" and then set the border color and width to 1px on hover of the element then you get an element that pushes other elements around when it goes from no border to a 1px border. And I'm not sure what you mean in regards to cellspacing. This is a common problem for me with elements that have no cellspacing attribute.

  • There are multiple ways of overcoming this problem.



    One solution is to have a border of the same width with the same color as the background of the element below it.



    For example, there are times where I want my <a> elements, rendered as blocks elements, to have a 1px border when the user hovers over it. To overcome the fact that border:none will cause the alignment to shift, place a 1px border around it to begin with and set the color to be the same as the background color of the <a> or the background color of the container.



    Another solution is to use border:none and margin to simulate this. Again, using an <a> element rendered as a block element, you can set the margin to 1px, which simulates a 1px border in terms of spacing. On hover, set the margin to 0px and set the border to 1px solid.



    So Rex is right; you can acheieve the same effect with border:none, margin:<border-width-here> if you are working with block elements like <div>s.

  • Nice workaround dude, but I think he was asking for it to work properly instead. :)

  • Charles - what do I do if my element background is an image w/ a gradient in it?



    btw, I'm talking about fairly complex stuff here...dhtml toolbars and what not...that's where this problem really hurts..not just with <a>nchors.

  • "Charles - what do I do if my element background is an image w/ a gradient in it?"



    Use the margin workaround.



    "I'm talking about fairly complex stuff here...dhtml toolbars and what not"



    That's nice. Not to sound mean or egotistical, but I have to say it "You want a cookie?" Trust me, I've worked with some pretty badass custom DHTML, cross-browser, primarily CSS based menus. It can be done ;)

  • heh...the mark of a web designer. Never satisfied w/ the way something looks ;-)

Comments have been disabled for this content.