There are buttons on my website that look overly skinny in Chrome compared to Firefox. The button's HTML looks like: <button name="shutdown" type="submit" value="df" class="boton"> Press </button>
My CSS attempt looks like:
.boton {
font-size: 17px;
color: #000;
background: #ee3333;
background: rgba(225, 50, 50, 0.6) !important;
font-family: lucida console;
border: 1px solid #FF4444;
padding: 2px;
-moz-border-radius: 7px;
border-radius: 7px;
cursor:pointer;
}
.chrome .boton
{
padding: 5px !important;
}
I'm not sure if I'm doing this right. ".boton" does indeed change the style of the button, but the padding doesn't change in Chrome. What's wrong here?
The reason that the padding isn't applying to the element is due to the fact that there is no chrome class assigned to any element. There are various hacks around certain Vendor-Specific styles, see this article, but no browser applies a class of .chrome or .moz or anything like that.
However, to achieve more "horizontal" padding, you can use the -webkit-padding-start(padding-left) and the -webkit-padding-end(padding-right). Currently I do not believe there is full padding, or vertical padding for these yet. Be sure when using these to write the -webkit-padding-start, or whichever rule you use, after your padding rule. Otherwise the latter will overwrite the former and both will be lost.
Unless you've also added some browser sniffing that adds the class .chrome etc. to the body that class has no effect.
On the other hand the box model of Firefox and Chrome is not radically different, but the defaults for padding, border, margins etc. may be different. Just explicitly set those values and they should most likely render the same (give or take a few pixels because of different rounding errors). You should not need to add custom css for each browser (but if you use experimental css features like -moz-border-radius and -webkit-border-radius with vendor prefixes you should use all of them in at the same time; the others will ignore the unknown properties).
The different versions of IE (Internet Explorer) do have a radically different box models, and if you cannot get some version of IE to render something correctly with the standard css you should use conditional comments to include IE specific css overrides after the main css file.
Related
I have some issue which only encounters my iPad Pro 12.9, but not on phones or desktops.
🐞 on : Safari + Chrome + Firefox
input[type=text], input[type=email], input[type=time] {
color: white;
background-color: black;
font-size: 1em;
width: 100%;
border: solid 1px white;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
How do I make my inputs padding look nice on all browsers all devices?
Firstly you need to make sure your inputs aren't being over-ridden from another declaration which often causes the problem you have here, particularly in relation to the line-height and font-size properties. Set your line-height value to line-height: normal on your input elements. Using the input[] selector has a low specificity in the CSS cascade, hence why it could be being over-ridden.
If the above values aren't being over-ridden from a different part of your stylesheet you can use box-sizing:border-box, line-height: normal on your input elements. You'll most likely need to increase the padding value slightly to get the aesthetic look you require.
How about to use all: unset;
To be honest I found out about it just yesterday and not used it yet, but it seems to be widely supported.
Here is a small demo. Though, I used sass.
Screenshot from iPad Pro:
Screenshot from Chrome (on Linux):
You don't really need padding top and bottom within an input, so you can remove it, just use padding: 0 10px
If some browser do not vertically centres the text, you can equal the line-height with the height and that should be fine.
also apply a box-sizing: border-box; rule will probably avoid differences between browsers on how do they render paddings.
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
I'm using the Stylish browser extension to create a custom dark theme for a website. In a recent update, the site owner came up with rounded corners for a lot of things, which is ugly as hell in my opinion, especially with input fields. However, when I try to apply border-radius: 0px !important; using Stylish, the input fields go nuts. It works fine on things like regular divs, but not on any kind of inputs, be it a regular <input type=text>, a <textarea> or even things like a <select>.
This is how a text area looks like without my custom CSS:
This is how it looks like with my custom CSS:
This is how it looks like when I add border-radius: 0px !important; to my CSS:
When border-radius: 0px is applied, all other border properties and background are ignored. Not even the site's native CSS properties are used. The browser just uses the standard look like there were no CSS rules defined for the textarea at all. color still works though.
It's like border-radius was intended to change everything. If I add it only on :hover, the input fields only go crazy on hover. I don't even have to use 0px: The issue happens even when I use the same 6px that the site's native CSS uses.
This is my whole CSS rule:
textarea, input[type="text"], .textbox {
border-color: #282828 !important;
border-width: 3px !important;
border-style: solid !important;
border-radius: 0px !important;
background: #0F0F0F !important;
color: grey !important;
}
What's really weird is the fact that border-radius: 0px causes no problems when added using the Firefox developer tools, so it seems to be a problem with stylish.
What's causing this madness? How can I fix it? Is there a workaround? The only idea I had is to use a custom JS that adds the property ...
Oh my god, removing border-style: solid; fixes everything. I have no clue why, but I am happy now.
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
According to the W3C, user important style declarations are supposed to have the highest priority, higher than author important declarations, but I'm not seeing that happen. If you go to jsfiddle (intentionally blank, I'm referring to the site itself), and look at the styling for the iframe, you'll see the following:
#content textarea, #content iframe
{
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none !important;
box-shadow: 0 1px 3px #E4E4E4 inset;
}
I made a user style (using stylish) with the following css:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
iframe
{
border: 4px solid red !important;
}
}
When I applied it, nothing happened. If I use firebug to disable the rule or remove the !important specified by jsfiddle, it works. It also works if I change the selector in my user style to #content iframe.
W3C specifically states: 3. Sort rules with the same importance and origin by specificity of selector Since the user style rule should have higher importance, specificity shouldn't have any effect here, so why does the style not apply when using only iframe as the selector?
(tested using firefox 24.2 in case that matters)
Since I haven't gotten an answer, let me give an actual example of what I'm trying to do, and why changing the selector won't help. Here's a dabblet demonstrating the exact html/css/js I'm dealing with.
The following userstyle properly applies a red border, but has no effect on the text color.
#-moz-document domain("preview.dabblet.com"){
#test
{
color: white !important;
border: 1px solid red;
}
}
Using a userstyle, how can I force the text to always be white?
You are correct that an !important declaration of origin "user" should take precedence over any declaration of origin "author", regardless of importance or specificity. However you are making an assumption that Stylish applies its styles with the "user" origin.
Since Stylish 1.4.1 for Firefox, it will apply styles with "author" origin by default. One reason for this change was compatibility with Stylish for other browsers. Their APIs only allow Stylish to add "author" origin styles, which meant that a style that worked in Firefox didn't work in Chrome. Yours is one example of where this would be the case.
The best way to fix this (and to ensure compatibility with other browsers, should you share your style on userstyles.org), is to increase the specificity of your selector to something greater than that of the site's CSS. The simplest way to do so would be to use the same selector as the site, but add a body type selector at the start:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
body #content iframe {
border: 4px solid red !important;
}
}
There are cases where this isn't feasible: a style that affects iframes on many sites that couldn't be so specific with its selector, or a style trying to override an !important declaration inside an HTML style attribute. Stylish for Firefox allows you to switch your style to the "agent" origin with a special comment: /* AGENT_SHEET */. This will have the effect of your !importants beating anything the site can do (much like the "user" origin), but it will not work in other browsers and can cause bad things like crashes, so this is only suggested if the above method is completely unworkable for you.
All of this is described on Stylish's wiki along with some info less relevant to your situation.
You're right on with the specificity idea. The problem is both your rule and jsfiddle's rule use !important which means both rules have the same priority, but the #content textarea, #content iframe rule is more specific.
To solve, you could write your rule as:
#content iframe {
border: 4px solid red !important;
}
See this for more details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
That section will give you what you need, but the whole article is extremely interesting.