I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
I have two buttons next to each other. One of them has a background and the other has a transparent background with a border. The problem is the border is visually outside the button, making it slightly larger than the primary button.
I have searched and come across many solutions for this, but my question is what is the best practice to solve this?
Thanks!
use box-sizing
box-sizing: border-box;
This way the padding, border will be inside.
You have two options, one is to use outline and outline offset, like this:
button{
outline: 1px solid red;
outline-offset: -1px;
}
Or you can use an inset box-shadow, like this:
button{
box-shadow: inset 0px 0px 1px red;
}
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
I have designed my submit buttons using CSS. In any Webkit or Gecko browser it works perfectly, but Internet Explorer 9 adds padding to the button's text when it is pressed down. In addition, you can see this stupid dotted border. It looks like this then:
http://img6.imagebanana.com/img/tkp7l8m3/button.png
The special background image which I have specified in CSS for input:active is only shown in IE, if the button is clicked in the very thin area between the button's border and this dotted border. If the button is clicked in the middle it keeps the hover-background although it is pressed down.
Can anyone help me remove this extra padding and the dotted border?
Thanks in advance
Qoguth
To get rid of the dotted border you can use pure CSS:
button { outline: none; }
As for padding when clicked, I fear it's part of the internal browser behavior that can't be changed.
Both of the answers given so far are incorrect in an important way. You should only hide the keyboard focus outline on :active, hiding it on :focus too hurts keyboard navigation.
button:active { outline: none; }
As has been stated, the increase in top-left padding is not overridable.
You could try:
/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }
Presuming you actually want padding and not some other property.
Does anyone know why IE6 and IE7 add a white border between a button border and the background?
Here is my CSS and HTML:
#reportButton{
background:#fefcda url(buttonback.png) repeat-x bottom left;
border-top:2px solid #fffff8;
border-right:2px solid #e3b40c;
border-bottom:2px solid #e3b40c;
border-left:2px solid #fffff8;
color: #373535;
font-weight: bold;
margin:0 2%;
width:45%;
}
<button id="reportButton">Report a Concern</button>
If you try this, you will see a funny white border between the borders and the background. This does not appear in any other browser, not even IE8.
Anyone have a simple fix or suggestion as to what I'm doing wrong?
Thanks!
EDIT: I just noticed that when I click on the button, the marching ants come up and the white border disappears. It seems as though when the button is :active they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.
Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.
EDIT2: It actually appears that the border is not white but the background-color of the button. It appears IE is leaving a 1px gap between the button border and the button background image.
I had the same problem...neat trick that seems to work at least for IE:
The "white" outline is actually the background color of your image. So set this to be the same as your border color. If you don't mind a slightly-thick-ish border, stop there. If the border is now too thick, set your border color to the background color of the page.
e.g. to display a black "border" use this css for your button:
background: url(./button_bg.gif) no-repeat;
background-color:#000000;
border: 1px solid #FFFFFF;
Make sure that that border is not coming from the image itself (background of the image), set the accurate width and height, also try setting the padding to 0 like #SLaks said.