I've a single line of text written with Myriad Pro vertically centered to parent. In most browsers it renders fine, however in IE9&10 the text is not exactly centered, it shifted up by about 3 pixels from its correct position.
I've found out that the problem is caused by the font, the same case is rendered correctly with Arial. On the following image you can see the problem. Part of the text is selected and
it seems that the text is sticked to the top of the selection for some weird reason and the selection is vertically centered correctly.
Source:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
vertical-align:middle;
height:40px;
line-height:40px;
background-color:red;
font-family:"Myriad pro",arial;
}
</style>
</head>
<body>
<div>LOREM IPSUM</div>
</body>
</html>
Can you please explain me why this happens and how to fix it?
Thanks a lot.
I finally solved the problem using Adobe Typekit. Myriad Pro written with Typekit is correctly vertically centered.
But I still wonder why this happens.
Related
Help! This box is exactly the same size as the length of the text at 100% zoom on IE and Chrome. But, when viewed on my mobile phone, the box overhangs the length of the text. Is it possible to fix this?
<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>
<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>
Firstly, browsers will interpret font widths differently. Relying on the width of fonts is not ideal.
Instead, if you want the boxes to match the same width, wrap a <div> around them and set it.
<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>
A couple other problems with the code you posted.
You must put your embedded styles inside of the head tags.
You must never put anything before the <html> tag except <!doctype>
Never put <div>'s inside of a head. They only belong in the <body>
The <head> is used to initialize data. The <body> is used to display data.
The below is a much simplified version of the real HTML:
<html>
<head>
<style type="text/css">
h3 { background: blue; }
p {background:grey; }
</style>
</head>
<body>
<h3>The paragraph below will style correctly.</h3>
<p>
As you can see, I am stylish.</p>
<p>
<h3>But this paragraph goes wrong.</h3>
I am sad. I have no style.
</p>
</body>
</html>
Slap that in a browser (have tried Firefox 12 and IE9) and whilst the first paragraph gets a grey background, the second one has none. Note, it doesn't even have a blue background, the styling has been lost. It is my understanding that the background of the h3 should only affect the h3, not travel upward into the parent and affect that.
Have I missed something? Note the above is simplified. I want headers in my paragraphs, but this seems to be impossible without style errors. Is there a mistake in the above? Thanks.
It is not valid markup to have headers within a paragraph which is why the styling is getting screwed up.
You can validate your markup here: http://validator.w3.org/
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
This CSS problem is killing me :-(
I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm
I have reduced the problem to the bare minimum so its really clear.
You can see my issue here http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
*
{
padding:0;
margin:0;
font:15px arial;
}
div
{
display:inline;
height:18px;
line-height:18px;
background-color :blue;
}
.PageMove
{
display:inline-block;
background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
background-repeat:no-repeat;
width:18px;
height:18px;
line-height:18px;
}
.Text
{
background-color :red;
display:inline;
height:18px;
line-height:18px;
}
</style>
</head>
<body>
<div>18 pixels high</div>
</body>
</html>
Things which are display: inline-block are treated as as characters and sit on the baseline. There is space beneath for descenders (which you find on letters such as p, j, g and q).
Set vertical-align: bottom to position the element on the bottom instead of the baseline.
why not use float?
<div style="width: give-it-a-usefull-width">
...
...
</div>
I don't know where your problem is exactly stemmed from but
inline elements cannot be specified a 'height'. So your height:18px; for the 'inlined' div will be ignored.
I ran into this issue on some email templates. IE and FF did not show the blue line but emails opened on mobile devices such as iphone and android did.
Emails opened in web email clients over chrome browsers also showed the blue line.
I solved the problem by placing the image in the middle of the cell.
align="middle"
Set the cell to align="middle" as well.
(this places the blue line behind the image and solves the problem)
On irregular shaped images (that are png, or gif) you may want to consider saving the image with a background color or converting to a jpeg on white backgrounds. Again its not the type of image that solves this, just removing a clear background and creating a solid rectangle of square block of color to hide the line solves the issue.
Good luck!
Nate Boe
The following code demonstrates the issue I'm encountering:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
p
{
background-color:#FFF;
}
</style>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
<p><em>This is an italic sentence.</em></p>
<p><strong>This is a bold sentence.</strong></p>
<p>This is a normal sentence.</p>
</body>
</html>
When this code is viewed in IE7, the Google logo will be displayed to the left with 'white horizontal bars' running through it lined up with each paragraph, displayed on the right.
Removing the first line with the <em> tags causes the lines to disappear. Try it yourself. Remove each of the three lines and see how the bug changes.
What in the world is going on with this?
--
Resolution: hasLayout issue. Adding zoom: 1 attribute to em corrects the issue.
This is happening because of the floated image.
When an image is floated it technically does not have any layout of its own. The white bars are the <p> tags, since in CSS you gave them a background of #FFF.
For IE7 is thinks the <p> tags are actually starting at the start of the page on the far left, so it starts them there, but simply bumps the content past the floated image, leaving funny white bars overtop of the floated image.
I would try getting around it by giving your <p> tags left margin. If you make enough left margin to get past the image you shouldn't get those bars anymore.
So try something like...
p{ background-color: #fff; margin-left: 300px; }
You can adjust the left margin but something along those lines should get rid of the white bars for you.
Not sure why it's happening, but there are many ways of making sure it doesn't, including adding display: inline-block to the em.