We help IT Professionals succeed at work.

css only working  in compatibility mode.

I am working on a css for a table. When running internet explorer NOT in compatibility mode it shows a black border around the table but If I do it in compatibility then it shows it dotted, which is what I want.

what can be done with the css so that it works when we dont work in compatibility mode ?

Also the black border shows when using Chrome

---

<style>
#tablesample {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    width: 65%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 20px;  

    }


#tablesample td, #tablesample th {
    font-size: 1em;
    border: 1px dotted #c4c4c4;
    padding: 5px;
   }

#tablesample td {
  text-align: left;
}

#tablesample th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #ebeef3;
    color: #65696c;
    font-weight: normal;
}


#tablesample tr.odd td {
    color: #000000;
    background-color: #fbfbfb;
  }

#tablesample tr.even td {
    color: #000000;
    background-color: #ffffff;
}

#tablesample tr.odd:hover td {
    background-color: #ffffcc;
}

#tablesample tr.even:hover td {
    background-color: #ffffcc;
}

</style>

---
compatibility.PNG
Capture.PNG
Comment
Watch Question

Top Expert 2013
Commented:
A couple of images and the CSS are not going to tell us anything if we don't have a link to the page, or the markup. It is not likely that the problem is in the CSS, but rather in the HTML.

Cd&

Author

Commented:
Hmmm its a problem because it is an ASP page in an intranet. I will try to create one that can be public and check there.

Author

Commented:
Found the issue in the html .. table hard border = 0
Top Expert 2013

Commented:
Validation would have flagged that because border as a tag attribute is obsolete.

Cd&