Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS round corners in em-based layout

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #23092
    Lars
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.