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.
Related
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
I decided to use flexbox in my project, but came across a problem. The new syntax (basing on http://css-tricks.com/snippets/css/a-guide-to-flexbox/)
display: flex;
justify-content: center;
align-items: center;
etc. seems to be working fine on FF26+ and Chrome 35+. However, Safari on iOS 6.1 is ignoring flexbox. According to a nice sandbox http://the-echoplex.net/flexyboxes/ I managed to rewrite my SASS mixins to support the older browser versions by adding vendor specific properties but it didn’t help.
For example
#mixin flexbox-display-row
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
The situation is messy: I can switch back to the "new syntax" ignoring the iOS 6 or I can spend hours figuring out the problem of 'old/cross syntax' to make it work on more browsers/versions.
What would be the panacea here?
Live example here: http://kleistos.lv
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.
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.
i've borrowed some code from link text to nest tabs using jq
everything is ok 'cept I cannot work out to center the tabs
using the YUI library, this is v easy. However, I can't use the YUI library coz my command of JS is negligible and fitting my php to their code is murderful and a time-waster.
are there ways to center jq tabs ?
Tom
You can add a bit of styling:
.ui-tabs .ui-tabs-nav { float: none; text-align: center; }
.ui-tabs .ui-tabs-nav li { float: none; display: inline; }
.ui-tabs .ui-tabs-nav li a { float: none; }
Source - Richard Worth
Make sure to include this after the jQuery UI style-sheet so it overrides, you can see a demo here.
If you can't use a stylesheet and must do this in code, use .css(), like this:
$("#tabs").tabs();
$(".ui-tabs .ui-tabs-nav").css({float: 'none', textAlign: 'center'});
$(".ui-tabs .ui-tabs-nav li").css({float: 'none', display: 'inline'});
$(".ui-tabs .ui-tabs-nav li a").css({float: 'none'});