I have some text on top of an image.
In new browsers it's working fine.
But when I check in IE7, it looks like this:
Somehow, IE7 is very keen, on giving the background color a width of a 100%.
And I don't wanne fix it, by setting a width, since the length of the text will vary from page to page.
My CSS looks like this:
#sub-slideshow-wrapper h2 {
font-family: 'Droid Sans',sans-serif;
display: table;
font-size: 20px;
font-weight: 900;
color: #000;
background: #e68e47;
background: rgba(230,142,71,0.8);
padding: 7px;
margin: 0 0 3px 0;
}
And I know that IE7 is outdated, and that only 1.xxx is usnig it. But my is expection it to work on all browsers, even old ones.
If you must support IE7 add zoom:1 and *display:inline (star hack to target IE6 & 7) to make IE 7 display them as if they were inline-block. However this may have other effects you do not want.
#sub-slideshow-wrapper h2 {
font-family: 'Droid Sans',sans-serif;
zoom: 1; /* added */
*display: inline; /* added */
display: table;
font-size: 20px;
font-weight: 900;
color: #000;
background: #e68e47;
background: rgba(230,142,71,0.8);
padding: 7px;
margin: 0 0 3px 0;
}
As you can see here, IE7 does not support display:table so your h2 is rendered with display:block (the standard display for h2), causing your problem.
As the global usage of IE7 is about 0.1%, I suggest you just leave it as it is.
Related
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
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 was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
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";