Web page is not centered on IE7

Posted on 2014-08-27
Last Modified: 2014-08-27
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>
<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=""></script>
<link rel="stylesheet" href="" />
<script src=""></script>

function tconfig(){

$( document ).ready(function() {
function pantalla_completa (pagina)
var opciones=("toolbar=no,location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, fullscreen=yes");,"",opciones);


<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 id="login_title">

	<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 class="wrap_input">
				<label for="contrasenya">Contrasenya:</label>
				<input type="password" id="contrasenya" name="contrasenya" />
			<input id="btnSubmit" type="submit" value="ENTRAR" />
	// -->
<div id="footer">
	(c) 2013 - Pius Hospital de Valls.
</div><!-- end #content -->
</div><!-- end #wrap -->

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;
    /*Gracias a que el elemento está en posición relativa, podemos bajarlo 4 px sin alterar el HTML*/
    /*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);
    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.
Question by:gplana
    LVL 58

    Expert Comment

    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)
    LVL 15

    Author Comment

    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?
    LVL 58

    Accepted Solution

    Delete that line and retype it in notepad or similar.
    If it cannot read the doctype then the browser will go into quirks mode.
    LVL 15

    Author Comment

    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?
    LVL 58

    Expert Comment

    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.
    LVL 15

    Author Closing Comment

    Absolutely right. Thank you.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now