I am trying to style some buttons and I am trying to both limit the width of my buttons and have some horizontal padding, so there is some space between the text and the border.
I have therefore applied the following CSS to my class:
.class1 {
border: 1px solid;
padding: 0 20px;
max-width: 100px;
white-space: nowrap;
overflow:hidden;
}
See this jsFiddle for an example.
My problem is that when the text is too long, Firefox (latest version: 22) does not respect the left padding anymore and make the text stick to the left border, as one can see in the middle button in this screenshot:
When Chrome still respect the left padding:
Is there some way I can make Firefox behaves the same way as Chrome and IE10 here?
Some things I have determined:
IE10 behaves the same way as Chrome, so I think it's a Firefox problem.
If I replace buttons with spans, it works, but of course I need buttons. I would like to avoid using <a> if it is not necessary, since it is not semantically correct.
Changing the box-sizing property or resetting -moz-focus-inner, does not help.
Try this 'hack':
.class1::-moz-focus-inner {
padding: 0px 20px;
}
You have to remove the padding in Firefox to prevent double padding.
#-moz-document url-prefix() {
.class1 {
padding: 0px;
}
}
(It works for me in FF 22, jsFiddle)
Related
I'm trying to align the text to the center inside the select element of a form. It works fine in Firefox but the text still align to left in Chrome: any ideas?
Here's the css:
.top-search select{
background: #fff;
border: 1px solid #ccc;
width: 190px;
height: 28px;
text-align: center;
padding-top: 4px;
}
Works fine in FF but not in Chrome
I know that styling selects is something that is not very easy. There are some things you can change (height and border) but other attributes you cannot. It's more up to the browser to decide how it will be styled and how much you can change. So it would appear FF is allowing you to change it while Chrome is not. And I think it's entirely up to the browser (and OS) in this case.
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.
Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting textarea's to wrap content the same as e.g. div elements in Firefox
It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.
This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.
Here's a jsFiddle for demonstration purposes.
Getting textarea's to wrap content consistently across browsers
If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.
textarea {
padding: 0 5.5px 0 5.5px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Here's a jsFiddle showing this approach.
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
.testbox {
padding: 10;
margin: 10;
border: 5px solid black;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
You could work around this by using something like this:
<div class="testbox">
<textarea class="testarea"></textarea>
</div>
css:
.testbox {
padding: 0;
margin: 0;
border: 0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
.testarea {
padding: 0;
margin: 0 -1px;
border: 0;
background: red;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 16px;
}
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.
You can reproduce this by running this test case. The results are shown in the screenshot below. The issue is that on Firefox, when adding a overflow: hidden on the "block" (with grey background in the screenshot), the block stop being aligned as I'd like it to be: instead of the baseline of the text in the block being align to the the baseline of the parent box, it is as if the bottom of the block was aligned on the baseline of the parent box. As you can see in the screenshot, this doesn't happen with Chrome.
Is this a Firefox bug?
How to get the expected result on Firefox (baseline alignment with overflow: hidden)?
Note: Using vertical-align: middle on "block" doesn't cut it, as what I really want is baseline alignment. You can see more clearly that vertical-align: middle doesn't do baseline alignment by setting padding: 1em 0 .1em 0 (more padding at the top of the box), which give you:
It does look like overflow:hidden is buggy in that it removes the baseline from an inline-block element. Fortunately, there's a seemingly redundant Mozilla CSS extension value for overflow that prevents overflow but doesn't exhibit this buggy behaviour.
Try this:
.block {
width: 10em; padding: .3em 0 .1em 0;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
white-space: nowrap;
display: inline-block;
border: 1px solid #666; background-color: #eee;
}
It looks like it corrects the problem in Firefox and doesn't mess with Safari.
Update:
It looks like Firefox and Opera are rendering overflow:hidden inline blocks correctly and Webkit browsers are not.
According to the W3C CSS2 Working Draft's Visual Formatting Model Details,
The baseline of an 'inline-block' is
the baseline of its last line box in
the normal flow, unless it has either
no in-flow line boxes or if its
'overflow' property has a computed
value other than 'visible', in which
case the baseline is the bottom margin
edge.
try adding vertical-align: text-bottom; to .block
you can also try to set equal line-heights for .label and .block
try
.label {
float: left;
line-height: 30px;
margin-right: 5px;
}
this will get the desired result in both FF and Chrome/Safari. Did not test in IE however.
I'm trying to eliminate the extra bottom margin that both FF and Chrome seem to give to Textareas. Surprisingly IE seems to do it correctly. I would like to avoid using conditional includes but CSS3 tweaks are OK.
Sample Code
.red-box {
background-color: red;
overflow: hidden;
}
textarea {
border: solid 1px #ddd;
margin: 0px; /* Has no effect */
}
<div class="red-box">
<textarea>No Margin Please!</textarea>
</div>
By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.
If you want to leave it inline, simply try
vertical-align: top
Set display: block for your textarea.
Just bit by this in 2022 Chrome!
<textarea> has a default of vertical-align: baseline, which visually manifests as excess bottom margin.
Interestingly, none of the most popular reset/normalize stylesheets change this property. In my personal reset, I have added:
vertical-align: bottom
Just disable resize as follow
textarea{resize: none;}
I have an anchor tag with some simple CSS:
div {
background-color: gray; /* for debugging */
}
div a {
display: block;
padding: 6px 4px 6px 7px;
background-color: red; /* for debugging */
}
In Firefox, the anchor (in red) is clickable even outside of the text because of it being display: block with some padding. In IE7, when I hover over the red area that is not text, the anchor is no longer a link there.
Try adding zoom: 1 to the element. This gives the element hasLayout, which is not only the source of 60% of all IE bugs (according to a survey I made up to make this point), but also tends to plague block-level anchors.
Somehow a combination of zoom: 1; position: relative; seemed to have worked for me. So buggy!
zoom: 1 worked for me without position: relative, however display: block was set on my a elements.
Use zoom: 1 !important; worked for me.
I have 2 nav bars on my pages at http://gvtdev.davebezaire.com. Setting zoom:1; display:block; caused one menu (along the left) to behave properly. The other (across the top) will not work right even when I add position:relative; width:100%. For now, I've set set up a:hover {text-decoration:underline;} and that will have to be good enough unless someone has suggestions for me.
As a fairly new web page developer, it really is disheartening to learn how much of my effort gets expended on fixes for IE!