I'm trying to make a navbar as an exercise.
I'm using a:hover to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.
What is the proper fix to this problem? I know there are others (discussed here), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set border:transparent hoping it might do what I want, but it did not show take space at all.
I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?
How about border: 10px solid transparent ?
Your best option would be to add padding or margins to your element that's the same size as the border and make the border have zero width, and then show the border and remove the padding with the a:hover selector.
Here's a sample. You can often do this with margins too.
a {
display: inline-block;
height: 2em; width: 100px;
padding: 2px;
background: #0ff;
}
a:hover {
padding: 0;
border :2px solid #000;
}
Hello World
One reason this isn't working as you'd expect is because you are only applying display:block on :hover, it needs to be applied to the element without the :hover selector or you will get the "shifting" dimensions. It doesn't matter which display type you use, you just have to make sure they are the same, and by default <a> is inline.
Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like solid instead of none.
The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).
http://jsfiddle.net/Madmartigan/kwdDB/
Try this:
#wd-navbar li a {
border: medium solid transparent;
display: block;
margin: 1px;
}
#wd-navbar li a:hover {
background-color: #F5DEB3;
border: medium solid;
}
border:transparent means border: transparent 0 none
If you don't specify a property when using shorthand syntax then you reset all the properties to their defaults.
You need to give it a border-style and a border-width.
You could use the outline CSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.
However, this does have some issues, not being supported by IEs 7 or earlier.
Setting border-color : transparent ; does the job.
a {
border-color : transparent ;
}
a:hover {
border-color : black;
}
use pseudo elements ::after and ::before to ceate invisible boundaries.
Please note that transparent border is just useful when you don't have any box-shadow on the element. Have a look at the image:
Related
I have two buttons on my web page which look as follows...
The button on the left has the correct style border; thin and with no rounded corners.
The button on the right, which currently has focus, does not have the correct style border. When Inspecting the element within chrome, it has the following properties...
element.style {
position: absolute;
bottom: 25px;
border: none !important;
right: 140px;
}
.btn:focus {
border-radius: 0px;
}
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
}
.btn.focus, .btn:focus, .btn:hover {
text-decoration: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I would have thought that applying the border: none !important css property (while the element was forced into a focus state would have worked, but apparently not.
Furthermore, even when I set the border-color to yellow while the button is focused, this effect is not applied.
How can I prevent the border from being rounded off, so that it stays square and the corners remain a 90 degree angle?
What you see as an outline.
Just add this line to the button's css:
outline: none !important;
The purpose of the outline is accessabilty, so you should think carefully about removing it. You can always change the way the border looks instead.
As for !important, if you write your css right, you shouldn't use it. Inline css (style='color: blue') supercedes classes and id styling, so in your case the !important might be redundant.
There will be a lot of suggestions to remove the outline.
Before You decide to do so, please note that it'a a really bad practice from the accesibility point of view
https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
I am trying to make an element that allows a user to select an area and that in turn selects a radio button (hidden). The problem is that areas that are selectable need to be triangles, as a result I have used the following code, to create a downward pointing triangle,
width: 0;
height: 0;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
position:absolute;
top:-1px;
right:1px;
border-top: 26px solid green;
My problem is now that it will not do any of the hover behaviour or :checked behaviour, I assuming that this is becase the element theoretically has no dimensions? Is there a work around for this? Basically what I want to happen is when the triangle is hovered it turns grey, when it is clicked it turns yellow and the sibling radio is checked. Here is my fiddle, I have the center (circle working).
http://jsfiddle.net/bfehyv2a/1/
try http://jsfiddle.net/bfehyv2a/4/
You will see a :hover still works as the pointer is considered to be over the element when it is on the elements border.
.green .long:hover {
border-top-color: #888;
}
Also, notice that border-top-color is used as this is the only border you are setting a colour on to create your triangle.
As for :checked status, this only applies to the radio button itself and as the triangles are not within this you won't be able to use this to set there colour. You will have to use JavaScript to set state classes, which is what you should really be doing anyway as it is a better separation of concerns.
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}