i have a table on this page with the following css (each td has the class box)
.box{
border: 3px outset #959595;
width:25px;
height: 25px;
background-color: #dddddd;
cursor: pointer;
}
table{
border-collapse: collapse;
border-spacing: 0px;
border: 4px inset #444;
}
i get what i want in firefox
but in any other browser it doesnt seem to be working as i want it to
From MDN's documentation on border-style (re: outset):
Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
Your table has border-collapse: collapse;, so it's actually rendering as border-style: ridge in Firefox.
Either set border-collapse: separate; or set border-style: ridge; to normalize the style across browsers that may not be changing outset to ridge.
Related
I'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
I have the following CSS for my table :
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid #a2a2a2;
}
I want my table to have a black border and inside, the line are supposed to be separated by a grey border. However the bottom border of the table is overridden by tr and is grey instead of black.
How can I manage to give the priority to the table border against the tr border?
Move your bottom border to the top for the tr, and set the first tr to have no border:
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-top: 1px solid #a2a2a2;
}
tr:first-child{
border:none;
}
jsFiddle to demonstrate it working (with slightly modified border colours and sizes to help them show up better in the demo)
Note that this solution involves slightly more CSS code than other valid solutions, but has the advantage of better browser compatibility. (:first-child is CSS2, whereas :last-child is CSS3)
[EDIT]
As per OP's comment below: To prevent the cell borders bleeding into the table border, we need to do the following:
Remove the border-collapse:collapse. This is what is making the borders combine together causing the bleeding effect.
Put the inner borders on the cells (td) rather than the rows (tr). This is necessary because without border-collapse, we can't have borders on the tr.
Add border-spacing:0 to the table. This closes up the gaps between the td elements, which would show up now because the border is on them rather than the tr.
Here's the finished code:
table{
border: 4px solid blue;
border-spacing:0;
}
td{
border-top: 4px solid red;
}
tr:first-child>td{
border:none;
}
And here's an updated version of the fiddle: http://jsfiddle.net/T5TGN/2/
use :not(:last-child)
table{
border: 1px solid black;
border-collapse: collapse;
}
tr:not(:last-child){
border-bottom: 1px solid #a2a2a2;
}
Please see this: http://jsfiddle.net/JSWorld/QmuA9/1/
Update the table css like the following
table, tr:last-child
{
border: 1px solid black;
border-collapse: collapse;
}
You can check the Demo
try adding padding-bottom to the tr:
tr{
border-bottom: 1px solid #a2a2a2;
padding-bottom: 1px;
}
I have text inputs with 1px padding that I sometimes put 1 px borders on. I want all text inputs to fill the same vertical space, borders or not. To achieve that, I created a "don't have borders, but fill space like you do" class with border: none and 2px of padding:
.BorderInputNone {
border: none;
padding: 2px;
}
This worked in IE8, but in IE7, there were visible borders around the input.
EDIT: I fixed it by using border: transparent.
.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}
Use border: 0px; as it seems more cross browser compatible.
Check this question here question here
Here is an example for you to fix IE7:
http://jsfiddle.net/Z7Uee/
I fixed it by using border: transparent.
.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}
Codes as below. I'm so puzzled of this problem.
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 10px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 10px #CCC;
}
<table>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
The apperance between Firefox and Chrome has some differences, I'm not sure if it's coused by the differences of different brwosers. Is there any way to fix it by CSS?
Example: http://jsfiddle.net/AndyE/B2fjn/
This is just differing border drawing implementations. You'll notice that there's a difference in IE and Opera too:
I didn't test Safari, but I'd expect it to look the same as Chrome since they use the same rendering engine.
The only way that I can think of to get a consistent border across browsers is to set border-collapse to separate on the <table> element:
table {
border-collapse: separate;
}
This, unfortunately, means you have a new problem to solve — there will now be 2x 10px borders between each cell. You can work around this by altering your markup or adding extra CSS rules. For instance, I changed the CSS to the following:
table {
border-collapse: separate;
}
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 5px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 5px #CCC;
}
table td:first-child {
border-left-width: 10px;
}
table td:last-child {
border-right-width: 10px;
}
Demo: http://jsfiddle.net/AndyE/B2fjn/1/
This gives as good a result as you can probably expect in modern browsers, but doesn't look so great in IE 6-8. You'll need to experiment until you can get the best result possible.
the correct syntax for border (css) is : border: 1px solid #FFF;.
Now, change your CSS like this:
table tr td{
padding:10px;
background:#415DA1;
border-top:10px solid #F00;
border-right:10px solid #CCC;
border-bottom:10px solid #F00;
border-left:10px solid #CCC;
}
Some browsers have the ability to correct the css code if there's any problem ( like yours ), but some don't. So, please check if the new CSS code works or not. If it doesn't, please post the screenshots of both the browsers displaying the document. Thank You.
In my case that border problem create offset between elements in Firefox.
Solution: add this css rules to your bordered element.
div{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
...
}
With this html:
<div class="sectionheading">User Information</div>
<table id="UserInputTable" class="xInputTable">
...and this CSS:
.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}
.xInputTable {text-align:left;
vertical-align:middle;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-collapse:separate;
overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}
The DIV ends up rendering 2 pixels wider in both IE and Firefox (the left borders line up perfectly, the right borders are off by two pixels). Using the IE web dev toolbar, both elements have a width of 100%. In Firebug, they have widths of 950px and 948px. Here is the computed CSS (from IE developer toolbar):
DIV
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
TABLE
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
Any idea what concept I'm missing here?
Wild guess here, but tables by default have cellpadding or cellspacing (can't remember which one) set to 2px by default, unless you set border-collapse: collapse;.
This doesn't affect the table itself, but the td's inside the table.
If my guess is correct, either of the following should work:
Set border-collapse: collapse; in the css for the table
Put "cellpadding="0" cellspacing="0"in the` tag
Add a new CSS declaration table.xInputTable td { padding:0; margin:0; }
Could be the 2 pixels for each (left and right) border which aren't taken into account when calculating the width.
Try to not set the width specifically on the div (and maybe the table too). They default to 100% but get calculated slightly different when it's set, I believe.
pb is correct.
When you apply "border" to a table, it will adjust the width to accommodate for the border. DIVs will add the border in addition to the width (as will most elements with a specified width, tables are special).
Hurix is correct that there is no point in adding width 100% to the div since it is a block element and will take up the full width of the parent by default, so you can take it off and it will auto-size to stay inside the parent even with the border added to its width. The table, however, should get the width: 100% if you want it to be full width.
Borders act like padding, so you are adding 2px to your width => 100% + 2px
Also consider using meyers reset.css to make sure your on level ground before jumping in.
http://meyerweb.com/eric/tools/css/reset/
Also you are getting sorta crazy with the all caps thing.
Ok so, in my opinion, at this point I would roll all the way back to just the html. Use FireBug religiously and only add one CSS attribute at a time to be sure that it doesn't have a negative effect on the layout.
Unfortunately the nature of CSS is that it is full of exceptions and things to consider with inheritance. Starting with just a reset.css, and maybe making all your different major elements a different background color (because that wont change the size like border) can help you see where you elements ACTUALLY reside.
Following up on kmiyashiro and pb I wanted to add that if you wrapped your table in a div with the style "width:100%; border: solid thin red; border-top-style:none;" and changed the style on "table.xInputTable" to "width: 100%" then everything should line up.