1
Если кто-нибудь может помочь, я был бы очень признателен!Проблема с эластичным расположением
Я создал эластичный веб-сайт с использованием ems, и по какой-то причине он по-прежнему полностью искажается, когда пользователь увеличивает или уменьшает масштаб в своем браузере.
Ссылка на сайт, на который я ссылаюсь, это www.newstylesignsusa.com. И вот css для шаблона. Css для остальных страниц имеет все измерения в ems. Я бы очень признателен за любую помощь, которую я могу получить. Спасибо!
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;
}