Forum Moderators: not2easy
And by different I mean different between IE to Safari or Opera to FF etc.
So Which browser is the one that is displaying this correct?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font-family:"Times New Roman", Times, serif}
a {
display:block;
border:1px solid green;
background:#ccc;
font-size:160px;
line-height:160px;
}
a {
height:263px;
}
img {border:0;}
em { vertical-align:super;}
b { vertical-align:sub;}
</style>
</head>
<body>
<div><a href="#">B<em>Ú</em><b>g</b></a></div>
</body>
</html>
There seems to be slight differences in the font rendering between the browsers, but this is understandable. The position of the subscript varies noticeably between browsers, but it's still a subscript. IE6 underlines the different parts of the link (superscript, subscript...) separately, whereas the other browsers have a common underline.
What do you see?
between opera and firefox
In Opera the subscript g is lower by the height of the upper part of the g.No underline is shown.
between firefox and Safari
The superscript Ú is higher in safari and the underline also
IE7 you only see the upper part of the B and all of the Ú, the g is hidden compeletly and no underline.
IE6 Both the B & Ú show, The g just shows the top. The underline is not continous but beneath each letter, with the exception of the g, its at the top of the g.
Just tried making sure the page was saved UTF8, no difference.
Just tried making sure the page was saved UTF8, no difference.
I found that with the page saved simply as windows ASCII/ANSI then the Ú did not show in some browsers and IE6 really messed up, displaying /em> (part of the source) after the extended character!
IE7 you only see the upper part of the B and all of the Ú, the g is hidden compeletly and no underline.
I think the subscript is being pushed out of the <body> and the <body> is not extending to accommodate? Could try setting a height on the body or setting overflow? Just a thought.
I've not tried this in IE7. Is the underline the same as that for IE6, or is IE6 unique in this respect. The non-continous underline strikes me as a significant difference.
But I think we have to keep in mind that HTML/CSS is not intended for exact typographic layout. The browsers are entitled to render things slightly differently as there is no exact specification in this area. In this case I think the browsers are still just about within the bounds of reasonable interpretation. Or are they?
There might be other systems available, depending on your purpose, if you need more exact typographic layout?
I think the subscript is being pushed out of the <body> and the <body> is not extending to accommodate? Could try setting a height on the body or setting overflow? Just a thought.
I seem to remember you have to set the line-height independantly for the sub & super. Which should be fine in IE with condtional comments but opera to FF to safari erm...pass.
The Underline is separate for each letter in both IE6 and 7.
Not tried any fixes yet, shall have to have a play. It was more of a well thats a first, not one browser agrees!
