Try setting the padding of <td> to more than 1px, you can't.
You can only specify 0 or 1px padding for this td. But why ? It's same in both transitional and strict document types.
http://www.pro-turk.net/xhtml_col.html
It is probably that you are not defining the unit for the padding. setting it something like 10px (in chrome at least) works fine.
Maybe because you're specifying the padding as 1 - no units - rather than 1px, 1em, etc.
It's fine to specify 0 without units, as 0 is the same in any unit - but not 1.
Related
I want to add a dark style to a class. However, the border-radius:none doesn't work. But if I change it to border-raidus: 0 0 0 0; it works.
(not working)
(working)
Why?
As KK correctly mentions, the default value for the CSS border-radius property is 0. 'none' is not an allowed value.
See here:
https://www.w3schools.com/cssref/css3_pr_border-radius.asp
When used like below, it sets the radius for all four areas (top, bottom, left, right):
Border-radius:0
When used like in your example, it is CSS shorthand for specifying each area individually.
After last Chrome update version 83.0.4103.61 I got strange behaviour of 'width' property for some of my elements. For some elements where the 'width' is not strictly defined by CSS the real width is in floating point number like 125.487px. Due to that I see some vizual glitches for buttons, menus, ... If I will try to manualy set the width to exact valuethen it looks good.
Is there a way to push Chrome to not use floating point numbers?
For better understanding I add a picture. When I manually change the width of button to 81px or 82px it is fine. But if it is something in the middle then 1px is missing. It sounds to me like a space of 82px is reserved but then only 81px are rendered and one px is just missing.
I'm setting:
font-size: 13.44px
line-height: 1.4881
Multiplying those, gives us 20.000064
But the rendered/calculated height of the box is 19px
Why?
http://jsbin.com/vokesukeye/2/edit?html,output
The font-size seems to be rounded up or down for this calculation.
When I increase your CSS font-size to 13.6px (via Chrome's "Inspect" function), the text container height was increased from 19px to 20px.
You may want to try to use "Inspect" with your browser and interactively adjust these CSS settings to determine your CSS settings.
As I wrote in my comment earlier: The pixel values are being rounded, first to font-size 13px and then the result to 19px, due to the nature of pixels (which are a whole pixel or no pixel, except possibly on retina displays)
Lets say I want to add shadow to a text of size 33 px.
The unit I prefer for shadows is em as I want the shadows to scale when the page is browser zoomed.
I want my shadow fuzziness to be 2px. So my em value is 2/33 =0.0606 em.
So,
text-shadow: 0em 0em 0.0606em black;
Bu there is a problem!The value 0.0606 is not exact (2/33 is recurring) 0.0303 is lesser than the actual value.
Mozilla rounds up the em values to the higher px value. In this case it would remain 2px.
But Chrome rounds it down. So in this case it would be 1px only.
Now there is a bad disagreement I want to get rid of. How do I?
I know it may sound redundant by try addressing each browser individually with css. That way the browsers can beat to their own drum. http://davidwalsh.name/css-box-shadow
I'm not a big fan of the default text-decoration. I ususally set it to "none" then do a "border-bottom: 1px dotted somecolor" on 'a' and a "border-bottom: 1px solid someothercolor" on 'a:hover'
I've noticed something recently that I don't think was happening before. Even with padding-bottom on the text's container set to 0, there's too much vertical space between the bottom of the letters and my border-bottom.
What's odder is that Chrome still seems to behave nicely and respect my 0 padding, but Firefox and IE appear to be adding about 4 or 5 pixels of vertical space.
When I temporarily revert to "text-decoration: underline" I still see too much space.
Any idea what's going on here?
I'm going to bet the culprit is inline-block as a display setting. See the difference (in Firefox) at http://jsfiddle.net/s8FYS/6/.
EDIT: Some further investigation reveals that inline Firefox (looking in Firebug) sets the height to auto which ends up less than the actual line-height, whereas inline-block calculates the height (since it is now acting like a block) equal to line-height * font-size, which pushes the border down.
You can "compensate" for it by setting the height (in this fiddle, a 1.35em worked with my default font-size of 16px), but I'm not sure that doing such would necessarily compensate correctly at all times.
Change line-height, for example:
a{ line-height:1em; }