Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning content layer in vert. & horz. centered layout

    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 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 I've uploaded a preview of what I'm trying to do, irrelevant code removed.

    Here is the CSS, as well.

    Code:
    <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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?verbos....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 here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •