I have a table, that for one of its cells I am using the rule
border-right: 3px solid #000 !important;
It works fine on Chrome but in Firefox the border is invisible. I say invisible because if I deactivate the rule I can see the cells' contents move slightly.
-moz-box-sizing: border-box;
Did not help in any way as far as I can see.
So if you were to run this small example in Chrome, it would look fine. In Firefox you can spot some errors though (be sure to view at a wider width to see the error)
I have tried various other suggested option with no good results. The one closer to solving the issue was removing border-collapse altogether, but that makes all borders visible as can be seen from the image below:
Is this common for Firefox, and how can I overcome the issue.
One thing to try would be to add another block element inside of the table cell and apply your border style to that element. For example, you might try to do something like this:
<table>
<tr>
<td>
<div style="border-right: 3px solid #000;">My Content</div>
</td>
</tr>
</table>
Table cells like <td> and <th> are sized differently than regular block, inline block, or inline elements and so the borders might also get computed slightly differently depending on available space.
By using a <div> inside of your table cell, you can set it's width to 100% and it's height to 100% so that it covers the entire available table cell, then you can apply any border you like to the div and with box-sizing:border-box set on the div element, it should look the way you want. For example:
<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>
Here is more info on table sizing / box model quirks
I have updated your original jsfiddle https://jsfiddle.net/sfodcjkz/4/ with some of the minor tweaks
https://jsfiddle.net/sfodcjkz/18/.
The changes I carried over your fiddle are:
Removed empty <tbody> elements. Best practice is to group the body rows inside a <tbody>. Some modern browsers may auto correct the errors, but not all browsers are smart enough. So for consistency, we can avoid being dependent on smarter browsers.
Next I had problems with these css:
Line:349
.responsive-table thead {
clip: auto;
height: auto;
overflow: auto;
position: relative;
width: auto;
}
Line:258
.responsive-table thead {
border: 0 none;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Simply removed those css styles and you can see a cleaner look.
It's a known 'bug' in Firefox. It's being caused by setting the border-collapse to collapse. One solution is to set the border-collapse to separate.
Related
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
I've used this positioning trick a bit to achieve complex outcomes. I think I've come across a bug in webkit browsers which I'm struggling to understand.
Here is the simple markup:
<table>
<tbody>
<tr>
<td>
<div>
<span class="cols-6"></span>
</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
and CSS:
*, *:after, *:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
border: 1px solid #ddd;
}
td {
vertical-align: top;
padding: 0;
height: 100px;
border: solid #ddd;
border-width: 1px 0 0 0;
box-shadow: -1px 0px #ddd;
}
td div {
position: relative;
}
td div span.cols-6 {
position: absolute;
width: 600%;
height: 20px;
background: #ccc;
}
To see this in action, open up this http://jsfiddle.net/JFxqt/14/ in chrome.
The displayed span is absolutely positioned inside a relative container. As the table uses fixed layout, its cells are all fixed width, hence a child should be able to make use of a percentage width. The table has 7 columns while the span's width is set to 600% (i.e. 6 columns * 100%). It fails to cover all 6 columns in webkit browsers. Firefox and IE renders fully across all specified columns.
Ideally setting the span's width to 100% should render across 1 column, 200% across 2 columns and so on.
Anyone have any ideas or workarounds?
Try this: http://jsfiddle.net/JFxqt/3/
I changed this around in your CSS:
body{margin:0px}
td div {
}
span.cols-6 {
position: absolute;
width: 85.6%;
height: 20px;
background: #ccc;
z-index:10;
top:0;
left:0;
}
You are seeing a cross-browser issue related to how the widths of table cells are computed and inherited. This may be either a bug or something that is not specified explicitly by the CSS specifications and left to the browser to decide.
In Firefox, the width of <td> is inherited by the <div> whereas in the webkit (Chrome) browser, the width inherited by the child <div> is 1px smaller.
When you multiply by 100% and 200%, you won't see an effect, but by the time you get to the last cell at 700%, you see about a 7px gap.
If you are building a CSS framework, you will need to create a style for Firefox browsers and another for webkit browsers.
For the case of 6 columns, I found the following would work:
td div span.cols-6 {
position: absolute;
left:-1px;
width: 600%;
border-right: 6px solid #ccc;
height: 20px;
background: #ccc;
}
I add a right border that is 600% x 1px = 6px and then position the span to the left by -1px. For another number of columns, for example, .cols-3, you would need width: 300% and border-right: 3px solid #ccc and so on.
You may need to use some type of a CSS filter or selector hack. I did find the following reference: http://browserhacks.com
No clean or elegant solution for this problem unfortunately.
Well after a day or two searching for workarounds it would seem a conditional JS enhancement for Webkit browsers is the only viable solution.
The problem stems from Webkits (and Opera's old rendering engine) calculation of percentage widths, which are always rounded down to the nearest pixel as opposed to being stored as a double. Therefore in Webkit a 1px descrepancy may be added for every factor of 100% (eg 2300% - 100% * 23 - will have a maximum of 23px discrepancy), while Firefox and later versions of IE can only have an overall maximum of 1px discrepancy.
John Resig touched on this issue a while ago, http://ejohn.org/blog/sub-pixel-problems-in-css/
I have an input element inside a div element:
...
<div id="calculator-container">
<input type="text" />
</div>
....
In CSS I make the input width 100%:
#calculator-container {
border: 1px solid black;
background-color: lightgrey;
width: 200px;
padding: 10px;
}
#calculator-container input {
width: 100%;
}
I can't figure out why is there less free space on the right side of the input than on the left (please see the screenshot below). Maybe somebody can advise. Thanks.
Pointing out that on jsfiddle it looks fine but if you copy it locally it looks bad in both IE and Firefox. Here is the jsfiddle link just so you can copy the code: jsfiddle just to get the code
It’s because width means the width of the element’s content area. The <input>’s content area is surrounded by its padding and border.
http://jsfiddle.net/3f7RB/
If you set those to 0, the input no longer takes up more space than is available:
input {
width: 100%;
border-style: none;
padding: 0;
}
http://jsfiddle.net/3f7RB/1/
(Of course, form elements are often rendered a bit differently from regular elements, so different browsers may do different things.)
If you want padding on the <input>, you can either declare that as a percentage too:
input {
width: 96%;
border-style: none;
padding: 4px 2%;
}
http://jsfiddle.net/3f7RB/5/
Or use box-sizing (not supported in IE 6 or 7) so that width: 100% applies to the <input>’s content, padding and border combined:
input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/3f7RB/6/
Because the input element gets width:100% which is 200px. this however doesnt take into account that it has a border of 2px, meaning it actually should be 196px.
try this:
http://jsfiddle.net/QLFrj/
#calculator-container input {
width: 196px;
}
Only problem is that it is no longer a percentage...
the reason why it's to right because of the border because it's to the width of input field means the width of input field is 100% + 2px. So, you can use box-sizing property got this:
Check this
http://jsfiddle.net/3f7RB/4/
OR
you can use outline property also . like this:
Check this
http://jsfiddle.net/3f7RB/7/
I've tried here and it works fine. Maybe another CSS statement is overriding some attributes of your div or input. You may try to inspect the elements with Firebug (on Firefox) or Google Chrome.
This happens because your input element wants to be 200px too. The width: 100% applies to the parent-element. In this case the #calculator-container.
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.
Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting textarea's to wrap content the same as e.g. div elements in Firefox
It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.
This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.
Here's a jsFiddle for demonstration purposes.
Getting textarea's to wrap content consistently across browsers
If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.
textarea {
padding: 0 5.5px 0 5.5px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Here's a jsFiddle showing this approach.
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
.testbox {
padding: 10;
margin: 10;
border: 5px solid black;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
You could work around this by using something like this:
<div class="testbox">
<textarea class="testarea"></textarea>
</div>
css:
.testbox {
padding: 0;
margin: 0;
border: 0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
.testarea {
padding: 0;
margin: 0 -1px;
border: 0;
background: red;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 16px;
}
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.
Is there a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element? Another requirement is no hacks, unfortunately.
I've managed to do it for all browsers by styling the border as such:
hr.clear {
clear: both;
border: 1px solid transparent;
height: 0px;
}
Yet IE6 still renders a 1-pixel white line.
display: none does not work because you're completely removing the <hr> from element flow. That causes it to stop clearing your floats.
If you're OK with completely hiding it, just use visibility: hidden instead. It will still clear floats, and this works on all IEs:
hr {
clear: both;
visibility: hidden;
}
So the problem is that IE does not consider <hr> borders as "borders". If you set
border: 1px #f0f solid;
... it'll add a fuchsia border around the existing bevelled border. Fortunately, Firefox and IE8 render this the same and realize that border: 0; means I don't want a border. Unfortunately, IE 7 and lower versions don't do this.
So to answer your question... no... there isn't a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element or hacking it (I haven't found a way to do this from my experience).
Your options are either wrap the <hr> in a <div>, if you have a solid background color, set the color property to that of the background color, or use images for the background.
Option 1:
<div style="height:1px; background: transparent;">
<hr style="display:none;" />
</div>
Option 2:
hr.clear {
border: 0 none;
height: 1px;
color: #ffffff; /* if your bg is white, otherwise choose the right color */
}
Option 3... check this out: http://blog.neatlysliced.com/2008/03/hr-image-replacement/
Sorry that IE (older versions) doesn't play by the rules. I hope this helps.
How about this:
http://blog.neatlysliced.com/2008/03/hr-image-replacement/