It works perfectly in Firefox, the inspection shows it's affecting the .search-input class, yet it doesn't show the background color, it shows a border, and basically the only things that are showing are the height, width and padding.
How it looks in Chrome
How it looks in Firefox (correct form)
There's no conflict in the theme, absolutely no results come out when searching for #abadb3 (the border's color). It's like if google was overwritting my css perhaps?
I'm using google chrome Version 27.0.1453.110 m
The markup:
.topbar > div .search-input {
height:49px;
border:none;
width:49px;
background-color:#F00;
background-image:url(img/i_magni.png);
background-repeat:no-repeat;
padding-left:49px;
float:right;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;}
.topbar .search-input:focus {
width:310px;
padding-left:55px;
background-position:bottom left;}
Thanks for your help in advance.
Add the following CSS:
-webkit-appearance: none;
Fixed it, apparently you need to add -webkit-appearance: none; for it to work like it should.
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I am trying to display 3 last items in menu on different height. (10px higher)
I am able to style them with:
#main-nav li:nth-of-type(n+6){
font-size:12px;
margin-left:30px;
}
but for some reason:
#main-nav li:nth-of-type(n+6){
margin-top:-10px;
}
does not work.
Any ideas how to achieve that result?
Your code is working, it is just the parent container that is not letting you see the effects.
Try changing float:right on your #main-nav to display:flex instead.
#main-nav {
/*float: right;*/
display: flex;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 0;
}
I usually try to avoid using float at all in my CSS as they aren't really meant for layout.
I have a site (http://sheisbiddy.com/the-f-word/) where the Read More link jumps when you hover your mouse over it. It only started happening when I added padding to it to make it the same size as the box below. Here's the CSS:
a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}
I'm using Safari if that makes a difference.
Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover
padding-top:10px; padding-bottom:10px;
That, or you'll want to add this padding to your other style.
You want the padding to be a part of your un:hoverd selector. That way applying the padding only upon hovering doesn't add any size to the link.
a.more-link {padding 10px 0;}
Alternatively, since you're already using transitions you can add a padding transition to make the "jump" animated.
a.more-link { transition: padding 0.2s linear; }
Depending on how you want, you could add the padding to the base class like so :
https://jsfiddle.net/78s24fpw/
a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:
I have a printer-friendly/PDF image that looks like this:
Okay, simple enough. When hovering over it, however, the background turns gray, as I have my default hyperlinks set to this, for example:
#footer a:hover {
color: white;
background-color: #636363;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
text-decoration: none;
outline: none;
}
So the question becomes, what css rule can I use on this WordPress domain to stop that background-color from happening? I'd like NO background color when hovering over images. Here's what I've tried:
.printfriendly a:hover img {
background-color: transparent !important;
opacity: 1.0 !important;
}
Among other things, but that just doesn't work. Here is what I see in Firebug:
And when I right-click and "copy html" to that selection, this is the html output:
<div class="printfriendly pf-alignright"><a onclick="window.print();if(typeof(_gaq) !=
'undefined') { _gaq.push(['_trackEvent','PRINTFRIENDLY', 'print', 'NULL']);} return false;"
rel="nofollow" href="http://www.printfriendly.com/print?url=http://www.occupyhln.org/occupy-
hln-hall-of-heroes/"><img alt="Print Friendly" src="http://cdn.printfriendly.com/pf-button-
both.gif" style="border:none;-webkit-box-shadow:none; box-shadow:none;"></a></div>
So I'm pretty much at a loss -- which is happening less and less with CSS, as I'm learning more, experimenting and reading, but any help anybody can offer me as to how to get rid of that background-color when hovering over the print/pdf image would be greatly appreciated! IF need be, there is an example here: http://www.occupyhln.org/occupy-hln-hall-of-heroes/
The background colour is not on the image, but the link itself.
.entry-content a:hover { background: none; }
The problem is that the accordion has a 300px height which is being left as white space below the accordion itself when the slides are closed. This causes spacing issues, since anything below it has to come after this ease-out space.
After looking at my old CSS Accordion, it seems to be because the slide itself is set with a 300px height and in the old accordion it was only ~40px, then opened a ~200px slide after being clicked. (Though this jerked the screen around.) I'd like to avoid HTML5 if possible and only use javascript if there's no other choice.
Is there a quick/easy way to hide this space, or am I looking at finding another accordion again?
Here's a quick JSFiddle I made to show the problem http://jsfiddle.net/RahpC/4/
Old Accordion:
.vertical section{ width:100%; height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }
New Accordion:
#vertical{
width:700px;
height:300px;
}
The thing with the old accordion style is I think I'd have to change to using "#" to make the targets and I'm not sure how much I'd have to rewrite if that's the only solution.
The other solution is to remove the images I'm using in the slides and then reduce the overall size of the accordion, but that sort of defeats the point of what I'm doing.
Thanks for any help in advance :)
If it is NOT imperitive that you use percentage values for the height's of the accordion elements, then this is a simple solution: http://jsfiddle.net/RahpC/18/
I changed...
#vertical{
width:700px;
height:auto; /* changed to auto from 300px */
}
#vertical li{
height:50px; /* changed from 14% to 50px */
width:100%;
-moz-transition:height 0.2s ease-out;
-webkit-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
#vertical li:hover{
height:200px; /* was 60% changed to 200px, can be made as high as you need */
width:100%;
}
Nice thing here is you can add as many slides as you want and it will always work because height is defined specifically.