I have a problem in IE where my text is going really large and I'm not sure how to fix it. (It's even doing it in IE8 which I found weird as doing other sites that normally behaves in the same way all other browsers do and not like previous versions of IE)

 

Here is a link to the site www.jasongold.org/5-a-side

 

My CSS

* { margin: 0; padding: 0; }
body {
font: 62.5% "Lucida Grande", sans-serif;
background: url(background.jpg);
height:645px;
width: 100%;
}

#page-wrap {
margin: 0 auto;
height: 670px;
width:760px;
background: url(5-a-side-bg.gif);
}

h1, h2, h3, h4, h5, h6 {color:#000; margin:0; padding:0; font:arial;}
h1 {font-size:2.6em;
color: #fff;
}
h2 {font-size:2.5em}
h3 {font-size:2.3em}
h4 {font-size:2.2em}
h5 {font-size: 1.7em;
color: #fff;
}
h2 {
font-size:2em;
font-style: italic;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
p {margin:1em 0; padding:0}
ul, ol, dl {margin:1em 0; padding:0; list-style:none}


#header {
position: relative;
width:405px;
height:200px;
background: url(title1.jpg) no-repeat;
float: left;
}

#login {
position: relative;
width:305px;
height:113px;
background: url(login1.jpg) no-repeat;
float: right;
margin-top: 20px;
}

.login-user {
padding-left: 130px;
padding-top:20px;
color: #fff;
font-size:1.4em;
}
.login-pass {
padding-left: 130px;
padding-top:14px;
color: #fff;
font-size:1.4em;
}
#content {
margin-left: 45px;
position: relative;
background-position: center;
width: 649px;
float: left;
background: url(content.jpg) top center;
height: 430px;
}

.header-text-top-left {
width: 250px;
padding-left: 40px;
padding-top: 30px;
}

.text-top-left {
height: 150px;
width: 280px;
padding-left: 30px;
padding-top: 10px;
font: arial;
font-size: 1.4em;
}

.header-text-bottom-left {
width: 250px;
padding-left: 40px;
padding-top: 10px;
}

.text-bottom-left {
height: 100px;
width: 280px;
padding-left: 30px;
padding-top: 10px;
font: arial;
font-size: 1.4em;
}

.header-text-top-right {
width: 220px;
float: right;
padding-top: 30px;
margin-right: 75px;
}
.text-top-right {
height: 150px;
width: 280px;
padding-right: 30px;
padding-top: 10px;
font: arial;
font-size: 1.4em;
float: right;

}

.who-can-play {
background: url(list.jpg)no-repeat;
float: right; 
width: 242px;
height: 212px;
padding-right: 50px;
}

.who-can-play-players {
width: 116px;
padding-top:10px;
padding-left:30px;
margin-top: 10px;
font-size: 1.4em;
}

.who-can-play-players-right {
width: 96px;
padding-top:10px;
padding-left:50px;
margin-top: 10px;
font-size: 1.4em;
float: right;
}

 

My html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>5 A Side</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style-footie.css" />
</head>
<body>
	<div id="page-wrap">
	<div id="header"></div>
	<div id="login">
       <div class="login-user">Username</div>
       <div class="login-pass">Password</div>
       </div>
	<div id="content">
	<div class="header-text-top-right"><h5>Who Can Play</h5></div>
	<div class="header-text-top-left"><h5>Football Monday Night<h5></div>
	<div class="text-top-right">Ut in dolor lorem, et ultrices lectus. Sed nulla mi, molestie et eleifend eu, dictum at ipsum. Quisque vestibulum aliquet est, at iaculis tortor euismod et. Donec consectetur condimentum felis, in dictum lorem gravida sed. Aenean non mi quam. Mauris sodales semper mauris, vitae</div>
	<div class="text-top-left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
	<div class="who-can-play">
	<div class="who-can-play-players-right">player 6</div>
	<div class="who-can-play-players-right">player 7</div>
	<div class="who-can-play-players-right">player 8</div>
	<div class="who-can-play-players-right">player 9</div>
	<div class="who-can-play-players-right">player 10</div>
	<div class="who-can-play-players">player 1</div>
	<div class="who-can-play-players">player 2</div>
	<div class="who-can-play-players">player 3</div>
	<div class="who-can-play-players">player 4</div>
	<div class="who-can-play-players">player 5</div>

	</div>
	<div class="header-text-bottom-left"><h5>News<h5></div>
	<div class="text-bottom-left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</div>
</div>
</body>
</html>

 

Thanks for any help.

In your CSS you have

 

font: 62.5% "Lucida Grande", sans-serif;

 

Doing it in % is foolish. Try using

 

font: 10px or whatever.

For ultimate control, use pixels or EMs as your font size, I wouldn't use Percentages as they can be thrown out by IE in so many ways

In your CSS you have

 

font: 62.5% "Lucida Grande", sans-serif;

 

Doing it in % is foolish. Try using

 

font: 10px or whatever.

 

That's really controversial, I've been told by so many times that using % is better because in IE using pixels doesn't resize it correctly if someone wants to resize the text. Out of interest how experienced are you?

62.5% may be the problem but it's a common way of coding font size. It relates the font size to the browser default size so it needs to be used correctly.

 

A common reset is:-

 

body { height: 100%; font: 62.5%/1.3 "Times New Roman", Times, serif; }

 

*62.5% makes 1em = 10px as normal browser default is 16px so 16px * 62.5% = 10px; When 1em equals 10px it then becomes easy to judge the height in px of other percentage increases for h tags, etc.

 

1.3 is line height (130% of normal)

Try closing your <h5> tags properly as well using </h5> Stupid things like that when using strict doctype always seem to cause problems.

 

Oh n btw, I use the 62.5% method and then size in ems as you have and I never have any problems in any browsers.

Try closing your <h5> tags properly as well using </h5> Stupid things like that when using strict doctype always seem to cause problems.

 

Oh n btw, I use the 62.5% method and then size in ems as you have and I never have any problems in any browsers.

 

Yeah I thought of that and then thought no it couldn't be that it must be the CSS but if you've never had any problems with it then it could be that. How do I close my heading tags properly as that's the only way I know how to close them.

<h5>Football 
Monday Night</h5>

<h5>News</h5>

 

You did it right with the first one <h5>Who Can Play</h5>

 

Not closing them properly meant that the h5 font size continues for the following text in IE but Firefox was a bit cleverer.

 

It had nothing to do with the 62.5% font size (which is useful for people with bad eyesight to enable them to set a browser setting for a larger font size and see all text increased in the correct proportions, like using ems).

<h5>Football 
Monday Night</h5>

<h5>News</h5>

 

You did it right with the first one <h5>Who Can Play</h5>

 

Not closing them properly meant that the h5 font size continues for the following text in IE but Firefox was a bit cleverer.

 

It had nothing to do with the 62.5% font size (which is useful for people with bad eyesight to enable them to set a browser setting for a larger font size and see all text increased in the correct proportions, like using ems).

 

Sorry that was such a stupid mistake, i assumed they were all closed like the first one that's why I said I don't know another way how to close it lol. All the text comes up ok now in IE.