This is a problem in Internet Explorer 7 only (and maybe earlier versions of IE).
Here is the problematic page:
http://wwwtest.vishay.com/mosfets/mosfet-hirel-dev/index.html
The horizontal line between the two products listed in the first column is not shown (in IE7). It is shown in Firefox and Google Chrome.
I already played with the following:
border-collapse:collapse;
adding to the TD
The line does appear when I remove the following (unrelated?!) CSS:
table.list-table th {
border:1px solid #eee;
border-right:1px solid #ddd;
padding:1px;
}
Thanks for any tips!
Try something like this:
table{
border-collapse:collapse;
}
table.list-table th {
border:1px solid #eee;
border-right:1px solid #ddd;
padding:1px;
}
Related
I have a dynamic table with 2px solid border in my web page that sometimes contains lots of rows. I am currently using page-break-before and page-break-after CSS properties.
The CSS code is as per below:
table { page-break-inside:auto }
tr { page-break-inside: avoid; page-break-after:auto }
table.table-bordered{
width: 100%;
border:2px solid black;
margin-top:20px;
border-collapse: collapse;
}
table.table-bordered td{
padding: 6px;
border:2px solid black;
margin-top:20px;
}
The main problem is, it is showing underline when page breaks.
How can I solve this issue?
Thanks in advance.
This is how it looks like in IE:
I tried using this method below but it only works partially. Meaning, if I would to type the invalid pattern the border is fixed to 2px and when I click anywhere outside the textbox it revert back to that thick line.
#openSeason [type=text]:invalid
{
border: 2px red solid;
}
However, it does work on Firefox and Chrome. This is how it looks like in Firefox and how I want it to look like in IE11 too:
use outline:none;
#openSeason [type=text]:invalid
{
border: 2px red solid;
outline:none;
}
I can't understand what do you want but maybe this is your answer:
please see this code
fiddle
#openSeason[type=text] {
border: 2px solid;
border-color:black silver silver black;
}
#openSeason[type=text]:hover, #openSeason[type=text]:focus{
border:2px solid green;
}
#openSeason[type=text]:invalid{
border:2px solid red;
}
I have a CSS file with the following:
.mainTable
{
width:100%;
border:solid;
}
.mainTable td
{
border:solid;
text-align:center;
}
In firefox and ie all the td's now have a border and are center aligned. However chrome simply ignores it and the td's are not formatted.
Any clue as to why chrome behaves differently?
You should give the borders a width and a color, this is a much better cross browser solution.
.mainTable
{
width:100%;
border: 1px solid #000;
}
.mainTable td
{
border: 1px solid #000;
text-align:center;
}
The color can be whatever color you want.
You don't see the border in chrome because it has no width.
I want to CSS a table, but I can't render the line between "tr":
Add this CSS:
td {
border:1px solid #000;
}
Simply add attribute rules="all" to your <table>.
Putting the CSS on the tr element doesn't always work out too well.
You could try something like this if you're going for just row borders:
td {
border-bottom:1px solid #000;
}
just try this
table {
border-left:1px solid #000;
border-bottom:1px solid #000;
}
td {
border-top:1px solid #000;
border-right:1px solid #000;
width:50px;
padding:0 0 0 10px;
}
working demo
I am creating a html maze using tables and for some reason, the borders dont show up correctly. Instead of nice straight lines, the borders show up as diagonal blobs instead. Is there a way to fix this? Here is my example : http://thomaswd.com/maze.
Output:
My CSS:
section .l {
border-left:20px solid #ff9c00;
}
section .r {
border-right:20px solid #ff9c00;
}
section .t {
border-top:20px solid #ff9c00;
}
section .b {
border-bottom:20px solid #ff9c00;
}
section table {
margin-right:auto;
margin-left:auto;
border:20px solid #FF9C00;
}
Remove border: 20px solid transparent; from your section table tr td selector (not shown in your code sample) and it looks fine.