distortion - Trouble with elastic layout -
if can help, i'd appreciate it!
i built elastic website using ems, , reason, still gets distorted when user zooms in or out on browser.
the link website referring www.newstylesignsusa.com. , here css template. css rest of pages has measurements in ems well. i'd appreciate can 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; }
elastic layouts allow browser resize width of elements based relative base font size of page.
the issue seeing using browser zoom rather text zoom causing site break when user zooms page.
when text zoom on site in chrome thing breaks flash not scaling.
hope helps
Comments
Post a Comment