SASS inserts unexpected CSS on production server and messes up my a:hover
This is fragment of my application.css:
pre {
background-color: #eee;
padding: 10px;
font-size: 11px; }
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: none;
}
div {
&.field, &.actions {
margin-bottom: 10px; } }
however on production server firefox reports following css:
pre {
background-color: #EEEEEE;
font-size: 11px;
padding: 10px;
}
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: 1px solid #777777;
}
div.field, div.actions {
margin-bottom: 10px;
}
on my development machine firefox shows following CSS:
a:hover {
border-bottom: medium none;
}
I use Rails 3.2.13 and I have never seen problem like this. I have wasted whole afternoon trying to find a solution. This problem breaks my home page and makes it look very unprofessional.
First, border-bottom is a shorthand property. It combines border-bottom-width, border-bottom-color and border-bottom-style. The values of those properties can appear in any order. Any of them can be omitted.
none is a value from border-bottom-style.
Second, what Firefox shows in its inspection feature, is not exaclty your CSS. It shows what it treats the CSS like. border-bottom: medium none; means that you changed the style of border to none, while the width remains as medium (apparently, it was inherited).
To see the actual CSS, open the actual CSS file and look inside. It will also let you view media query wrappers.
Third, to remove bottom border, use border-bottom: 0;. That will be treated as border-bottom-width: 0;, which effectively removes the border.
Related
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I have two sets of buttons. The first set is for navigation, the second set is for download and info.
The first set works fine, the second set works fine too, but I can't get these buttons to change when I hover over them.
Here is the code I used for the second set (this set is used with book covers):
.book_covers li .btn1,
ul li .btn2{
border-radius: 10px;
background-color: #E77600;
cursor: pointer;
width: 41%;
height: 22.5%;
padding: 0%;
float: left;
text-decoration: none;
color: #fff;
text-align: center;
font-size:80%;
cursor:pointer;
-webkit-box-shadow: inset 1px 1px 5px 2px #733B00;
box-shadow: inset 1px 1px 11px 2px #733B00;
-webkit-transition-duration:0.4s /*safari*/
transition-duration: 0.4s;.book_covers li .btn1 {
margin:0% 2% 4% 6%;
}
.book_covers li .btn2{
margin:0 5% 5% 1.5%;
}
.book_covers li .btn1 :hover {
background-color: #FFF;
color: #666;
}
.book_covers li .btn2 a:hover {
background-color: #FFF;
color: #666;
}
The page where they are used is: [link] (http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html)
Thanks guys for your responces, but I found the solution how to handle this:
.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}
Use 'onmouseover' event handler to get it done.
A simple example would be changing the color on moving the mouse over a button.
<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
function changecolor()
{
document.getElementById("buttonone").setAttribute("color","red");
}
</script>
This would change the button text color to red on hovering the mouse over the button.
Using css and js!
function changecolor()
{
document.getElementById("buttonone").setAttribute("class","somenewvalue");
}
Then use .somenewvalue in the css stylesheet to give it the required effects .somenewvalue { color:red; }
Otherwise,using the onmouseover eventhandler, you could remove the previous button and create a new button with new attributes. This can be done using the DOM functions.Add effects to the newly created button using either its 'id' or 'class' in the stylesheet. If you have so many buttons in your website(not at one place or page),then it would be better to use css alone. Js and css together would be a good choice if the effects for different buttons on your site are gonna be different. Again,if you have a lot of buttons,css alone is better. I ain't sure about how to do it with css alone.
Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.
Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.
You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.
So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector
Not sure if my semantics are correct. On my forum, I have a way my links look that looks good in a regular post, but doesn't when someone is quoted in a post, the text is shrunk down to a smaller font and it doesn't look good.
So I tried this, but it had no effect at all.
blockquote {
border: 1px solid #ccc;
margin: 0;
background: #fff;
padding: 4px;
font-size: 11px;
a:link {color:#00FF00;}
}
blockquote cite {
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
margin: 4px 0;
font-size: 11px;
a:link {color:#00FF00;}
}
Is there anything I can do to easily change the link properties here? Because the way I'm trying it doesn't seem to work at all.
You cannot nest css rules like this:
blockquote cite {
a:link { }
}
you would use this:
blockquote cite {
}
blockquote cite a:link {
/* rules for links within 'blockquote cite' */
}
With invalid css some of your other rules may not work, and it can cause other unexpected formatting issues.
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.