Grow your CSS skills. Land your dream job.

round corners in em-based layout

  • # August 15, 2008 at 7:37 am

    Hi, guys!

    I’m trying to develop a vertically and horizontally centered loginpage with round corners, based on one image per corner. It all works great with a pixel-based css, but since the page is centered anyways, I’d prefer an elastic, em-based layout, so that zooming in the page would shrink/zoom the whole page rather than just the text.

    So, I changed the layout to em-based. Works fine so far. However, if I zoom into the page, all corners except the top-left break the layout. I don’t know what is wrong there.

    My testsystem is Mac, tested on Safari and Camino with the same results. Any hints on what I’m doing wrong?

    Regards,
    Lars

    [attachment=0]archive.zip[/attachment]

    style.css:

    Code:
    /*
    RESET
    */

    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    html, body { height: 100%; }
    body { font-size: 62.5%; font-family: Arial, sans-serif; color: #272727;}
    ul { list-style: square inside; }
    ol { list-style: decimal inside; }
    a { outline: none; text-decoration: none; }
    a img { border: none; background: none; }
    img { vertical-align: middle;}
    table { border-collapse: collapse; }

    /*
    LAYOUT
    */
    body { text-align:center; }/* horizontal centering for IE Win quirks */

    #distance { width:0.1em; height:50%; float:left; margin-bottom:-15em; }/* half of container’s height */

    #container { margin:0 auto; position:relative; text-align:left; height:30em; width:40em;
    clear:left; border-left:0.5em solid black; border-right:0.5em solid black;}

    #container .tl { width: 4em; height: 4em; position: absolute; top: -0.1em; left: -0.5em; z-index: 0;}
    #container .tr { width: 4em; height: 4em; position: absolute; top: -0.1em; right: -0.5em; z-index: 0;}
    #container .bl { width: 4em; height: 4em; position: absolute; bottom: -0.1em; left: -0.5em; z-index: 0;}
    #container .br { width: 4em; height: 4em; position: absolute; bottom: -0.1em; right: -0.5em; z-index: 0;}
    #container .inside { padding: 4em 2em; }

    #container .inside .inner { height: 11em; }

    index.html:

    Code:

    Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh.


    Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".