homepage Welcome to WebmasterWorld Guest from 54.198.33.96
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Which Browser is correct?
think I've created a monster.
appi2




msg:3682042
 2:01 am on Jun 24, 2008 (gmt 0)

OK this looks the same in FF2 and FF3,
different in IE6 & IE7
different in Opera 1.5
different in Safari 3.1 but same as konqueror 3.59 release 51.2

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>

 

penders




msg:3682223
 9:25 am on Jun 24, 2008 (gmt 0)

I get very similar output in the following browsers... IE6, FF2, Op9.5 and Safari 3.1, providing the page is actually saved as UTF-8, as indicated by your meta tag.

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?

appi2




msg:3682549
 4:54 pm on Jun 24, 2008 (gmt 0)

Looks like you described

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.

penders




msg:3682768
 10:04 pm on Jun 24, 2008 (gmt 0)

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?

appi2




msg:3682806
 11:26 pm on Jun 24, 2008 (gmt 0)

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.

Yeah, played with the height of the A tag. That helps, but its more the line-height in IE. Set it to 460px and you get to see all the letters.

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved