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.
Related
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.
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.
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?
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.
EDIT: As of 2012-06-11 this bug has been finally fixed! https://bugs.webkit.org/show_bug.cgi?id=35981#c1
I have some pretty straightforward markup:
<form action="">
<fieldset class="compact">
<legend>Member Tools</legend>
<label for="username">Username</label>
<input name="username" id="username" type="text"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" />
</fieldset>
</form>
I am attempting to add a small margin to the bottom of the legend element, this works just fine in Firefox 2 and 3 as well as IE 5-8, however in Safari and Chrome adding a margin does nothing. As far as I know legend is just another block level element and Webkit should have no issue adding a margin to it, or am I incorrect?
After a bit of research I found a work-around for this that I believe to be the least "hacky" method for solving it. Using the nasty webkit targeting hacks really weren't an option, but I found that the -webkit-margin-collapse: separate property seems to work in stopping the margins on the elements from collapsing just as it describes.
So in my scenario the following fixes the issue by adding a margin to the top of the first label element (right below the legend) in the fieldset:
fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}
Not perfect, but better than nothing, other browsers should just collapse the margins normally.
If anyone is curious someone actually did file a bug report about this # 35981
https://bugs.webkit.org/show_bug.cgi?id=35981
Thanks for everyone's input.
Well, <legend> really isn't "just another block-level element." Maybe it should be, but the fact is that it inherently is going to have layout peculiarities in that it's supposed to do something pretty weird, as elements go. Between IE and Firefox, the effects of margin and padding on <legend> elements are a lot different.
Do you want to just separate <fieldset> content from the top of the box? If so, I'd try playing with padding-top of the fieldset itself.
Sorry to post an answer to such an old thread, but there's actually a pretty easy solution for this that doesn't require any hacks. All you need to do is add padding to the top of your fieldset element.
fieldset { padding: 10px 0 0; }
This might make what I'm trying to say a little more clear: http://jsfiddle.net/8fyvY/
Ive just found adding a 1px padding to the fieldset seems to make it suddenly aware of the margins it contains (the spacing created is more than 1 px).
I meet this problem and everything look fine on chrome but safari make the problem.
In that case if I add this code
fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}
I get double margin on Chrome. Then just decide to do the following
fieldset > legend + *{
padding-top:3px;
}
Hope that help. Cheers!
To get a legend working with bottom border and margin in all browsers I insert a span inside the legend, put the border on the span, set the legend margin to 0 and add padding to the bottom of the legend.
e.g.
legend {
border: 0;
margin-bottom: 0;
padding-bottom: 20px;
}
legend span {
display: block;
border-bottom: 2px solid #f0ebe6;
}