Trouble with elastic layout

Question

If anyone can help, I'd greatly appreciate it!

I built an elastic website using ems, and for some reason, it still gets completely distorted when a user zooms in or out on their browser.

The link to the website that I am referring to is www.newstylesignsusa.com. And here is the css for the template. The css for the rest of the pages has all measurements in ems as well. I'd really appreciate any help I can get with this. Thank you!

CSS:

body{
    margin:0 auto;
    padding:0em;
    background: url(images/bg_gradient_bar.jpg) repeat-x top left #99cccc;
    font-size:16px
}


.clear{
    clear:both;
}

html{
    font-size:100%;
}

/*===============
simple selectors
====================*/

p{
    font-family:Arial, Helvetica, sans-serif;
    color:white;
    float:right;
    margin-top:-0.625em;
    margin-right:0.75em;
    padding:0em;
    font-size:1.125em;
}

img{
    margin-top:-1.875em;
}

ul{
    margin-top:0em;
    margin-right:0.6em;
    list-style-type:none;
    float:left;
    background: url(images/nav_bar.gif) repeat-x top left;
    font-size:1.135em;
}

ul li{
    padding-top:0em;
    padding-bottom:0em;
    padding-left:3.268em;
    padding-right:3.308em; 
    float:left;
    position:relative;
    text-align:center;
    border-right:0.125em solid orange;
    line-height:2.73em; 
}

ul a{
    padding:1.25em 0em; 
    line height:2.813em;
    margin:0em;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    color:#003366;
}

ul a:hover{
    color:#ff6600;
}

ul li ul{
    display:none;
    font-size:1em;
    padding:0em;
    margin:0em;
    z-index:100;
    position:absolute;
}

ul li ul li{
    border:none;
    font-size:0.779em;
    background: url(images/nav_bar.gif) no-repeat top left;
    width:6.695em; 
    margin-bottom:-0.625em;
    position:relative;
    z-index:100;
}

ul li:hover ul{
    display:block;
    position:absolute;
    top:2.70em; 
    left:0em;
}

h3{
    color:#003366;
    font-family:Geneva, Arial, Helvetica, sans-serif;

}

h4{
    color:#003366;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:0.938em;
    font-weight:normal;
}

span{
    background: url(images/nav_bar.gif) repeat-x top left;
    margin-left:0.375em;
    color:#003366;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    padding:0.938em 20.725em 5.625em 21.25em;
    border-top:0.75em solid #66cccc;
}

/*===================
specific selectors
=====================*/

#mainWrapper{
    width:62.5em;
    margin-left: auto;
    margin-right:auto;
    margin-bottom:12.5em;
    zoom:1;
}

#bgWrapper{
    background: url(images/skyline.gif) repeat-x bottom center;
    position:fixed;
    bottom:0em;
    padding-top:-12.5em;
    height: 7.3em;
    width:100%;
    z-index:2;
}

#allContent{
    margin-top:4.688em;
    margin-right:0.0em;
    margin-left:0.0em;
    padding-right:-0.9em;
    padding-left:0.5em;
}

#nav {
    margin-top:2em;
    margin-left:-0.2em;
}

#contact {
    border:none;
}

#info{
    background:white;
    border-top:0.75em solid #003366;
    border-bottom:0.125em solid yellow;
    margin-top:-1.25em;
    margin-left:0.375em;
    margin-right:1.188em;
    padding-bottom:1.25em;
}

#flash {
    margin-top:0.625em;
    margin-right:8.5em;
    margin-bottom:3.125em;
    margin-left:11.9em;
    z-index:0;
    top:0em;
    left:0.625em;
    param-name:wmode;
    value:transparent;
}

#bottomContent {
    border-top:0.375em solid #003366;
    background:white;
    margin-top:-2.625em;
    margin-right:0.875em;
    margin-left:0.875em;
}

#about {
    float:left;
    width:28.125em;
    border-right:0.188em solid #003366;
    padding-right:0.563em;
    padding-bottom:1.6em;
    margin-top:0.688em;
    margin-left:0.313em;
}

#from {
    float:right;
    width:28.125em;
    margin-top:2.05em;
}

.aboutPara{
    color:#003366;
    text-align:justify;
    font-size:1.063em;
    margin-top:0.013em;
}

.fromPara{
    color:#003366;
    font-weight:bold;
    text-align:justify;
    padding-bottom:0.625em;
}

.one{
    background: url(images/star_icon.gif) no-repeat bottom left;
    padding-top:0.65em;
    padding-bottom:0.438em;
    padding-left:3.188em;
}

.two{
    background: url(images/check_icon.gif) no-repeat bottom left;
    padding-top:0.65em;
    padding-bottom:0.438em;
    padding-left:3.188em;
}

.three{
    background: url(images/arrow_icon.gif) no-repeat bottom left;
    padding-top:0.65em;
    padding-bottom:0.438em;
    padding-left:3.188em;
}

.four{
    background: url(images/globe_icon.gif) no-repeat bottom left;
    padding-top:0.65em;/*0.25*/
    padding-bottom:0.438em;
    padding-left:3.188em;/*2.188*/
}

#footer{
    margin-right:-0.95em;
    margin-left:-0.1em;
    padding-right:0.5em;
}

Answer 1

Elastic layouts allow your browser to resize the width of your elements based relative to the base font size of the page.

The issue your seeing is that you are using browser zoom rather than just text zoom which is what is causing your site to break when the user zooms the page.

When I do text zoom on your site in Chrome the only thing that breaks it the flash which is not scaling.

Hope this helps