I have constructed a frameset which is meant to center a webpage in the middle of the browser window.
<html>
<frameset rows="100%,567px,100%" border="0">
<frame src="blank.html" noresize="noresize" scrolling="yes">
<frameset cols="100%,1128px,100%" border="0">
<frame src="blank.html" noresize="noresize">
<frame src="webpage.html" noresize="noresize">
<frame src="blank.html" noresize="noresize">
</frameset>
<frame src="blank.html" noresize="noresize" scrolling="yes">
<noframes>
<body>Page requires a frame-supporting browser.</body>
</noframes>
</frameset>
</html>
Blank is an empty html document. This works brilliantly in both Firefox and IE6, but in IE8 it simply shows a white page, namely the blank.html. Why is it not showing the same as in Firefox?
EDIT: This could evidently not be solved without my code, so here it is, with doctype and html tags and a few other bits excluded. I've tried your solution, but it still doesn't center vertically.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(xxxbackground.gif);
}
#divInteraction {
position:absolute;
width:640px;
height:480px;
z-index:1;
left: 460px;
top: 47px;
overflow: hidden;
}
#divVideo {
position:absolute;
width:424px;
height:284px;
z-index:2;
left: 13px;
top: 101px;
overflow: visible;
}
#imgInteraction {
}
#iframeInteraction {
display: none;
}
-->
</style>
</head>
<body>
<div id="divInteraction">
<iframe id="iframeInteraction" width="100%" height="100%" ></iframe>
<img id="imgInteraction" src="powerpoint_pic_0.jpg" />
</div>
<div id="divVideo">
<object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="" type="application/x-ms-wmp" VIEWASTEXT>
<param name="AutoSize" value="false" />
<param name="ShowStatusBar" value="0" />
<param name="DefaultFrame" value="x" />
<param name="ShowControls" value="1" />
<param name="ShowAudioControls" value="1" />
<param name="ShowPositionControls" value="0" />
<param name="ShowTracker" value="1" />
<param name="ShowDisplay" value="0" />
<param name="ShowCaptioning" value="0" />
<param name="ShowGoToBar" value="0" />
<param name="ControlType" value="2" />
<param name="Autostart" value="1" />
<param name="InvokeUrls" value="1" />
<param name="AnimationAtStart" value="0" />
<param name="TransparentAtStart" value="0" />
<param name="SendStateChangeEv" value="1" />
<param name="SendOpenChangeEv" value="1" />
<param name="SendPlayChangeEv" value="1" />
<param name="AllowChangeCtrlType" value="1" />
<param name="AllowChangeDisplaySize" value="1" />
<param name="AllowScan" value="1" />
<param name="AutoRewind" value="1" />
<param name="PlayCount" value="1" />
<param name="Volume" value="0" />
<param name="Filename" value="http://www.example.com/example/example.wmv"/>
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"
name="Player1NS"
AutoSize="false"
ShowStatusBar="0"
DefaultFrame="x"
ShowControls="1"
ShowTracker="1"
ShowDisplay="0"
ShowCaptioning="0"
ShowGoToBar="0"
Autostart="1"
AnimationAtStart="0"
TransparentAtStart="0"
PlayCount="1"
Volume="0"
Filename="http://www.example.com/example/example.wmv"
ShowAudioControls="1"
ShowPositionControls="0"
width="424"
height="284">
<br />
</embed>
</object>
</div>
</body>
</html>
No need for a frameset. The code below will center a div in the page.
The horizontal centering is done by setting the left and right margins to auto. The vertical centering is done by placing the top of the div 50% down the page, then use a negative top margin that is half the height of the div to move it up to the center.
You also need to specify the height of the html and body elements to 100%, otherwise they will only be as high as the content.
The div has position:relative which also takes care of your problem with absolutely positioned elements inside it. The div becomes a layer, which means that any absolutely positioned element inside it will use the top left corner of the div as zero point, not the page.
The border on the div is only to see where it is. You can remove that.
The code is tested in Firefox 3, IE 7, IE 8 beta and Opera 9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Center</title>
<style type="text/css">
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; }
.Content {
width: 1128px; height: 567px;
margin: -283px auto 0; position: relative; top: 50%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="Content">
</div>
</body>
</html>
Edit:
Here is the code with the contents and style pasted in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; background-image: url(xxxbackground.gif); }
.Content { width: 1128px; height: 567px; margin: -283px auto 0; position: relative; top: 50%; }
#divInteraction {
position:absolute;
width:640px;
height:480px;
z-index:1;
left: 460px;
top: 47px;
overflow: hidden;
}
#divVideo {
position:absolute;
width:424px;
height:284px;
z-index:2;
left: 13px;
top: 101px;
overflow: visible;
}
#imgInteraction {
}
#iframeInteraction {
display: none;
}
</style>
</head>
<body>
<div class="Content">
<div id="divInteraction">
<iframe id="iframeInteraction" width="100%" height="100%" ></iframe>
<img id="imgInteraction" src="powerpoint_pic_0.jpg" />
</div>
<div id="divVideo">
<object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby=""
type="application/x-ms-wmp" VIEWASTEXT>
<param name="AutoSize" value="false" />
<param name="ShowStatusBar" value="0" />
<param name="DefaultFrame" value="x" />
<param name="ShowControls" value="1" />
<param name="ShowAudioControls" value="1" />
<param name="ShowPositionControls" value="0" />
<param name="ShowTracker" value="1" />
<param name="ShowDisplay" value="0" />
<param name="ShowCaptioning" value="0" />
<param name="ShowGoToBar" value="0" />
<param name="ControlType" value="2" />
<param name="Autostart" value="1" />
<param name="InvokeUrls" value="1" />
<param name="AnimationAtStart" value="0" />
<param name="TransparentAtStart" value="0" />
<param name="SendStateChangeEv" value="1" />
<param name="SendOpenChangeEv" value="1" />
<param name="SendPlayChangeEv" value="1" />
<param name="AllowChangeCtrlType" value="1" />
<param name="AllowChangeDisplaySize" value="1" />
<param name="AllowScan" value="1" />
<param name="AutoRewind" value="1" />
<param name="PlayCount" value="1" />
<param name="Volume" value="0" />
<param name="Filename" value="http://www.xxx.com/xxx/xxx.wmv"/>
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"
name="Player1NS"
AutoSize="false"
ShowStatusBar="0"
DefaultFrame="x"
ShowControls="1"
ShowTracker="1"
ShowDisplay="0"
ShowCaptioning="0"
ShowGoToBar="0"
Autostart="1"
AnimationAtStart="0"
TransparentAtStart="0"
PlayCount="1"
Volume="0"
Filename="http://www.xxx.com/xxx/xxx.wmv"
ShowAudioControls="1"
ShowPositionControls="0"
width="424"
height="284">
<br />
</embed>
</object>
</div>
</div>
</body>
</html>