CSS Transparent Border Problem in Firefox 4

CSS Transparent Border Problem In Firefox 4?

if transparent is not work for you then use rgba may be that's work.

Write:

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}

CSS Border Color chrome/firefox

It seems that your problem lies in original Chrome/FF style for inputs - borders specifically. Just specify the border-style as solid and it should give you the desired output

.testinput { border: 10px solid greenyellow;
margin: 80px 100px; }

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Titel</title> </head> <body> <input class="testinput"/> </body> </html>

Jagged edged border issue in Firefox

You can use border-style: inset;

CSS

.btn-play { 
  border-left:50px inset black;
  border-top:40px inset rgba(255, 255, 255, 0);
  border-bottom:40px inset rgba(255, 255, 255, 0);
}

DEMO HERE

CSS arrow rendering issue with Firefox

May be Instead of transparent you have to write this rgba(238,238,238,0)in your css check this for more

CSS Transparent Border Problem In Firefox 4?

Collapsed borders covered by background in Firefox, if surrounded by inline-block and table with caption

Try using the isolation css property. This will isolate each table and may fix your problem.

The isolation CSS property determines whether an element must create a new stacking context. MDN documentation

table {
  border-collapse: collapse;
  margin: 0;
  isolation: isolate; /* added */
}

table {
  border-collapse: collapse;
  margin: 0;
  isolation: isolate;
}

table td {
  padding: 10px;
}

caption {
  font-weight: bold;
}

table.inner>tbody>tr>td {
  border: 3px solid red;
  background-color: rgba(255, 165, 0, 0.9);
}

table.inner>caption {
  color: red;
}

div {
  display: inline-block;
  border: 2px dotted red;
  padding: 20px;
}

table.outer {
  margin-top: 20px;
}

table.outer>tbody>tr>td {
  border: 3px solid blue;
}

table.outer>caption {
  color: blue;
}

<table class="outer">
  <tr>
    <td>outer table without caption</td>
  </tr>
  <tr>
    <td>
      <div>
        <table class="inner">
          <caption>
            inner
          </caption>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>c</td>
            <td>d</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  <tr></tr>
</table>

<table class="outer">
  <caption>
    outer
  </caption>
  <tr>
    <td>outer table with caption</td>
  </tr>
  <tr>
    <td>
      <div>
        <table class="inner">
          <caption class="inner">
            inner
          </caption>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>c</td>
            <td>d</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  <tr></tr>
</table>

How do I make a transparent border with CSS?

You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

CSS triangle issue in firefox

I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...

.arrow-outer {
  border: 2em solid transparent;
  border-right: 0;
  border-top-color: #3bb0d7;
  height: 0;
  width: 0;
}

Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).

Border right-angled triangle

It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.

Crazy CSS Issue in Firefox Only - position fixed and background color

It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.

Try #header { opacity:0.9999999; }

Bugzilla : Bug 677095

EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore

CSS Transparent Border Problem in Firefox 4