I have a asp.net link button and i have applied below css on it
.linkbutton
{
font-size:10px;
font-family: Arial,Helvetica,Sans-Serif;
font-style:normal;
}
When i mouse-hover the link button, the font-size grows!. Why it happens that way?
You probably have a rule for the hover or a href (whichever is being generated) that sets a bold or an font size value that is different.
You could try adding a rule like this:
.linkbutton:hover
{
font-weight: normal;
font-size: 1em;
}
It would be better if you could post some sample code as the answer is going to be an issue specific to your page / css files rather than a general piece of advice.
Run the app in your browser and start developertools (in Chrome press shift-ctrl-i, or download 'Firebug' for Firefox).
Then select the button and you can see which classes are inherited by that button and then you can fix the :hover problem.
Related
I'm working with a form management system provided by an external provider (no support). You can adjust the presentation of the form via CSS. So I would like to use another font.
.CXHeader *,
.XItem.XSelect.XDropDown *,
.CXFooter *,
.CXPage,
.XPage *,
.xm-form.modern * {
font-family: 'AlwynNew';
}
I defined the font using #font-face, like this:
#font-face {
font-family:'AlwynNew';
src: url('ressource?mid=8&name=AlwynNew-Rg.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
The thing is, it works everywhere, expect for the dropdown list. But the code should be right.
What I tried so far
I tested it with color and background-color and these two work fine for the dropdown list. When the list isn't dropped down, it shows the right font. But if it's dropped down, colors are right, font is wrong.
I also tried !important (see mmh4all's Post) like that:
font-family: 'AlwynNew' !important;
It doesn't make a difference.
Answer to Hans Sagita's Post
First I tried:
*:after{
font-family: AlwynNew !important;
}
It didn't work. I tried .dropdown::after and .XDropdown::after, anyway, didn't work as well.
Code inspector
I also used the "code inspector" of the browser or however you call it. The names of the classes are correct and there is nothing overwriting the font.
(Translation: "Keine Schriftarten fΓΌr das gewΓ€hlte Element verwendet": "No fonts used for the selected element".)
And these are the fonts used showed by the code inspector when a <select> element is selected.
(Translation: "Verwendete Schriftart": Fonts used;
"Alle Schriftarten der Seite": All fonts of the page.)
But again: When I select an option element, the font tab says: "No fonts used for the selected element".
How do I set the font also for the <option> elements?
Use !important to your font or remove !important from the previous Fonts and make sure the css class is after your general font class
font-family: 'MyFont' !important;
Example:
body {
font-family: 'FirstFont' !important;
}
.dropdown {
font-family: 'SecondFont';
}
in this case SecondFont will not override the first one
body {
font-family: 'FirstFont';
}
.dropdown {
font-family: 'SecondFont';
}
but in this case it will override
or you can use !important for the second one too and it will work as well
#import url("https://fonts.googleapis.com/css2?family=Tajawal:wght#200;300;400;500;700;800;900&display=swap");
import font family like this
after that put the font family name
font-family: 'Tajawal';
can you try like this one first, just to check it is applied to the dropdown ?(this should be applicable to all UI)
*:after{
font-family: AlwynNew !important;
}
if it is work you can try to
.dropdown::after{
font-family: AlwynNew !important;
}
Hope Works, thank you
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
In Chrome, the font size and font family of form 'select' fields is not following css rules as expected.
My stylesheets declare the font-family should be 'Open Sans', and font-size should be 14px.
But, it is reverting back to 'Lucida Grande' and 11px.
This screenshot of Chrome's developer tools sums it up - the Country select field is the item in question:
The following didn't fix the issue:
html, body, input, select, textarea, button {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Interestingly enough, it is only doing this on my machine (mac mini mavericks); testing on others (windows 7/8) in the same browser results in no error. Has anyone else dealt with this issue? Is there some setting necessary to override default values?
One near-solutionis to use the following to increase the font size to 13px on Mac - but this results in a massive 48px on Windows:
select {
font-size: -webkit-xxx-large;
}
Alternatively, the following would reset everything about the menulist appearance, to build up from scratch (font size/family take CSS rules or inherit):
select {
-moz-appearance: none;
-webkit-appearance: none;
}
Ideally a simple font adjustment wouldn't require resetting everything about the menulist...
Whenever something unexpected happens with the cascading aspect of CSS, and it's clearly not an error introduced by the developer, then there's a good chance it has something to do with the !important command. Someone may have applied !import to a style in some earlier part of the CSS. Try applying it to your styles to see if it has an effect.
I was wondering if there is a way to give a page title a different color and font in the page tab. Something like:
title{ color: red; font: 12px tahoma;}
Just thought it would be fun to add into sites. I tried the above and it didn't work in my CSS file. Also tried giving it a class="title"giving it a CSS style of .title{ color: red; font: 12px tahoma;} but that didn't work either.
Answer is NO you cannot do that in any way....you cannot apply any styles to page title, btw you can just blink the titles
Blinking Titles
More Info On CSS Which You Are Using:
If you are declaring something like this
title{ color: red; font: 12px tahoma;}
You don't need to define any class as you are targeting specific title tag which is only 1 in your whole document
And if you are using .title than your CSS should be
.title{ color: red; font: 12px tahoma;}
The previous answers are correct, but, you can sort of get different fonts if they are defined in unicode. I don't know how to explore this, but, for example, there's the regularly written word javascript and then there's this title I coped from reddit.com/r/javascript source code: ππππππππππ - notice how they are slightly different.
Regular without code delimiters: javascript
Reddits title without code delimiters: ππππππππππ
You can copy past these characters anywhere and they are going to look different, because they are technically _different characters. There's a and then there's π - I grabbed this from the javascript word I previously pasted.
I don't know where these characters came from. I don't know how to type them. I don't know where one could copy paste them from.
But it proves an interesting point - any emoji can be used in these titles, you can copy paste from https://www.emojicopy.com/
If you are talking about the <title></title> section then no you can't style it.
If you are talking about the title of a page as in a header tag such as h1 or h2 then yes you can style those using normal CSS styling techniques such as
.title { color: #1A1A1A }
<h1 class="title">My Awesome Title</h1>
You can style the <title> tag, just add "display:block" or "display:inline" to it.
title {
display:block;
color:red;
font:12px tahoma, serif;
}
that way it should appear inside your page with the same content of the tab on the browser, for instance.
As for the Page Title, i have seen that it is possible to style it, someway. probably with shadow dom.
I have a created a few forms and I can't fgure out why in certain browsers and operating systems, my input buttons appear differently.
Check out the input button here: http://www.41q.org/admin
It's should appear as a square, but instead I get a round corder default button. Can;t figure this out. My CSS is not working.
Should I change the TYPE?
Erik
Try using normalize.css (http://necolas.github.com/normalize.css/) or reset.css (http://meyerweb.com/eric/tools/css/reset/). Then optimize for each browser.
This is probably an IE problem.
I like to define the body font family or font styles with the input, option, textarea, etc tags, like this:
body, input, select, option, textarea {
color: #fff;
font-family: arial;
}