Probleme mit elastischem Layout

Question

Wenn jemand helfen kann, würde ich es sehr zu schätzen wissen!

Ich baute eine elastische Website mit ems, und aus irgendeinem Grund wird es immer noch völlig verzerrt, wenn ein Benutzer in ihrem Browser ein- oder auszoomt.

Der Link zu der Website, die ich beziehe, ist www.newstylesignsusa.com. Und hier ist das CSS für die Vorlage. Das CSS für den Rest der Seiten enthält alle Messungen in ems. Ich würde wirklich jede Hilfe schätzen, die ich damit bekommen kann. Vielen Dank!

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

Elastische Layouts lassen Sie Ihren Browser, um die Breite der Elemente der Seite auf Basis relativ zum Basisschriftgröße zu ändern.

Das Problem, das Sie sehen, besteht darin, dass Sie den Browserzoom verwenden und nicht nur den Textzoom, der Ihre Website zum Brechen bringt, wenn der Benutzer die Seite zoomt.

Wenn ich Text zoome auf Ihrer Website in Chrome die einzige Sache, die es bricht der Blitz, der nicht skaliert.

Hoffe, das hilft