So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
Related
I am using the CSS Plugin for codename one and I am trying to customize the look of Tabs.
Here is my entry for the Tab:
Tab {
background: none;
cn1-background-type: none;
color: white;
background-color: #005EA8;
font-weight: bold;
font-size: x-large;
}
Tab.selected {
background: none;
cn1-background-type: none;
color: white;
background-color: #005EA8;
text-decoration: underline;
font-weight: bold;
font-size: x-large;
}
This works perfectly for IOS, see here:
But not at all for android:
I have already tried by overriding all the styles, unselected, selected, disabled and pressed
.
I also tried by customizing TabbedPane and Tabs, but that did not work as expected either.
What am I missing here? Additionally, the size (height) should be the same on both devices, which is not the case for now. Another point I could not figure out is, how to stretch the tabs onto screen size?
The Android native theme defines a default background color of #f0f0f0 on ALL styles. This is an annoyance when you are trying to create themes that look the same across all platforms. Luckily, I think this is the only style that it defines in default so you can easily combat it by explicitly setting your own default background color for your theme.
In CSS, you can define a default background with
* {
background-color: transparent;
}
Alternatively, just keep this default in mind, and explicitly set the background color for any style you are defining.
You need to override the border and declare it to be "empty". I'm not sure how something like that is done in the CSS syntax as I don't use that myself.
http://www.alecos.it/new/125027/125027.php this link is an example of my problem... I used a png 1x16 for drawing the rows... the rows are visible in the link posted... my question is:
why under IE 6/8, FireFox, Opera, Safari and other browsers the rows are perfectly aligned with the text while under IE 9/10/11 the text do not fit in the rows?
I used a simple css:
/* Style Source Code */
.code {
border-radius: 7px;
border: #6666FF 1px solid;
background-color: #FFF5EE;
background-image: url("../bkg/Bkg_116.png"); /* Horizontal Rows */
background-repeat: repeat;
background-position: 0 10px;
}
/* Style Source Code */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
/* Style Div */
.alignment {
line-height: 20px;
text-align: justify;
}
Hope in workround to fix the issue...
here there is my css: http://www.alecos.it/css/alecos.css
I'm not on Windows machine right now but my guess is .xcode(line-height:16px;} would solve your problem, but I must say that this is the wrong way of creating row borders. Why not add:
.xcode td{border-bottom:1px solid #ddd;}
instead of using background image?
Firefox is temporarily outdated unti it's next update meaning that it's browser does not have the ability to process codes in the same manner as other browsers.
.alignment {line-height: 20px;}
Gets over ruled by .xcode line-height normal;
IE aint normal ;)
Besides content tages like h1, p, font all have slightly different margins/paddings around them. So a non responsive img isnt the best way to go.
Would be better if you could wrap each line with a span, div or sinces its a table a tr,td and give those a border-bottom.
Gr.
Kevin
In order to make your text inside .xcode aligned with the horizontal lines, the "code" lines must be distributed vertically. Unfortunately, It seems that you did not understand the meaning of line-height property and use the default value without considerations.
The line-height property
As you can see, the line-height property will decide how much is the distance of two lines of text. In your case, we need it to be exactly 16px inside the whole block of .xcode.
The value of normal value of the line-height property
From the W3C CSS spec, the value of normal value is defined as:
Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
From some online resource like this article or this page, you can see that the real value of normal value depends on many arguments like font size, font family, OS, user agent, ... Therefore, it is recommended that you should use some css normalize stylesheet to set the value of line-height correctly and cross-browser.
About your case
The quick fix here is setting the line-height inside the .xcode class to be 16px (which is the height of the of your background image).
I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.
Sample markup:
<a>Hello, <span>fooooo</span> bar</a>
Styles:
a {
font-weight: bold;
text-decoration: underline;
}
span {
font-weight: normal;
}
(right click on image and select view/open in new tab to get a better view)
In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?
Fiddle: http://jsfiddle.net/FfBGn/
Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:
border-bottom:1px solid #000;
demo
Alternatively, if you have to use text-decoration:underline,
you could just make bold bolder.
font-weight:800;
demo
Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?
border-bottom: 1px solid #000000;
I'm trying to force the text color in the option of a select input and it's working on every browser in the world but guest what, yeah IE still don't give a damn about the color in the stylesheet.
Do you guys know how to force IE to make my text color like I wish
Here's what I expect
and this is what IE does
CSS
#footer .findProduct select{background: transparent; border:0; color:#fff!important; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000!important; text-transform: uppercase;}
Styling selects with css is just a bad idea. It is impossible to get them styled correctly in all browsers. All you can do is mimic the select box with js. There are frameworks and plugins availble. Basicly they will hide the select and replace them with a list or something that acts like a select, and wich you can style completly. In the background they will update the select in sync with the list to still make your form work on submit. You could also do something similar yourself (best to use jQuery), it should not be to hard if you are a bit familiar with it.
I guess the custom arrow button you use in your screenshot is not working eather...
Your css rules contradict each other change them to this:
#footer .findProduct select{background: transparent; color: #fff; border:0; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000 !important; text-transform: uppercase;}
Demo: http://jsfiddle.net/dan_barzilay/tJZek/
I have some buttons my page using a custom font face using the CSS and files generated by the Font Squirrel generator.
When the font's colour is black, they display fine...
However, when I change the colour to something else, the text seems to have a smoothing that bleeds the characters into each other and generally makes the characters look too thick...
I've played around with font-smooth property and a few other things, but have been unable to get it to work...
I don't think it's too relevant but the CSS for these buttons are...
color: #FFFFFF;
display: block;
padding: 1em 0.3em;
position: relative;
text-decoration: none;
z-index: 10;
font-family: BebasNeueRegular,Arial,Sans-Serif;
font-size: 22px;
list-style: none outside none;
text-align: center;
text-transform: uppercase;
The background is a separate element.
How can I get the white text to appear like the black text?
(It may be hard to tell the difference between the two, but my boss insists it is there.)
This worked for me:
-webkit-font-smoothing: antialiased;
Part of the problem is that it's not a particularly well-made font. I concur with #thirtydot's suggestion of text-shadow. A 1px black-on-black text-shadow should thin the font out. Any browser that doesn't support text-shadow will be rendering the font horribly anyway.
And remember that some html elements has bold as default, like h1, h2... When I use font squirrel to generate a font and use it with h1, for example, I always put:
font-weight: normal;