Web page is not centered on IE7

I have a simple web page which doesn't appear centered on IE7, but it appears on Firefox and on other versions of FIrefox.

The webpage is not public so I'm attaching the code. This is the HTML:

<!DOCTYPE html>
<html>
<head>
<title>Consulta Curs Clínic</title>
<meta charset="ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="all" href="css/estils.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script>
function tconfig(){
	$("#dades_connexio").toggle();
}

$( document ).ready(function() {
	$("#config_icon").click(tconfig);
});
</script>
<script>
function pantalla_completa (pagina)
{
var opciones=("toolbar=no,location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, fullscreen=yes");
window.open(pagina,"",opciones);
if(window.opener)window.close();
}

</script></head>

<body>
<div id="wrap">
	<div id="content">
		<div id="header">
			<h1><br />Consulta Curs Clínic</h1>
<!--			<h2>des de les &Agrave;rees B&agrave;siques de l'ICS</h2> -->
		</div>

		
<div id="login_title">
	<h2>Login</h2>
</div>


	<div id="login" class="box">
	<form action="#" method="post">
			<div class="wrap_input">
				<label for="usuari">Usuari:</label>
				<input type="text" id="usuari" name="usuari" />
			</div>
			<div class="wrap_input">
				<label for="contrasenya">Contrasenya:</label>
				<input type="password" id="contrasenya" name="contrasenya" />
			</div>
			<input id="btnSubmit" type="submit" value="ENTRAR" />
		</form>
	</div>
	<script>
	<!--
		document.getElementById('usuari').focus();
		
	// -->
	</script>
<!--  
<div id="footer">
	(c) 2013 - Pius Hospital de Valls.
</div>
 -->
</div><!-- end #content -->
</div><!-- end #wrap -->
</body>
</html>

Open in new window


