I am working on an electron app on macOS.
In the CSS file, I specified the input size to be 21px height.
CSS
input {
float: left;
margin-bottom: 10px;
height: 21px;
}
HTML
<input type="button" value="Choose a file" id="fileInput">
<br style = "clear:left">
But in the app, the button seems to be 18 px height.
I checked in dev tools. the element sizing looks like this.
Why is the input button size different from the height specified in the CSS file. Was it due to the "margin-bottom" properties I specified?
Update:
I tried to add the !important tag, did not work.
Checked CSS files, no 18px specified anywhere.
Are there any other possibilities the input button size affected/overwritten by other CSS attribute, float for example?
Update 2:
I tried the app on Windows system, the button has the right size of 21px.
The issue seems to be a macOS specified issue.
Check if it is getting overridden by any other height which is specified to 18px . and as people are suggesting use of "!important" try to avoid using it . Try with css selectors. to make it more specific to your input field.
You code perfectly sets the height in all major browsers.
Maybe a CSS framework overrides the default style. Try to add the !important tag behind the height attribute like so: height: 21px !important;. Please note, that this is not best practice explanation found here.
If you need further help, please let us know whether you use a CSS framework (maybe some JS code could also override it) and which browser you're using.
Related
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
I have a html form input of type file:
<input type='file' />
I am aware of the styling limitation around this element and the workarounds (parent div, hidden field with click events etc) if you want some custom styling on it, which is not what I'm looking for.
My issue is pretty simple, if I apply height to the element, IE and Firefox set the element height just like all other input types, but chrome is ignoring the height attribute.
input{
height:50px;
}
Here is a jsfiddle
Is there away to get chrome to honor the height. Seems a simple thing but adding !important or adding the height inline doesn't make a difference.
N.b. there are LOADS of question about styling a file input on SO, but none address getting the height attribute to be honored in chrome. It works fine in other browsers.
I'm also aware that increasing the font size will make the input bigger, however its not an attractive solution.
Is setting height now possible in chrome?
This is how chrome understands it with pseudo code-
PseudoCode css
I have updated my link-
input[type="file"]{
height:50px;
}
input[type="file"]::-webkit-file-upload-button{
height:50px;
}
find the changes- http://jsfiddle.net/xfv0otLL/3/
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
I have a WordPress site that I recently moved from one domain to another (using my host's dotnetpanel). When it went live on the new domain, it does not show up correctly in Internet Explorer. Previously, it worked well in all browsers. Specifically, it seems like parts of the stylesheet are just being ignored. It works fine on all browsers tested except IE.
Try putting the code here in and testing to see if it fixes your problem. What parts look like they're being ignored?
Maybe you have to reinstall some of your plug-ins?
I guess there are some wrong paths in the database or config-files.
Try to search database by db-admin-tool and all the files with an advanced text-editor with the option to search automatically in all files at the same time.
As far as I can see the style sheets are applied.
You have width: 100% and height: 100% on the links in the menu, which messes with their size in IE. Remove those styles.
The reason that the gradients doesn't show up is because they are filters, and the elements has to have layout for the filters to apply.
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
Ref: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
If you give the elements layout, the gradients will show up, for example:
.block h2 { width: 100%; }
i am using this css.
.text_style3{
font:normal 8px Helvetica;
color:#f7922c;
}
i want to it more small but after 10px this is not working. i have used 7px, 6px, 5px etc. but this is not working.
so how can i decrease size. this css is not working in mozilla.
That is a rule specified by the browser, usually 10px is the minimum font size allowed in a default Firefox installation.
Try it by going to Preferences -> Content -> Fonts & Colors -> Advanced -> Minimum font size.
Any font size smaller than 10px will be almost non-readable. The rule is there to ensure better accessibility.
Hope that helps.
You most likely have a CSS Specificity issue, where another style is overriding the style you were expeceting to see.
You can use tools like Firebug for Firefox to see what style the browser is using and where in your code it has come from.
You may need to make your font size declaration more specific, by changing the selector, or even methods like using the !important operator or making the style inline in your HTML.
See these links for more information on ways to handle this:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
are you sure you arent resetting text_style3 after this to have a normal style? it may be that you are styling div p or span (or any other containing tag) after you do this one.
if you are not, break the font style down to the following:
.text_style3{
font-weight:normal;
font-size: 8px;
font-family: Helvetica;
color:#f7922c;
}
You have some really good answers here, and they are probably correct (min-font size, use !important to override other CSS). I would add to try to use em's, once you get use to them, they seem to work alot better than straight px, and they resize better (my opinion) for users who need to increase the font size for readability.
Also worth noting is that Cascading Style Sheets are just that: Cascading
Levels:
stylesheet
style tag in file
style in code
1 will be overwritten by definitions in 2.
Both 1 and 2 will be overwritten by definitions in 3.
The closer the CSS is to the actuall item/text being displaied, the more important it is.
As Mauro wrote, if the tag you are doing class="text_style3" on has some other definition of text size this may also affect the display.
It may be that you have a minimum font size set in your browser, check Tools > Options > Content and choose Advanced in the fonts and colours section and change the minimum font size to None.
It is likely your minimum font size is set to 10px (smaller sizes are unreadable)