?
Solved

Web page is not centered on IE7

Posted on 2014-08-27
6
Medium Priority
?
134 Views
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>
<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.
0
Comment
Question by:gplana
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40288337
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
 
LVL 15

Author Comment

by:gplana
ID: 40288357
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40288363
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 15

Author Comment

by:gplana
ID: 40288388
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
 
LVL 58

Expert Comment

by:Gary
ID: 40288397
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
 
LVL 15

Author Closing Comment

by:gplana
ID: 40288404
Absolutely right. Thank you.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

621 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