SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    transparent border doesn't work in IE?

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

    Code:
     
    .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. #2
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try
    Code:
     border-style: none;
    or
    Code:
     border-style: hidden;
    Both should work in IE too.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by krayziepjf
    When specifiying a class in css, and specifiying the border and color like so:

    Code:
     
    .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.
    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. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use margin instead.
    i.e.
    Code:
     .outer { margin: 130px;}

    Andy
    From the English nation to a US location.

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by krayziepjf
    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.
    If you found your answer that's great :-)

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

  7. #7
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •