I have some tables which render fine in IE and Chrome. But in Firefox some of the border arbitrarily don't show or have different widths. You can see an example Here. Below is the relevant css:
table {
font-size: 1.0em;
border-collapse: collapse;
border: 3px solid #004C87;
margin: 5px 5px 5px 5px;
}
th, td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #004C87;
text-align: left;
vertical-align: top;
line-height: 1.3em;
}
In the image below I took screen shots as it renders in the different browsers. The black arrow depicts the situation where the line/border does not show. The red arrow illustrates situation where the width is different.
If I were to repeat these tables the occurrences would be arbitrary.
I had an issue where borders were appearing when they shouldn't have been.
I resolved it with this:
border-collapse:separate;
I know it's not the direct answer, but the search brought me here.
I'm posting this as the answer as I'm convinced at this point you must be just a little zoomed out in Firefox. Try pressing Ctrl+0
If you compare the two tables in the image you provided, you can see that the bottom one is slightly larger than the top one.
Related
I have a table in which I would like the borders to collapse and all the cells to touch. I feel like I may be missing something obvious, but the bottom borders are not showing at all despite having height assigned to them. They instead just separate the cells from one another allowing the background color to show through (red in the example).
If I change the border-collapse to separate the borders re-appear, but the gaps remain as well as adding gaps between the columns as well.
JSfiddle
You are not targeting the Table Row, see fiddle: https://jsfiddle.net/32o87x7L/3/
.defaultTable tr{border-bottom: 2px solid blue;}
.defaultTable th,
.defaultTable td {
position: relative;
display: table-cell;
vertical-align: top;
padding: 9px 16px;
font-size: 14px;
line-height: 20px;
background: #eee;
border: none;
//border-bottom: 2px solid blue;
box-sizing: border-box;
}
As is usually the case, I solved my own problem right after submitting my question. :-/
Apparently table-cells do not take too well to positioning as they cannot be consistently. Removing position: relative; from the .defaultTable th, .defaultTable td did the trick.
I was trying to put some horizontal spacing between the table cells here:
http://jsfiddle.net/mVX93/43/
However the only thing I was able to do to get it to appear correctly was to put a thick border the same colour of the background a bit like this:
border: 10px solid gray;
Is there not a better way to put spacing between the cells?
Change your code to this:
#my-table td{
padding-left: 10px;
padding-right: 10px;
vertical-align: top;
background-color: white;
}
Remove this line
border-collapse: collapse;
to see your space between cells better
In the site I'm making I'm adding a feature that adds bulletins, little staff notices, at the top of the home page. My idea was that I have a profile section floated to the left, a little dateline at the top showing (of course) the date, and some tags.
The problem arises with the dateline section. The dateline is to the right of the profile at the top of the bulletin. There is a border-bottom for the dateline, and this border stretches all the way across the bulletin, being drawn over the floated div.
I made an example fiddle here, you can see the problem. For some background info, all bulletins will be inside the div.bulletin_frame, the "main div" if you will. Within that there will be div.bulletin s. I have it configured so that they all have a solid border at the top except for the first one, so that there's a border between them all. (see the stylesheet)
Thanks!
CSS:
div.bulletin_profile
{
padding: 5px;
margin-right: 5px;
text-align: center;
float: left;
border-bottom: 1px gray solid;
border-right: 1px gray solid;
border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
padding: 5px;
font-family: monospace;
border-bottom: 1px gray solid;
}
div.bulletin_body
{
padding: 5px;
}
The borders aren't drawn over the div, they're behind it. The divider simply has no background.
To change this, simply add a background to .bulletin_profile:
div.bulletin_profile {
background:rgb(240,240,240);
}
I've looked around for a while now and can't find a solution that solves this particular problem. I have an image (<img...>)on a webpage and when the image loads it has a 1px solid white (or very light grey) outline/border on the outside edge of the image. It's not around the image but on the outermost pixels.
The associated CSS is as follows:
cursor: pointer;
display: inline-block;
float: left
I've tried using
border: none
border: 0
outline: none
outline: 0
-webkit-border-before: 0px solid #fff
-webkit-border-after: 0px solid #fff
and am stumped, the only way I've gotten part of the white line to disappear is by increasing the border radius to cut off the corners of the image. I've verified and re-verified that this outline is not on the image.
The original image:
The div containing this image (and other similar images without the same problem) has css as follows (if this helps):
text-align: center;
height: 60px;
display: inline-block;
position: absolute;
width: 270px;
bottom: 0px;
left: 0px;
padding: 0px 20px;
Finally found the solution!
I originally had it as an img containing a class that referenced the image in our sprite sheet. By changing the img tags to a div and keeping the original reference, the borders were removed and the sprite correctly displays.
You could try this:
border-width: 0px;
I have an example of a table that I'm trying to generate here:
http://jsfiddle.net/DTsxa/
I'm having difficulty with the table header though when the table is viewed with Internet Exploder in IE7 Mode, or IE8 Compatibility Mode. The text "Fund Performance Figures as at 19 November 2010" should be on a single line, but it's being squished into the left on multiple lines.
I thought white-space: nowrap; (as per the sample below) might have fixed this, but it's not having any effect at all.
<tr>
<th class="TableHeaderRow" colspan="8">This Fund's Performance Figures as at 1 December 2010</th>
</tr>
with this CSS:
th.TableHeaderRow
{
background-color: #A4A247;
padding: 10px 5px;
font-weight:bold;
white-space: nowrap;
}
Can somebody see a work around to this issue?
your problem appears to be here:
.PerformanceTable th
{
width: 50px;
border-left: solid 1px #00573D;
border-top: solid 1px #00573D;
/*background-color: #FFF;
color: #00573D;*/
vertical-align: top;
/*height:28px;*/
}
IE is accepting your width: 50px and forcing it to be shorter. removing that line made it look correct for me. Give that a try
Try using "white-space: pre;". That seems to work better than nowrap.