ansaurus

Question

Answer 1

+3 A:

Oh my!

You can achieve the exact same result with the following css in your webpage.html file:

body {
  width: 1128px;
  margin: auto;
  margin-top: 567px;
}

Please not that setting the margin-top to 567 pixel will only center your content for a specific screen resolution.

if IE is touchy on the body tag, you can embed the whole content of the body with a div:

    <body>
      <div id="content" >
         <-- YOUR CONTENT -->
      </div>
    <body>

Then use the following css:

html, body {
  width: 100%;
  text-align: center;
}

div#content {
  width: 1128px;
  margin: auto;
  margin-top: 567px;
  text-align: left;
}

And now apply all the css rules you had for the body to div#content.

EDIT: So I see the html code now.

You should try position:relative instead of absolute for your divs and see what happens with the last "solution" I submitted.

Also, remove all your previous margin settings in your body css rule and move the background image to the div#content rule.

... and let me know :P

Julian Aubourg 2009-03-15 16:21:42

Nope, doesn't work. Might it have something to do with the fact that the page contains display:absolute elements and that it has a background image?

Bevin 2009-03-15 16:36:03

No, it's probably the weird handling of body by IE.I'll edit my answer with something that should solve the issue.

Julian Aubourg 2009-03-15 17:27:02

Still doesn't work. I think that the content div believes that it is empty, because all of the other divs inside it are set to display:absolute. And I just realize that no amount of css on the body or content div would work, since all inside divs are absolute anyway :(

Bevin 2009-03-15 17:59:55

Meh, meant position:absolute.

Bevin 2009-03-15 18:01:13

You should post your page code so that we can sort this out.

Julian Aubourg 2009-03-15 18:16:12

Yes, I tried just that. The entire content div was just shifted down by 567px, and the video div was in the completely wrong place.

Bevin 2009-03-15 18:53:41

Answer 2

+2 A:

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"&gt;
<html xmlns="http://data.w3.org/1999/xhtml"&gt;
<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"&gt;
<html xmlns="http://data.w3.org/1999/xhtml"&gt;
<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"/&gt;


        <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>

Guffa 2009-03-15 18:49:32

Thanks, I was really running out of ideas :)

Julian Aubourg 2009-03-15 19:01:37

Sorry, it doesn't work. The inside elements are still in their original positions, and the background image has magically disappeared (even if I put the background-image in the Content class).

Bevin 2009-03-15 19:09:45

I pasted your content and styles in the page (posted above), and it works just fine. The background image is there, and the div's are positioned inside the Content div.

Guffa 2009-03-15 20:39:49

The background image must be centered too(forgot to say that... seems to be something I do all the time), not just placed in the body.

Bevin 2009-03-15 21:05:20

Just change background-image to background, and add repeat (repeat-x/repeat-y/no-repeat) and horizontal and vertical positioning (ex. center center) after the url().

Guffa 2009-03-15 22:44:27

The image is now centered, but I noticed now that the inside divs are shifted to far right and down. There are black "holes" on the background image that the two divs must fit in, and they are off by the same distance. Tried setting them to position:relative, but that messed up the video div...

Bevin 2009-03-15 22:55:06

Check if the position coordinates are correct. You probably had a margin on the body before, so the coordinates may be adjusted for that.

Guffa 2009-03-15 23:36:07

ansaurus

tags:

views:

answers:

Frameset won't work in IE8

related questions