Here's an example: http://jsfiddle.net/JPQxX/
I tried this in Chrome and FF. In both browsers there's a 1-2px margin between the two inputs. I want to make the two elements touch without explicitly shifting the submit button to the left. Margin is already set to 0px;
Reset the border style and it should work http://jsfiddle.net/JPQxX/1/
input { border: 1px solid grey; }
The elements do touch, without a margin. If you inspect the submit button element in Firebug, you’ll see that it has no margin but a border that is 3px wide. What seems to be a small margin is part of the border. If you take a screen capture and magnify, you can see that the border has a 1px wide gray part with 1px wide transparent parts on each side of it, except at the rounded corners.
The default border is drawn by built-in routines in browsers, and modern browsers tend to use this kind of routines. If you set border properties for the button in CSS, browsers tend to switch to normal border drawing, so the button stops looking like a normal button and takes whatever shape you set. I don’t think you can completely simulate the default border appearance (getting rid just of the transparent part that causes the margin-like phenomenon), but the following might take you sufficiently close (on supporting browsers):
input[type="submit"] {
border: solid gray 1px;
border-radius: 4px;
background: #ddd;
}
Demo: http://jsfiddle.net/m2CSy/
Related
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
In CSS, I can set an outline width outline: 1px solid red and I can set its offset (similar to padding) with outline-offset: 5px.
However, this method does not allow for the shorthand method used by padding, like border: 1px 2px 3px 4px and there doesn't seem to be an outline-offset-left: 1px option.
So, is there a way to set different offsets on each side for a CSS outline? Note that I don't want to use padding; it would offset the outlines how I'd like, but it would also add extra padding to elements where I don't want to, which is the whole reason I am using outline in the first place.
According to MDN's docs on Outline, the only properties to set on outline are:
outline-style
outline-width
outline-color
To which outline is a shorthand to concatenate those properties. But there's no side definition, due to the following fact:
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this...
Since they may not be rectancular, it wouldn't make sense to be able to define left, top, etc, properties...
There is a nice hack you can do to achieve the effect you are after, but it probably has to be done on a case-by-case basis.
My scenario was that I had some content with padding, which contained several html elements including some anchors/links. Let's imagine the scss is something like this:
.contanier {
padding: 15px;
> a {
padding: 8px 0;
}
}
When focusing on an anchor the outline is pretty much touching the text and generally looks poor. Now, as you said, adding left/right padding to the anchors for the sake of an outline would throw off the layout of the content. The anchors would no longer appear inline with other elements in the container such as a heading/paragraph/image/what have you.
So to resolve the problem I added padding to the anchors, and negated it by setting a negative margin:
> a {
margin: 0 -4px;
padding: 8px 4px;
}
Now I have complete control of how the focus appears. There are some use-cases where this solution does not work, for example, if your anchors have a background colour. But for most cases it works pretty well.
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;
}
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
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.