I'm on FF 43.0.3, Mac OS 10.9.3. FF is cutting of the native checkbox on the right. It's not a css problem on my part; I confirmed the cutting off in CodePen. I also viewed a couple of random sites with checkmarks, and I see the same. I made sure to reset my browser zoom to default, and the default font is Times at 16px. I also tried turning off hardware acceleration via Preferences as another site suggested. Didn't work. The only code I have in my CodePen example is <input type="checkbox">
Would love to hear any suggestions.
This happens because of styling issues, and appears differently on different browsers. So try fixing the styling of the checkbox element and it's parent element, add some or all of these styles:
#parent-element { /*Or Whatever The ID Of The Parent Element Is*/
line-height: 20px;
height: 20px;
display: block
}
#checkbox-element { /*Or Whatever The ID Of The Checkbox Element Is*/
display: block;
height: 20px
}
Try changing the styles of the elements with different values to suit your needs.
Related
The HTML page shown below has four "buttons". Two of them are real button tags, but two are actually anchors (I deliberately left the underlining in their style so you can tell them apart). The goal was to style them using a btn class in a way that they look the same and align next to each other in a "button bar". But when you load the page in a browser, you will notice two differences between the buttons and the anchors - the buttons have a vertical offset, and their content is centered vertically. However, they use the same style class, and even when I compared the computed styles with browser developer tools, I could find no difference.
So why does this happen? I already found that not setting overflow and the height and instead adjusting it via padding and font-size can be used as a workaround. So it seems to have something to do with setting the height. But why do you get such an effect when you set it? And changing the overflow property strangely reverses the offset effect. I considered it might have to do with the box-sizing property which seems to be different for anchors and buttons, and could cause the height to be interpreted differently - but since there are no paddings and margins, it should not make a difference, it would also not alter the offset, and setting the box-sizing property manually for the class did not change the effect either.
Again, I'm not primiarly looking for a fix here, much less a discussion whether it's a good idea to style buttons and anchors the same, but I'm interested in a solid explanation of this CSS phenomenon. Is it a browser quirk with styling buttons? But then why do all the browsers (Firefox, Chrome, IE) show the same effect? Or did I overlook something obvious?
<!DOCTYPE html>
<html><head>
<style>
.btn {
margin: 0;
padding: 0;
overflow: hidden;
border: none;
outline: none;
background-color: grey;
color: white;
height: 2em;
width: 10em;
font-size: 20px;
font-family: sans-serif;
display: inline-block;
text-align: center;
}
</style>
</head><body>
<button type="submit" class="btn">
Button
</button><a href="#" class="btn">
Button
</a><button type="button" class="btn">
Button
</button><a href="#" class="btn">
Button
</a>
</body></html>
Since a button that has not been styled looks different than an anchor that hasn't been styled, if you apply the same style to both, there will be a difference. I think the only solution is to just apply different classes to the buttons, and to the anchors.
Ok, I think I found the answer myself:
I noticed that after adding vertical-align: middle; and line-height: 2em; to the btn class, the links and anchors will look exactly the same. You can then also remove the overflow: hidden.
The default values for these properties are vertical-align: baseline; and line-height: normal; - when you add these properties, the differences are still visible.
So I guess the deeper reason for this puzzle is a flaw in my underlying assumption that if the computed style properties, as shown in the developer tools, are the same, then two elements should also look the same. However, obviously there are settings with values like vertical-align: baseline; and line-height: normal; which do not have unambiguous meanings, instead they can have different meanings for different kinds of tags: E.g., where the baseline is and what a "normal" line height is, is defined differently for button and anchor tags.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
While assembling a site, I discovered that it's quite complicated to get buttons work with other elements, so that all elements look all the same.
That happens for example in a menu, where some buttons are real buttons, while other are just HTML links to other pages. Other example may be a form, where buttons are expected to be as large as other inputs.
Please see my jsFiddle to understand what I'm talking about. In the example, I want button to look like other elements!
Some code since SO requests it:
HTML:
Both elements shole be of the same size
<div id="menulike">
<button>DO SOMETHING</button>
GO TO SOMETHING
</div>
CSS:
div#menulike button, div#menulike a {
/*reset some default styles*/
border-style: none;
border-width: 0px;
text-decoration: none;
/*Inline or inline-block*/
display: inline;
display: inline-block;
/*colors and stuff*/
color: white;
font-weight: bold;
background: black;
/*This is important - size is expected to be the same*/
padding: 3px;
margin: 1px;
width: 220px;
font-size: 12pt;
text-align: center;
}
Why does this happen?
The reason your elements do not look the same when applying the same styling is due to default styling applied on elements. This is due to the elements being different. The differences may also be different depending on the browser.
How do you fix this?
You simply need to override all the properties that are different between elements. A lot of the differences between browsers can be solved with CSS resets.
Why isn't my example working?
Regarding your particular issue, the button has different width because you are not overriding all of the button's CSS properties. Try adding the following to your text inputs:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
This should give them all the same width. Alternatively, you can give your button box-sizing: content-box, which is the default for most elements.
As for the difference between the button and link, all I can see is the cursor icon when you hover over them. This can be changed with the cursor property:
cursor: default;
Edit:
I just noticed the second example has different heights for the button and link in Firefox (I was using Chrome before, which didn't show it). I believe this is combination of both height and box-sizing. Setting both to the same value for the elements should give them the same size.
I'm only guessing, but I think the reason height is needed in this case is because the font is treated differently between buttons and links in FF. Since no height was set, the fonts took up different amounts of space in the two elements, even if it was the same font with same font size.
I'm not sure, but the form elements (buttons, select, radio buttons) are provided by the browser. Each browser/OS have an way to show it. So I think you need to write a separated css block for it.
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 a simple <input type="text"/> styled with the following:
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
However, we arrive at Firefox, and this happens:
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.
Note:
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
Here's a JSFiddle, with the exact problem I'm describing:
http://jsfiddle.net/xxepX/
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
This helped me in a similar case:
input.with-fancy-styling {
box-sizing: content-box;
}
I had this problem also, and wanted to share my fix.
First, be sure you have the proper doctype declaration, like so:
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
I inspected and found this style on the .form-control class:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
or see the live demo:-
http://jsfiddle.net/xxepX/2/
UPDATED
please check your updated css i have added line-height & height in your css and removed the padding.
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
With css you should not use padding for an input box, for indentation use text-indent instead.