First the result in Firefox 4 Beta 8:
Button vs Div http://b.imagehost.org/0419/buttonSpace.png
The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.
Here the CSS file:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0
In that bug report there is a fix for the problem:
button::-moz-focus-inner {padding:0; border:0}
I think you have to set a width for the div
It looks like the padding you're asking for is not being applied. Have you tried setting it explicitly on the button?
Related
I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
My question is: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
Here is a fiddle with the minimum amount of code needed to reproduce this behavior: http://jsfiddle.net/tjVvp/8/
I have tested this in Firefox and Chromium. The issue relies on the combination of the <p> element and the fieldset css code:
fieldset {
padding: 0;
margin: 0;
border: 0;
}
If <p> is removed, the issue does not appear. In that case, the page is rendered identical in both Firefox and Chromium.
If the <p> element is present, but without the CSS code for the fieldset element, both Firefox and Chromium will render the page identically.
They need to be both present at the same time, or the issue does not occur.
If the css code for the fieldset element is present, that is when the pages are rendered differently, as can be seen in the fiddle.
It gets even more complicated: the issue only occurs when all 3(margin, padding and border) are set to a value. If you remove one of the declarations, the browsers will render the pages identically. It doesn't matter which combination is left, only when all 3 properties are declared will the difference occur. And then only if the <p> element is present.
So, repeating my question from the top of this text: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
I think what you're referring to might be the default margin of <p>. If you inspect the <p> tag you can see the margins on either side:
Also note that the margin on the top is being applied not to <p> itself to one of its ancestors, this is called margin collapsing.
References
CSS 2.1 Spec - Collapsing margins
Try this one, I try it on fiddle and it's working fine.
fieldset, p, label {
padding: 0;
margin: 0;
border: 0;
}
header {
display: block;
width: 100%;
height: 40px;
background-color: red;
}
legend {
margin: 2px 0px;
padding:0px 10px 0 0;
float: left;
}
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.
This is a followup to my previous question. It dealt with a rendering issue in Firefox. After that issue was fixed I obviously tested the design in other browsers. And obviously - how could it be different - I encountered yet another rendering issue, this time in IE7.
Image in Button rendering issue in Internet Explorer 7 http://b.imagehost.org/0451/NastySpace2.png
The former of the above elements is a button containing an img. The latter is a div containing an img.
In the former case (the one with button and img) there is a space between the border of the img and the border of the button. I want to get rid of it.
CSS:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
/* this is a fix for one of the padding issues in IE7 */
button {
overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Please help me, I'm starting to feel really pissed to be honest. This is the third padding bug I encounter with this button tag...
Edit: I am giving bounty on this question, to either get a more at-the-root fix for the IE7 problem or for tipoffs about other browser-bugs related to <button>s. I want to have a button that looks perfectly, pixel for pixel the same in all major browsers. (PS: IE6 is not a major browser.)
Well, it seems that I must conclude that there is no fix for this one - at least no known fix. Thus I saw no alternative then manually removing this space (using negative margins).
Here is my complete list of fixes that makes the button element look the same in Firefox, Safari, Chrome, Opera, Internet Explorer (IE9, IE8, IE7, haven't tested IE6):
button img {
display: block; /* required to get rid of bottom space in many browsers */
*margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}
button {
overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
border: 0; /* remove inner focus from Firefox. The inner focus takes up */
padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}
Compressed version:
button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}
Removed line breaks:
button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}
Have fun with consistent buttons!
So display:block doesn't fix it? How about vertical-align:bottom for the img? Can you setup a testcase on jsfiddle.net?
EDIT: display:block on the button seems to do it: http://work.arounds.org/sandbox/48/run
Edit #2: Stubborn huh.. does this work? http://work.arounds.org/sandbox/48
Have you tried adding width:auto to the button?
button {
overflow: visible;
width: auto;
}
I often find myself cursing at buttons and then solving the problem by displaying an image with an onclick Javascript submit.
Hackish? Perhaps. But it's an acceptable solution for the 100+ major credit card websites I did for an international bank....and to date, I haven't found a more picky client.
I get around this issue by using an <input type="image" /> instead of a <button /> and using javascript to modify the image shown when the mousedown and mouseup events is triggered.
Try it, it'll save you a big headache.