i have the following selector in my css:
a:active {
position: relative;
top: 1px;
}
So every link has this little button-effect when it's pressed.
How can i prevent that behaviour for specific links?
e.g. i have a "back to top" link on my website that shouldn't have this behaviour.
a#back-to-top {
position:fixed;
right:0px;
bottom:20px;
width:20px;
height:20px;
background:green;
}
In this case the "back-to-top" starts to jump.
However if I try to reset this it doesn't work.
a#back-to-top:active {
position:fixed !important;
bottom:20px !important;
}
any idea what I'm doing wrong or how I could exclude specific links from that active behaviour?
Try resetting the top property as well.
a#back-to-top:active {
position: fixed !important;
top: auto !important;
}
The following
a#back-to-top:active {
position:fixed;
top: auto;
}
would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..
No need for the !important directive since the rule has higher specificity and will get applied instead..
demo: http://jsfiddle.net/gaby/zUEER/
i think you should "reset" the top decleration
a#back-to-top:active {
position:fixed;
bottom:20px;
top: auto;
}
also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.
Related
I am new to CSS. I am observing a strange CSS behaviour where an element has the below CSS property
.container .header{
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
When the page loads on Mozilla and chrome, the top property is not applied but inspecting the firebug shows the property. When I edit in firebug just by 1px, the elements gets properly aligned and even if I set the top value to 21% after that, the position is correct. Only on load the CSS property is not applied. Can you please let me know where I am going wrong?
It's because you are calculating the top value in percentages and to make that happen, you need a declared height for it's parent i.e. container.
.container, body, html {
height:100%;
}
Add the rule above and see it working. FIDDLE HERE
NOTE - body and html also need their height declared(either in percentages or pixels) too as container's parent is body and like so.
I know exactly what it is now. Its your style class names themselves. After much testing I have discovered:
.container, .header {
color:#ffffff;
font-size:2em;
font-weight:bold;
padding:5px;
position:absolute;
text-align:center;
top:21%;
}
Notice what's after the .container? A COMMA. You need a Comma after every class name that inherits those same attributes! Hope this helped!
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I have an image on a page and when I hover the image should show a different color. The hover itself works but the original image is on top of the hover image. I have tried setting z-index but does not work correctly.
Here is the CSS:
#login, #logout {
float:left;
padding: 0px 10px;
margin-left:5px;
margin-top:15px;
z-index:1;
}
#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
Thanks for any help and advice!
May I suggest you use CSS sprites instead. I believe they are a much more efficient method of achieving what you want.
Rather then 're-inventing the wheel' and writing how to do it here have a look at http://sixrevisions.com/css/css-sprites-site-speed/ or just google 'CSS Sprites'.
They decrease HTTP requests and therefore amount of bandwidth your site uses.
Hope that helps. If not, comment and i'll try and come up with a better option.
Cheers,
Matthew
You're better off having the original image and the hover state on the same element. Right now, the original is an image contained within the link tag, so it is on top.
Do this
Remove the image
Add this CSS to #login
background: url("../images/skin/login.png") top left no-repeat;
display: block;
height: 26px;
width: 80px;
It's better to have both images on the same image (a sprite), and just change the background position on hover. This eliminates flashing as the image loads upon first hovering. See the other answer by Matthew about that.
remove the hover css and change the image to this:
<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />
and add this script to your page:
function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
}
If you are like me and don't like using sprites:
I came up with a quick and easy way to have the same effect (image fade to color) the only drawback is you need a transparent PNG, but works great with lots of buttons or social media icons.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
Let me know if you like it.
I am having an issue with my CSS that only occurs in IE7 and am hoping someone else has encountered this before. Basically we have a customer grid design where the cells highlight when hovered over. This works great, however in IE7 the highlighting sticks, you hove over the cell then leave the cell and the highlighting is still there.
Here is the css I am using for the cell
.cell input:hover
{
background-color: #54B5FF;
}
Thanks!
Edit:Parent
.cell input
{
border:none;
background:transparent;
padding:11px 6px;
width:35px;
height:16px;
line-height:16px;
text-align:right;
background-color:transparent;
border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;
}
edit:Found the fix!
I found a fix I thought I'd share with anyone else encountering this bug in the future. Apparently in IE7 only certain style changes cause a situation called hasLayout which apparently causes it to re-render properly. In my case I changed the code to
.cell input:hover
{
position: static;
background-color: #D7ECFF;
}
This didn't change anything, but it did cause IE7 to properly render it!
Set a default.
Try:
.cell input {
background-color: #fff; /* or whatever you want it to be... */
}
.cell input:hover
{
background-color: #54B5FF;
}
The css is exactly like this:
body {
background:#FFFFFF none repeat scroll 0;
margin:2px 5px;
font-family:Arial,sans-serif;
font-size:10pt;
}
But from firebug I see the style is:
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 50%;
font-family:Arial,sans-serif;
font-size:10pt;
margin:2px 5px;
}
Why does firefox add those un-needed styles? How can I get rid of them?
It is added by the rendering engine for its own use, so you cannot get rid of them.
See this question for details.
It is not adding anything for me. Are you sure these are not default styles saved in your default user stylesheet?