Transparent border doesn't work in IE?

HTML & CSS
1

When specifiying a class in css, and specifiying the border and color like so:

 
.outer { border-left: 130px solid; border-color: transparent;}

Does that not work in IE? It works fine in Mozilla, but not in IE. Is there a hack or something I need to apply to the css to get it to work? I also tried border-left-color: transparent and that didn’t work either. In Mozilla it shows the background color through, in IE it shows a black bar.

2

Try

 border-style: none;

or

 border-style: hidden;

Both should work in IE too.

3

Is your background behind the border a solid color? If so, then just give the border color the same value as the background color.

4

You could use margin instead.
i.e.

 .outer { margin: 130px;}

Andy

5

awestmoreland:
Perhaps margin would work in a normal case, but I have an odd box model going on to get a 3 column layout, so the margin, while it does work correctly, throws off my layout.

vgarcia:
Specifiying the color of the background does work in both types of browsers, but I was just picky and wanted to just use transparent instead of having to specify the color.

junjun:
border-style: none; actually removes the width I need from the style, so that won’t work. I need the border to be a width. border-style: hidden; also brought the black bar back in IE.

Thank you all for your quick replies. I will just specify the color and be done. Just wanted to know if I was missing something about IE.

6

If you found your answer that’s great :slight_smile:

border-style: hidden; works great in my IE6 though…

7

border-style:hidden effectively sets the width of the border to 0, while border-style:none keeps space for the border but just doesn’t render it.