On iOS 8, I'm overlaying a div with a textarea, with the same text and resetting every margin/padding values, but there's still an offset of 3px that I can't get rid of. It works great on Chrome and Safari desktop.
Here's a fiddle: http://jsfiddle.net/jfvz0ved/
textarea, div {
position: absolute;
top: 0;
left: 0;
font-size: 1.1em;
line-height: 1.6em;
font-family: Courrier;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
display: block;
text-align: left;
resize: none;
width: 100%;
color: black;
opacity: 0.4;
}
Any idea what property could cause this issue? I don't want to resort to a browser detection + special class if possible.
What happens when you apply a universal CSS reset?
If that fixes the problem, then one of the containing elements might need to be reset.
After quite a bit of research, it turns out iOS is adding a 3px padding and it can't (apparently) be removed. So the best way to go about it is to compensate for it. I've added a left: 3px on the div when iOS is detected. It's not ideal (I'd have loved to avoid that and have a CSS only solution), but it works.
Related
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding style.
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
Is it possible to achieve line-height consistency in all browsers?
I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.
It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?
I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.
.clearfix,
.container {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
margin: 0 0 0 0;
padding: 12px 0;
border-bottom: 1px dotted #E7E7E7;
}
li img {
float: left;
margin-top: 0;
}
li p {
margin: 0 0 0 58px;
padding: 0;
font-weight: normal;
border: none;
font-size: 1em;
line-height: 1.3em;
}
li p.name {
position: relative;
padding-top: 0;
font-size: 1.1em;
font-weight: bold;
}
<ul>
<li class="clearfix">
<img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb">
<p class="name">
Jessica Simpson
</p>
<p>Blurred out text here</p>
<p>Followers: 3197179</p>
</li>
</ul>
Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).
In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.
Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/
You can add line-height for Mozilla only, by using:
#-moz-document url-prefix() {
*, body {
line-height: [as per your requirement];
}
}
Have you specified any common rules? e.g:
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
line-height: 1;
}
Sometimes it's helpful, even without full reset.css approach.
It might be how the font is being rendered. Try using this as a font family.
font-family:"Arial Unicode MS","Lucida Sans Unicode";
I know this is something I'm probably doing wrong, so please don't incinerate me for the thread title.
I'm trying to put together a small personal website using HTML 5/CSS3. I've checked with the w3c validator and the site and CSS file fully conform according to the validator (However the validator has a warning attached that it might not be perfect).
I'm not sure how to explain it without a picture, so here's a comparison of Chrome/Opera/Firefox:
So, you can sorta see how in Chrome the background image is in one non-repeating piece, whereas in Opera/Firefox the image has, oddly, been broken up and placed slightly differently.
I'm confident this is due to an error on my part, but I've had no luck at all figuring out why the image is being mangled in Opera and Firefox.
Here's the CSS that's relevant to this issue:
/* Content Pane */
.content
{ position: absolute;
left: 220px;
width: 800px;
top: 80px;
min-height: 550px;
background-color: rgba(8,12,42,0.85);
}
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
padding-left: 28px;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
display: block;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 20px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 20px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
And the HTML:
<hgroup>
<h1>New Site!</h1>
<h3>Now with Bloom!</h3>
<h4> - Posted Tuesday, May 11th 2010</h4>
</hgroup>
Can anyone see what I'm doing wrong?
EDIT
I changed the CSS a bit, and it halfway-fixed the image (I don't understand why) and the bad alignments (I hadn't yet noticed those).
The changed CSS defs are as follows:
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
position: relative;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
position: relative;
left: 28px;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 48px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 48px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
Got it: You need to give hgroup display: block.
EDIT: Keep in mind that most browsers don't know the new HTML5 elements yet thus they are missing all default style.
You'll need to set the parent element of positioned child elements to relative to make the positioning work.
hgroup{
position: relative;
}
Your h1 needs a width and height, otherwise display: block is a little pointless imho.
These are the two things which jump out at me the most :)
Just took a look in Chrome and Firefox and they're both displaying the same as your error pic.
Take a look here: HTML5 browser support checklist, seems that Firefox and Opera don't support all HTML5 attribute yet, so invariably there will be some weird problems. The browsers don't know all the default styles of HTML5 elements yet, so more reason for strange errors. Can't think of any other fixes other than DavidYell's answer, eveything seems fine in the CSS.
The background image alignment CSS is not ready on all browsers.
It's as if you only had:
.content hgroup
{
background: url("Header_Flat.png") no-repeat;
etc.
Since hgroup has no set size your background image will float around when you're using different browsers at different zooms.
If you are able to set hgroup's size you can design your .png the size of hgroup, transparent and with the blue streaks aligned top left.
I am also looking forward to full CSS3 support in all browsers.
There are so many effects that look so cool in some browsers and then just look mangled in others. I personally prefer 1)Firefox 2)Safari