This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 7 years ago.
I currently have an hover effect written in CSS:
h2:hover{
background-color: #FFE4B5;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
cursor: pointer;
}
But i noticed that when i hover each of the menu options, the text would move slightly up and then down. I didn't add anything that would cause this? I don't think.. How can i fix this and make them stay in place when hovering?
JSfiddle here
It's the border that's being added and removed that's causing this issue.
Two options: add box-sizing: border-box to the item or add transparent borders to the non-hovered elements.
Example box-sizing:
h2 {
box-sizing: border-box;
}
Example border:
h2 {
border-top: transparent 1px solid;
border-bottom: transparent 1px solid;
}
The movement comes from the border being added and removed on hover. An easy fix is to give the h2 element a transparent border of the same width when it's not being hovered:
h2{
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
Related
This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
I have a input text box of #c7e296 color and when in focus then color changes to #668933 but when I test this in different browser they show some different colors on focus.
Can someone explain why?
Below is my code,
.after input[type="text"]:focus {
border: 2px solid #668933;
}
.before input[type="text"] {
border: 2px solid #c7e296;
color: #000000;
font-size: 1em;
}
Some browsers (notably Safari) do a highlight around a focussed input field themselves. So if you set a border, and the browser does its highlight, the colors can bleed together.
You can disable that by putting outline-width: 0 on your :focus rule(s):
.after input[type="text"]:focus {
border: 2px solid #668933;
outline-width: 0;
}
LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}
Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.
Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}
Fiddle
I want my textbox to have a #96f226 border at input:focus, and it works. But if you click away and click back in, it doesn't have that green border anymore.
CSS:
#input {
background: #4a4a4a;
border: 1px solid #454545;
color: #96f226;
}
#input:hover {
background: #656565;
}
#input:focus {
outline: none;
border: 1px solid #96f226
}
HTML:
<input type='text' id='input'>
Edit:
It only doesn't do it if you click in, start typing, click out, and then click in.
The reason this is happening is because your jQuery is adding an inline-style to the input in line 9:
$('#input').css('border', '1px solid #454545');
Inline-styles override styles defined within the stylesheet.
A quick fix would be to add !important to your CSS:
#input:focus {
outline: none;
border: 1px solid #96f226 !important;
}
That works, but it's more of a hack.
If I understand correctly, you're adding the inline-style to remove the red border after an error. A better way to do this would be to simply remove the inline-style. That would sort out the conflict and you wouldn't need to add the !important hack. Replace line 9 in your jQuery with the following:
$('#input').css('border', '');
I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/