and this is the CSS code of estils.css file:
body { font-size:12px; font-family:Verdana, Arial, sans-serif; margin:0; padding:0; }
#config_icon { float:right; margin:0; padding:0; }
#tancar_finestra { float:right; margin:0; paddint:0; }
#dades_connexio { position:absolute; right:20px; top:30px; display:none; width: 280px; margin: 0 10px 0 0; }
h1, h2, h3, h4, h5, h6, p, form, select, input, ul, li {margin:0; padding:0;}
#wrap { width:950px; margin: 0 auto 0 auto; }
#top {width:100%; margin: 0; padding:0; }
#header { width: 950px; height:80px; padding-top:7px; margin:0px; display:block; background:url('../images/h1.jpg') 0px 0px no-repeat; border-bottom: 2px solid #888888; border-top: 4px solid #AACCFF; }
#header h1 {text-align:center; color:#000000; font-size:24x; font-weight:bold; position:relative; left:-30px; }
#connection_box { float:right; width:200px; background-color:#EEEEEE; border-bottom:1px solid #888888; border-top:1px solid #888888; padding: 5px 15px; }
#content { clear:both; float:left; width: 950px; margin-top:5px;}
a {color:#EC7861; font-weight:bold; text-decoration:underline;}
a:hover {color:#AACCFF; text-decoration:none;}
#content h2 { height:30px; line-height:30px; margin:0; color:#6178EC; font-size:18px; font-weight:bold; } 
#header h2 {text-align:center; color:#666666; font-size:18px; width:53em; }
#login_title { margin: 0 0 0 240px; }
#form_title { margin: 0 0 0 240px; }
.box { padding: 5px 30px; background-color:#EEEEEE; border-bottom:2px solid #888888; border-top: 4px solid #AACCFF;}
.box h2 { padding: 0 0 10px 10px; }
/* Ombra de les caixes */
#content .box {
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}
#login { width:400px; margin: 0 auto 0 auto; background:#EEEEEE url('../images/login.png') no-repeat right bottom; }
#login form { /*position:relative; margin-left:-500px; padding-left:500px; height:120px; background:url('../images/form.jpg') 0px 0px no-repeat;*/}
#login input { border:1px solid #999999;}
#login #btnSubmit { margin: 15px 0 0 0; color:#000000; background-color:#AACCFF; font-weight:bold; cursor:pointer;}

.wrap_input label { display: block; font-size:12px; margin-top:5px; font-weight:bold; }
.wrap_input label#lcip {display: inline; }
#footer { position: fixed; bottom:0; left:0; width:100%; height:20px; line-height:20px; text-align: center; background:url('../images/footer.jpg') 0px 0px repeat-x; border-top: 1px solid #aaaaaa; margin:0 auto 0 auto; }
/*.error { margin: 0 0 0 346px; color: #ff0000; font:bold 14px "Trebuchet MS"; padding:10px 20px 10px 20px; border:1px solid #ff0000; background-color:#ffffbb; position: absolute; top:150px; }
*/
.error { clear:both; color: #ff0000; font:bold 14px "Trebuchet MS"; text-align:center; padding:10px 20px 10px 20px; border:1px solid #ff0000; background-color:#ffffbb; }
#error_cip {display:none; }
#pacient_box { float: left; margin: 5px 0 5px 0; width: 330px; height: 240px; }
#pacient_box p#pcip { text-align: center; }
#pacient_box #CIP { width: 120px; }
#pacient_box #btn_RCA { width: 130px; }
#dades_pacient th { text-align:right;  }
#filtre_box { float: left; margin: 5px 0 5px 20px; display: none; width:470px; height: 240px; }
#filtre_box form {margin-top:0; }
.col1 { float: left; margin: 0 5px 12px 5px; }
.col1 #p_consultar { text-align:center; }
.col2 #btnConsultar { margin:5px 0 0 0; }
.col2 { float: right; margin: 0 0 0 15px; }
#pas3_4 { clear:both; }
#pas3_4 p#espera_forats { text-align:center; padding-top:30px; font-size: 1.5em; }
#pas3 { float:left; width: 350px; margin:0px 0px 5px 0; padding:5px 20px; height: 460px; }
#llista_espera { margin:5px 0 0 0; padding:8px; }
#plespera { margin: 15px 0 15px 0; text-align:center;  }
#pas4 { float:left; width: 500px; margin:0px 0px 5px 20px; padding:5px 20px; height: 460px; }
.clear { clear:both; }

.boto_blau { border-radius:8px; border: #000077 1px solid; font-family: Verdana; font-size: 14px; background-color: #AAAAFF; font-weight: bold; padding:5px;
    -moz-box-shadow: 3px 3px 0px 0px #000044;
    -webkit-box-shadow: 3px 3px 0px 0px #000044;
    box-shadow: 3px 3px 0px 0px #000044;
    transition: all 0.10s ease-in-out;
    -webkit-transition: all 0.10s ease-in-out;
}
.boto_blau:active{
    /*Gracias a que el elemento está en posición relativa, podemos bajarlo 4 px sin alterar el HTML*/
    top:4px;
    /*bajamos el tamaño de la sombra para conseguir el efecto de profundidad*/
    -moz-box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
    -webkit-box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
    box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
}
.boto_blau:hover{
    cursor: pointer;
    background-color: rgb(172, 213, 252);
}

p.p_dia_sel { margin-bottom: 15px; font: 15px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
span.val_dia_sel{ font-weight:bold;}

#activitat_pendent {clear:both; width: 890px; margin: 8px auto 5px auto; display:none; }
.no_activitat { text-align:center; padding:15px; }
.no-bold { font-weight: normal; }

div#tabs-1 { padding-top:0; }
div#tabs-2 { padding-top:0; }

.ui-dropdownchecklist-item input { display: inline !important; }
.ui-dropdownchecklist-item label { display: inline !important; }

#p_consultar { margin-top: 30px; text-align:center; }

Open in new window


Many thanks.
LVL 15
gplanaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
When I copy that code this bit is in unicode
<!DOCTYPE html>

Apart from that it works fine for me (but why oh why are you using IE7)
0
gplanaAuthor Commented:
This is an internal application but it is used from some different institutions, and they could not have Internet Explorer upgraded.

What do you mean "this bit is in unicode" ? Is it a charset issue, then? How can I solve it?
0
GaryCommented:
Delete that line and retype it in notepad or similar.
If it cannot read the doctype then the browser will go into quirks mode.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

gplanaAuthor Commented:
You are right. I have opened the file on notepad++ and use an option to convert file from UTF-8 to ANSI/ISO-8859-1, and now it appears centered on IE. However, not the word "Clínic" (and also any non-english character) doesn't appear well, despite it appears well when I edit it on notepad++. Why?
0
GaryCommented:
In Notepad change the encoding to UTF-8 without BOM

Add a meta tag for UTF8

<meta charset="UTF-8">

Consulta Curs Clínic looks fine to me.
0
gplanaAuthor Commented:
Absolutely right. Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.