I am trying to set the height of my top border. I have read around that this is not possible in traditional ways. But I am yet to find a workaround for this. I need my border to align at the very top of the page. So what can I do?
HTML
<li class="active">Hjem</li>
CSS
li.active
{
border-top:3px solid #000;
}
** The problem is that with the current code the height of the border, meaning the space between the border and the text is locked. I need to control this.
I had tried out. I dont see any problem with the current code. Created JsFiddle. It worked as expected.
li.active
{
border-top:3px solid #000;
}
JsFiddle
Related
My Site - Product Grid
When you hover over either of the product images on this page, there is a 2px horizontal line that appears to the left. I tried setting my padding, margin, no-wrap, I just can't figure it out. Thanks for looking and any advice.
I know I can cheat it by adding:
.mz-productlisting-image img {
margin-left: -4px;
}
But I don't want to if I don't have to!
This is the text-decoration:underline; of the anchor tag.
Simply add to
.mz-productlist-tiled a:focus,
.mz-productlist-tiled a:hover{
text-decoration:none;
}
Hope it helps :)
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 have a list using li for my nav bar. I set a border-radius on my background so that it would be rounded. Now I just need to delete the border-left of the home element. Here are the snippets of code:
HTML:
<li class="home">
home
</li>
CSS:
li.home {
border-left:0px;
}
I hope this is enough context to help answer my question. Please let me know if it isn't.
try li.home { border-left:0px !important; }
if you dont want left border dont mention it..i.e dont write border:1px solid; or boder-left:1px;..only mention the borders you need like border-right or border-top and to have rounded edge use border-top-right-radius:10px;
EXAMPLE :: FIDDLE
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:
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;
}