I have a problem with positioning a text with an image using CSS. It works good in Firefox and IE but not in Safari. The image is placed left of the text and I want the text to be in the center of the image in vertical positioning. I'm using a custom font (MyriadProLight), using font-face.
This is how it looks in Safari: http://oi52.tinypic.com/2eg5p8x.jpg
This is how I want it (and how it looks in Firefox and IE): http://oi54.tinypic.com/1zg3xhx.jpg
HTML:
<!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>
<title>Title</title>
<style>
@font-face {
font-family: 'MyriadProLight';
src: url('myriadpro-light-webfont.eot');
src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-size: 20pt;
font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
color: #333;
text-transform:uppercase;
line-height: 21pt;
font-weight: normal;
letter-spacing: 0px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.iconimage
{
margin-right: 7px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1><img class="iconimage" src="image.png" />This is the header</h1>
</body>
</html>