PDA

View Full Version : IE7 Rendering 'Issue'



scrappy
Jun 26th, 2009, 06:15 PM
IE7: http://titsfost.googlepages.com/wImage1.png
Firefox: http://titsfost.googlepages.com/wImage2.png

How can I get IE7 to show the same as Firefox? I've minimised down the code, validated it, and IE7 still refuses to show it properly.

Here's the code:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Woof</title>
<style type="text/css">
.box
{
border:4px solid black;
background:#EEE;
font-size:36px;
padding-left:5px;
padding-right:5px;
}
</style>
</head>
<body>
<span class="box">Woof</span>
</body>
</html>

udjamaflip
Jun 26th, 2009, 06:23 PM
either put
display:block; in your CSS or use
<div> instead of
<span>, that should do it.

hope that helps! :thumbsup:

scrappy
Jun 26th, 2009, 06:34 PM
Thanks. I preferred not to use display:block or div as I wanted the border just about the right size to fit the text in, although I suppose I could throw in a float:left in there too, and then throw the entire thing in another div for the container.

Why is IE so different to every other browser?

abduraooft
Jun 26th, 2009, 06:44 PM
Have a try by setting a line-height, say line-height:1.4;

scrappy
Jun 26th, 2009, 07:00 PM
I put in display:inline-block; which seemed to fix it, but setting the line height slightly bigger seems more natural for some reason.

1.2 shows just the top, 1.4 shows both top and bottom, so looks like the perfect value.

Thanks!