I'm trying to get the bottom blue border to disappear on :active. The persistant border is tied to the background div but it's not going away when the hyperlink is active even though the hyperlink has no bottom border.
Here is a fiddle of the project:
http://jsfiddle.net/ajrdesign/cTKnn/5/
Anyone know why this background div is appearing above the other elements?
Figured it out. I had added border to the ul li element and not the li element. So the :hover and :active were simple adding another border on top of that one. Changed that and it worked great!
http://jsfiddle.net/ajrdesign/HgnwG/
Related
In Chrome, when I hover over a certain div, adjacent divs are moved to the left by 1px. When I click the div I was hovering over, the adjacent divs are moved back into their original position.
I'm wondering what's the best method of figuring out why this is happening? I've inspected the pertinent divs in inspector and can't see any reason why it's happening. Is there something inherent to Chrome that I'm missing?
Issue can be seen here by hovering over the "Filter" box in the Office column.
Fiddle that's throwing a few errors.
EDIT: Once I enable "Show paint rectangles" and hover over Filter, a div (shown in green) looks like it creates that little gap where the red arrow is:
This is your tag:
mytag {
text-decoration: none;
color: #5695F3;
}
Use display:inline-block on hover will make not move other divs on hovering you element.
mytag:hover {
color: #00287D;
text-decoration: underline;
display:inline-block;
text-indent:0px;
}
Hope this helps.
Found out that it was select2's CSS that causing the issue. One of the div's overflow:visible was pushing other divs outwards.
I have a series of 50% width elements that are next to each other, and I want to give each of them a 20px white border to separate them, the reason for this is that I have a responsive layout and I always want there to be 40px white space in between the elements.
I have a hover effect over them too, but when you use border on the main element, when you hover over the border or outline, you trigger the hover effect, which I don't want.
http://jsfiddle.net/keleturner/6PqJt/
Try hovering on the red border and outline (outline you need to hover in between the two blocks to trigger hover).
The only solution I found was to add a new element to wrap everything inside the .main and give it a border there, but that is very non-semantic and having to extra markup for something like this doesn't seem right.
the line
.main:hover .inside { background: blue; }
is wrong, it should be
.main .inside:hover { background: blue; }
http://jsfiddle.net/6PqJt/5/ EDIT - updated fiddle to fix bottom .main - also added some css to fix the hover of the second one
Live link here
http://soloveich.com/pr1-1/
For some reason, div hover changes only when mouse goes over the part, that's on top of the grey content background.
When it hovers on lower part- nothing changes
<li><a class="ml" href="http://soloveich.com/pr1-1/?page_id=66"><div class="tabs1"><div id="t1">
</div></div>
</a></li>
css code
#t1 {
height: 519px;
width: 271px;
background-image: url(images/t1.png);
background-repeat: no-repeat;
}
#t1:hover {
background-image: url(images/t1r.png);
}
didn't put all 4 of them here, since it's all the same
#cnt1 element is over the divs, and block the hover action.
You must play with z-index, and positioning... Two less reputation to make a comment, sry :).
UPDATE
Sorry, now I'm not sure about that. But You should try to run tFirefox, right click this div, run inspect element and then click the 3D view icon (top right). Then everything should be clarified.
OK I know
You must apply the hover effect to the first child of the whole thing. Div is inside a, a is inside li. So li:hover is an answer I think. The background should be also applied to the li element. Hope it helps.
I am not going to paste the code as I hope that is not so important here.
an image is placed against a colored background (background made colored by background-color property ). surprisingly blue border is shown around the image.
What is the secret? how can i remove the border?
tnx beforehand.
Istiaque Ahmed
Bangladesh
Is the image inside a link (<a>)? That tends to put a blue border around the image. You can remove it by setting a border: 0 on the image (or some class the image is in).
Let me guess, the image is inside an a tag?
A border shows up for an image that is a link unless you explicitly remove the border.
You can remove the border with css:
img {
border: none;
}
H3LLO,
For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.
Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.
To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.
Any ideas on how to get rid of a element's extra bottom padding?
Thanks
Adam
add vertical-align:bottom; to your img css properties.
a {display: inline-block}
img {display: block}
Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.
The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.
<div style="width:64px; height:64px">
<img src ='image.png' style="width:64px; height:64px" />
</div>
I'm not positive why it occurs, but you could try YUI Reset to fix it.