I have not had any luck changing the line height for sIFR. I have tried changing the sIFR css and config file as well as my general style sheet. Is there a special trick?
GENERAL CSS
h1 {
font-family: Georgia, Times, serif;
font-size: 24px;
font-style: normal;
line-height: 16px; (has had zero impact, even when I go negative)
color: #000000;
text-transform: uppercase;
margin: 0;
padding: 0;
outline: none;
}
CONFIG FILE
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; }'
});
Flash uses leading instead of line-height, so simply just use:
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; leading: 1.5; }'
});
The leading value must just be a number on its own with no measurement value such as px, em, %, etc.
At first I thought it wasn't working, but I realized that the units for leading are totally different from em. I tried a larger value "leading: -10;" and it worked fine. I'm using sIFR 3 r436.
I'm going to take a wild guess and say that because your font-size > line-height (24px > 16px) sIFR is going to ignore the line-height property and use the font-size to create your flash.
If you're trying to get two lines of overlapping text (24px text on a 16px line will result in 8px of overlap), you're probably stretching the capabilities of sIFR.
EDIT
It looks like sIFR has some strange methods for calculating font size based on different factors...check out the link for the details (without knowing your version of sIFR, I can't comment on your situation).
Novemberborn: Font Sizing with sIFR
Line height inside the Flash movie is controlled using the (custom) leading CSS property for the .sIFR-root class. Flash doesn't have the concept of line-height as you might be familiar with from CSS.
Related
On iOS (Safari 5) I have to following for input element (top inner shadow):
I want to remove top shadow, bug -webkit-appearance doesn't save.
Current style is:
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
background-clip: padding-box;
Seems to remove the shadows as well.
As #davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.
webkit will remove all properties
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
box-shadow: none !important;
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
I tried to come up with a solution that a.) works and b.) I am able to understand why it works.
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
So obviously setting background-image: none was my first attempt, but this does not seem work.
Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
My favorite solution:
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Instead of specifying CSS styles with highchart options such as (fontWeight, fontColor, etc), is it possible to use CSS classes for styling the different elements of a chart?
In many cases (tooltip,labels) you can set useHTML as true, and then use CSS styles without !important or use formatter to define your own elements with CSS styles.
Example http://api.highcharts.com/highcharts#tooltip.useHTML
Yes, you have to use !Important because it's the only way to override inline style.
Your chart is render on some content which you have to pass it's id on chart.rendertTooption.
So you can match the elements by your chart container, like.
#container text {
font-size: 14px !Important;
}
Demo
Your highcharts chart is an SVG in your html.
You need to inspect the SVG source code to know the names of the classes and then you can use them in your CSS.
You need to add !important because some default styles already exist in the SVG.
For example
You can use
text {
fill:red !important;
font-family: "Arial" !important;
font-size : 12px !important;
}
To define default font color, family and style
or
.highcharts-yaxis-labels text
{
(some css )
}
to define the y-axis labels style
You can use css class name in highcharts 'chart' option but these changes will not reflect on exported chart. For example:
chart{
type: 'line',
className: 'someCss'
}
css:
.someCss{
border-top-left-radius: 25px;
font-weight: bold;
font-style: italic;
}
When I mouse over links that are highlighted, it seems it creates a sort of bar in the selection. Very weird. It's lower down than underlines would be so I don't think it's related to that.
I have moused over "consectetur" and "sapein interdum…". The bars stay there even after the mouse leaves. If there is on link on one extremity of a line and another on the other, hovering both makes the bar join and fill the whole line.
Two things make this problem go away:
Removing text shadows
Not changing the link colour on hover
Relevant CSS:
#content {
color: #444;
font-family: 'Armata', sans-serif;
text-shadow: 1px 1px 0 #fafafa;
line-height: 50px; // make it way too big just to make sure you can see it
}
a { text-decoration: none; color: #069; }
a:hover { color: #08c; }
Happens on Safari and Chrome (webkit), not sure about others.
n00b question alert, but I've been struggling for a few days with this one and have searched in vain for the solution in other posts!
I have a horizontal menu that has padding either side of the text such that the items appear separated. However upon replacing the text with sIFR, the padding doesn't appear, and thus the items all look like they are separated by only a space (and it looks like they are all within the same flash movie). I need to separate them!
The css is set as so:
#menu a {
height: 30px;
padding: 8px 38px;
letter-spacing: -1px;
text-decoration: none;
font-size: 22px;
color: #000000;
}
I've tried putting the same in the sifr.css at the bottom:
.sIFR-active #menu {
padding: 8px 38px;
visibility: hidden;
font-family: Verdana;
font-size: 19px;
text-decoration: none;
}
That doesn't work. I've tried putting this into the sIFR.replace function too, as well as a few other directives like tuneWidth... I haven't managed to get this working no matter what I try! Can anyone help?
If you want to have a look at an example page go here: http://www.ak40.co.uk/invitation.htm
Many thanks in advance.
Kev
Put some margin around the Flash movies instead.
I am using sifr3 to replace a few headings. One of them has a background color.
The normal page css has h2 padding set to 0, the sifr css has the same for the replaced h2, anf the sifrconfig.js has the same, yet there still appears to be padding, slighly more on the bottom.
main css:
h2 {
font-size: 22px;
margin-bottom: 30px;
padding:0;
background-color: #339999;
width: 280px;
}
sifr css:
.sIFR-active h2 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 22px;
}
sifrconfig.js:
sIFR.replace(rockwell, {
selector: 'h2',
forceSingleLine: true,
css: [
'.sIFR-root { color:#FFFFFF; font-size: 22px; letter-spacing:-0.87; background-color: #339999; text-align: left; margin:0; padding:0;}',
]
});
Any ideas? This is driving me mad!
EDIT just worth mentioning, there is no inline styles or any other css that would override anything, and using web developer toolbar, it shows the flash movie has the extra height, not the containing h2.
Hey, I had a similar problem where I had some extra padding at the bottom which was at the bottom of the H2 tag I was trying to convert SIFR.
I found my issues was related to the doc type I was using.
I was using an XHTML Strict and when I changed it to a transitional doc type the padding was removed.
I hope this helps people, I wasted a day and went completely f-ing mental trying to track it down and fix it.
Yea, Flash does that at times. You can use the tuneHeight parameter to make the movie less high. There's also tuneWidth, offsetTop and offsetLeft.