...

View Full Version : Aligning content layer in vert. & horz. centered layout



_phantasmal
02-07-2007, 12:50 AM
First time posting here, or asking for coding help at all. I apologize in advance if I've done anything wrong! :]

I am working on a new layout, using this (http://www.pmob.co.uk/pob/hoz-vert-center.htm) tutorial to horizontally and vertically center it.

It was working great for me so far, until I tried to position the content layer.

When I set the left margin, it aligns fine in Firefox, but not so in IE.
When I attempt to set a top margin to move it down, the content layer does not move, instead my whole layout is pushed down, off-center.

I am looking for a way to fix this problem, and align the content layer in a manner that works in all browsers.

Here (http://tsp.stitch-frequency.net/test.html) I've uploaded a preview of what I'm trying to do, irrelevant code removed.

Here is the CSS, as well.



<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */

body {
background-color: #AAC7C9;
text-align:center;
min-height:452px;/* for good browsers*/
min-width:426px;/* for good browsers*/
}

#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 452px;
}

#inner {
width: 862px;
background-image: url(images/test1a.gif);
background-repeat: no-repeat;
height: 452px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}

#menu {
width: 843px;
background-image: url();
height: 26px;
text-align: center;
margin-left:auto;
margin-right:auto;
margin-top:79px;
border:0px solid #000;
z-index:1;
}

#content {
width: 297px;
height: 345px;
overflow: auto;
margin-left: 515px;
border:1px solid #000;
z-index:2;
)

</style>


<!--[if IE ]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->


I would appreciate any help, thank you!

Excavator
02-07-2007, 01:15 AM
Hello _phantasmal,
--To have any chance at all of rendering the same in different browsers you HAVE to have compliant code. Check the validator to see how yours does: http://validator.w3.org/check?verbose=1&uri=http://tsp.stitch-frequency.net/test.html

--No need for styling like this:
border:0px solid #000;
or this:
background-image: url();
or this:
z-index:2;

And, as far as that tut for horizontal alignment... I've never tried it but I think rmedek has come up with the best way for doing that (http://www.codingforums.com/showthread.php?t=106800) here. (http://exanimo.com/css/vertical-centering-with-a-floated-shim)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum