Forum Moderators: not2easy
everything was fine until i checked my page in IE. the content doesen't scroll in IE, in Firefox works fine.
Please tell me what i'm doing wrong. Here's the code to one of my pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head>
<title>Title</title>
<meta name="description" content="...">
<meta name="keywords" content="...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="http://www.divinedesign.ro/dd.ico" type="image/dd.icon">
<link rel="icon" href="http://www.divinedesign.ro/dd.ico" type="image/dd.icon">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-color: #202020;
background-image: url(images/bg5.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#outer {height: 100%; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#outer {width: 100%;}
#inner {width: 100%; margin-left: auto; margin-right: auto;}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 160px;
top: 777px;
}
.style5 {color: #000000}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<div id="outer">
<div id="middle">
<div id="inner">
<body onLoad="MM_preloadImages('images/despre_on.gif','images/webdesign_on.gif','images/webhosting_on.gif','images/optimizare_on.gif','images/portofoliu_on.gif','images/contact_on.gif')"><div align="center">
<table width="890" border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3" scope="col"><img src="images/divinedesign_top.gif" alt="divine design" width="890" height="166" /></th>
</tr>
<tr>
<th colspan="3" scope="row"><a href="http://www.divinedesign.ro/despre.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('despre','','images/despre_on.gif',1)"><img src="images/despre.gif" alt="Firma Divine Design Srl" name="despre" width="140" height="40" border="0"></a><a href="http://www.divinedesign.ro/webdesign.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('webdesign','','images/webdesign_on.gif',1)"><img src="images/webdesign.gif" alt="Servicii Web Design" name="webdesign" width="115" height="40" border="0"></a><a href="http://www.divinedesign.ro/webhosting.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('webhosting','','images/webhosting_on.gif',1)"><img src="images/webhosting.gif" alt="Servicii Gazduire" name="webhosting" width="126" height="40" border="0"></a><a href="http://www.divinedesign.ro/seo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('seo','','images/optimizare_on.gif',1)"><img src="images/optimizare.gif" alt="Optimizare SEO" name="seo" width="143" height="40" border="0"></a><a href="http://www.divinedesign.ro/portofoliu.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portofoliu','','images/portofoliu_on.gif',1)"><img src="images/portofoliu.gif" alt="Portofoliu Web Design" name="portofoliu" width="104" height="40" border="0"></a><a href="http://www.divinedesign.ro/contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_on.gif',1)"><img src="images/contact.gif" alt="Contact Divine Design" name="contact" width="110" height="40" border="0"></a></th>
</tr>
<tr>
<th width="84" height="450" class="ml" scope="row"></th>
<th class="arial10" scope="row"><blockquote>
<div>
<p class="lgt"><br><br><br></p>
<p class="greym">DESPRE NOI:</p><br>
<p class="style3">description</p>
</div>
</blockquote></th>
<th width="85" class="mr" scope="row"></th>
</tr>
<tr>
<th colspan="4" height="8" class="md" scope="row"></th>
</tr>
<tr>
<th rowspan="3" scope="row"></th>
<th width="721" bgcolor="#000000" scope="row"><span class="grey">Copyright ©
2008 <a href="http://www.divinedesign.ro" class="grey2">Divine Design</a></span><span class="point">••• <a href="http://www.divinedesign.ro/home.html" class="brown">Varianta Flash</a> ••• <a href="http://www.divinedesign.ro/sitemap.html" class="brown">Site Map</a></span></th>
<th rowspan="3" scope="row"></th>
</tr>
<tr>
<th colspan="1" height="12" class="bg2" scope="row"></th>
</tr>
<tr>
<th class="wd" scope="row"><strong>¦ servicii web profesionale ¦ web design ¦ web hosting ¦ promovare online ¦</strong></th>
</tr>
</table></div></body>
</div></div></div>
thanx in advance
First off - IE is actually correctly displaying your code. In your CSS - you have 'overflow:hidden' for #outer - who's height is set to 100%. That means that the height is set to whatever the height for the browser is (minus space for all of the toolbars and scroll bars, etc). With 'overflow:hidden' - your telling it to not display anything beyond that height. Removing this makes IE work.
Second off, you have 3 divs on the OUTSIDE of your body tag... that's just wrong... All of your tags that make up the content of your page need to go INSIDE of your body tag.
Thirdly - don't use TH for a layout table. Use TD.
Ryan
my style code for the center aligment now looks like this:
#outer {height: 100%; width: 100%; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#inner {width: 100%; margin-left: auto; margin-right: auto;}
It fixed the first problem, but now IE is scrolling a little bit to much down, and if the browser window is smaller then the content... it begins showing with the middle, not the top (like in mozilla).
I tried different values (middle & inner for explorer), so far the 10% and -6% are the best.
If you have a solution for perfect fix, please let me know.
oooh, and I changed the th with td...thanx very much for the tip. I use Dreamweaver and the code is generate automatically. And I put the 3 div's inside the body, but now it show me this:
ps: excuse my english if I write bad...I'm from Romania
#outer {height: 100%; width: 100%; position: absolute; top:0px; left:0px;}
#outer[id] {display: table; position: static;}
#middle {position: relative; margin:auto;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {width: 100%;}
I don't have the images - but it seems to look the same in both IE7 and FF2.
I looked at the image (which you shouldn't do - you should post the error in your post). It seems that you have an extra or an incorrectly placed div tag. First - make sure all of your </div> tags come BEFORE the </body> tag. Second - count how many <div>s you have and how many </div>s you have. I was looking through my copy of your code and you had an extra one in there - which is probably why your getting the error.
See if that works and if you have any additional problems let me know
Ryan
1)Add an img tag (with no src) to the #middle div - and make sure its the first item. Give the img a class of "valigner"
2)Add the following code to your CSS:
.valigner
{
visibility:hidden;
width:0px;
height: 100%;
vertical-align:middle;
}
It's a very simple solution I developed - see if it works for you.
EDIT: I was trying this with your code and it would take a bit of tweeking so don't use it yet - I'll try to work it out if your interested. It has trouble aligning divs (and probably other block-level elements) - but its great for inline aligning.
[edited by: csuguy at 12:34 pm (utc) on Aug. 21, 2008]
I changed the CSS also, works fine in mozilla, but in IE the content stays on top like no css was there. Maybe it works with IE7, i have ie6 btw...and Mozilla 3.0.1.
Thanx a lot for your replies and interes to help me
