line-height vs. font-size/line-height - font-size

If in a font-size: CSS attribute you encounter font-size: 14px/19px, that's the same thing as saying font-size: 14px; line-height: 19px, isn't it?
If so then why aren't the following two paragraph tags the same height?:
http://www.frostjedi.com/terra/scripts/demo/line-height.html

First of all, you have font-size: 14px/19px; which is invalid. I think you mean font: 14px/19px; But this is still wrong...
When using the CSS shorthand for font, you cannot omit the size or family values.
Try font: 14px/19px Arial;
See the Omitted Mandatory Values section of http://www.impressivewebs.com/a-primer-on-the-css-font-shorthand-property/ for more info.

Related

Variables in css.scss file [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Seems like this should be a simple thing. I'm just trying to use some varialbes in my css.scss file. My understanding is I just define them at the top of the file:
$gf-green: #222;
$gf-aqua: #33ccff;
I try to use one of them later in the file:
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: $gf-aqua;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: #33cc33;
text-decoration: none;
}
}
When I render the page it gives:
Invalid CSS after " background: ": expected expression (e.g. 1px, bold), was ";"
.guide-signup-btn {
background: ;
}
.guidefind-nav-right {
padding: 10px 5px 5px 5px;
So it's not filling in the variable. What am I missing?
You are setting your variables correctly and they work. Looks like the problem is coming from the .guide-signup-btn section of your scss, but you're correct in terms of how to set the variables.
Link to your scss working with the font color on codepen

Tinymce error : special effects not working in browser

I added tinymce to my active-admin so I could format large text areas. It works great, I can add effects and save that model. But when I go to browser it just shows html code like this :
<p>Aizaugušu lauksaimniecības zemju apstrāde ar Ahvi zemes frēzi.</p> <p><span style="color: #333333; font-family: 'Segoe UI', Arial, Verdana, Tahoma, sans-serif; font-size: 13px;"><strong>In Microsoft Office OneNote 2007</strong>, you try to send a note to a mail recipient as an attachment. After you do this, the following text is unexpectedly inserted in the body of a new e-mail message:</span></p> <div class="message" style="margin: 0px; padding: 10px 30px; color: #333333; font-family: 'Segoe UI', Arial, Verdana, Tahoma, sans-serif; font-size: 13px;"><strong>Click the OneNote</strong> attachment if you want to view or edit the notes in OneNote. If you don't have OneNote 2007, you can click the second attachment to view the notes as a Web page.<br /><br />You can download a free OneNote trial version from: `http://r.office.microsoft.com/r/rlidOneNoteTrial?clid=1033&ver=12&app=onenote.exe&p1=12
Instead off text with specified effects.
That is because some Javascript error?
Thanks :)
This is probably due to the content being escaped before it is rendered in your view. Rails does this automatically as a safety precaution. In your view you probably have something like this:
<%= #model.content %>
Try turning off the escaping by doing:
<%= #model.content.html_safe %>
Hope that helps!

Rails application stylesheet error

In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.
Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.

Getting Webdriver ElementNotVisibleException when I try to click on a hyperlink

I am trying to click on a link using webdriver but it throws me a ElementNotVisibleException saying "Element is not currently visible and so may not be interacted with"
My WebDriver code:
addProgram.click();
addProgram refers to an anchor element. This is populated by annotating #FindBy(how= How.LINK_TEXT, using="Add Program"). In other words it is similar to driver.findElement(By.linkText("Add Program")).
My HTML is:
<div class="form_btn">
<a href="/program/addProgram">
<span>Addrogram</span
</a>
</div>
It starts working when I remove the css declaration from the above div. The dive has a hover style, may be that is the one causing the problem.
CSS:
.form_btn {
float:left;
background:url(/bg_button_right.gif) no-repeat scroll top
right;
color: #fff;
display: block;
height:22px;
font: bold 10px arial;
margin-right: 0px;
margin-top:2px;
padding-right: 4px; /* sliding doors padding */
text-decoration: none;
}
.form_btn span {
background:url(/assets/images/provider/bg_button_left.gif) no-repeat;
display: block;
float:left;
line-height:18px;
padding: 2px 5px 5px 10px;
font-size:11px;
}
.form_btn a{
color:#fff;
}
.form_btn a:hover{
color:#fff;
text-decoration:none;
cursor:hand;
}
I have trawled the web trying to find a solution but none has worked. Any suggestions/help is greatly appreciated.
Thanks,
Chris.
(UPDATE) This issue was resolved and should be available since Selenium 2.4.0
Sounds like you ran into the same bug as I did:
http://code.google.com/p/selenium/issues/detail?id=1445
the work-around is to get the element inside the link and click.
re-writing your code:
driver.findElement(By.linkText("Add Program")).findElementBy(By.tagName("span"))
I just solve this error while using capybara in ror project by add " Capybara.ignore_elements = true " to features/support/env.rb
Working from #Zernel's solution, the following solves for ror project using capybara.
Add Capybara.ignore_hidden_elements = true to the file config/environments/test.rb
Using texts is not always the good methodology.
Try this:
driver.findElement(By.cssSelector("div.form_btn > a[href*='addProgram'] > span")).click();
Always Use CSS, It performs better than XPath.

sIFR 3 Uppercase

Can someone please explain how can I implement text-transform: uppercase; feature with sIFR 3?
On the doc, it explains how to use it but I really don't know how to implement it. Can someone provide an example?
Specifes text transformation. This is
handled by sIFR because Flash does not
support this natively. It is applied
to all text, if you want to apply it
to a specific element you'll need to
use the modifyContent function. If
sIFR.forceTextTransform is false, sIFR
will not perform the transformation.
Thanks
You would add the text-transform property to the CSS rules in the css property of the options object passed to the sIFR.replace method (phew!).
An example:
sIFR.replace(myFont, {
selector: 'h2',
css: '.sIFR-root { font-size: 20px; color: #008cba; text-transform: uppercase; }',
wmode: 'transparent'
});

Resources