I am using a table to render a calendar. I have noticed an odd rendering bug in table cell border rendering in Firefox version 3.6 through 7. Here's a screen capture:
As you can see, the border gets "bent" when I scroll. Also, there are gaps between the horizontal and vertical border where it isn't "bent". A live example can be seen on this web site.
I don't see this behavior in Chrome, Safari, or Internet Explorer.
UPDATE
I am still seeing this issue in Firefox 20. I have noticed that single pixel borders do not exhibit this behavior, only two pixels or more.
You have a problem whith border-collapse:
Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13
What to do:
change border-collapse from collapse to separate
change the border-width of the <td>s and <th>s from 2px to 1px
give the <table> itself a 1px border
Give some conditional comments like described in the link
Related
I am trying add thin borders to a div. My CSS is like this:
border: solid;
border-width: 1px;
Yet the result borders don't look equally thin in my browser. As you can see below, the borders on the left and bottom look thicker than the borders on the right and top.
I want to make the borders equally thin. I have tried to add
shape-rendering: crispEdges;
But it doesn't change the look. JS Fiddle example here.
I tried this in my Chrome Version 41.0.2272.101 m -- it looks bad. I've also tried this in IE -- it looks fine. So I know it's not my monitor...
Your monitor is set to a non-native resolution. (Windows 8) Right click on your desktop, click "Screen Resolution" and then select the recommended resolution.
I have same problem.
After some research I found out it's caused by 1.5 device pixel ratio (Windows 8.1 set scale everything to 150%).
Solution is to set sale to 100% but it makes texts supertiny so I can't use this solution.
Both IE(11) and Chrome are affected. Firefox is OK.
Same issue is goes for mobile phones and tablets:
mobile safari rendering buttons with border
Uneven border in mobile browsers
You likely have other elements to the left and below the box and may be accidentally applying borders to them as well to make it appear that they have "double" borders.
Make sure you isolate the box and try again.
A 1px border can't be uneven like you are displaying.
I've encountered a really strange bug that exists in Chrome only. I've got a list of links with the equivalent of a 1px border-bottom (I'm using Compass Vertical Rhythm to output borders). In the inspector, it says that the border width is 1px, but the border displayed is more like 2px and lighter than the font colour (see image).
If I reduce the height of the window (either by making the browser shorter or opening the inspector) the border goes back to what it should be. I've tried setting the border-width manually as 1px rather than relying on Compass Vertical Rhythm to no avail, so I think it's more of an issue with Chrome.
Here is the code
a {
#include trailing-border(1px, 0);
}
And here is the output in Styles
border-bottom-width: 0.05556em;
Here is the output in Computed
border-bottom-width: 1px;
Has anyone encountered this before? Any solutions?
Apologies for the necro post. But this is the closest post I can find to the problem I am experiencing so thought I would add it here. I am confident this is a bug with chrome though I don't know enough about the border collapse bug that chrome has to be certain that that specifically is the issue..
https://www.ablueman.co.uk/the/testbench/divt.php
Shows correctly in Ie and firefox (see div table widths / heights at the bottom of the page)
But in chrome it seems to screw up the border sizes which adds a less than one pixel value.
i.e. DIV (Width:518.3333332538605px, Height: 22.33333325386048px)
If you turn off the borders, issue disapears.
I have an LI tag with a border and border-radius. The tag renders fine in all browsers except IE. I've jumped through all the hoops to get IE into standards mode with the doctype and meta tags, but I'm still getting a small gap in the border, but only on the left hand side. The codepen showing the problem is here: http://codepen.io/anon/pen/ufLmn
(That HTML is extracted from the full HTML with IE's developer tools "Element and HTML" thing.
Update: It's IE 10, running in a Windows 8 VM. Sorry I forgot to include that bit.
And, turning off the border radius closes the gap entirely. Setting border-radius: 0 also closes the gap. A smaller border shows a smaller gap (noticeable at about 8px).
Update 2 Here's an image demonstrating the problem:
I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -
http://www.designlagoon.com/what-we-do/
There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.
If anyone can shed some light on what might be causing the problem I'd really appreciate it!
This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?
Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.
Firefox does a miscalculation when adding padding to td.
So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.
Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.
In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!
I have one problem with borders it TD tags. I have no idea why Firefox don't display borders and Google Chrome displays.
Look at this: http://mirgorod.us/sandbox/labirint/
Problem solved.
td must have
I looked at your website, you should put
in the td to see the border. By keeping the cells empty, Firefox doesnt display borders.