Converting to ems

spyke01 · #1 (**permalink**) 11-09-07, 03:48 PM

Hi guys i need some help converting to ems, i have my font sizes done however heights, widths, margins, and padding have me stumped. All my current stylings including background images are in pxs.

Any help would be greatly appreciated

css:

css Code:

html, body {
    background: #edebd5 url('images/bg.png') repeat-x;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 62.5%; /* 10px */
    color: #000;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    padding: 0px;
    margin: 0px;
    text-align: left;
}
 
/*  Layout 
---------------------------------------------------------------*/
div#container {
    margin: 0px; 
    padding: 0px;
    width: 100%;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    text-align: left;
    font-size: 1.8em; /* 18px */
}
 
LI LI, LI P, TD P, BLOCKQUOTE P {
    font-size:1em; /* 18px */
}
 
div#page {
    background: #fff;
    margin: 0px auto; /* center, not in IE5 */
    padding: 0px;
    width: 900px;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    text-align: left;
    border-left: 3px solid #9fabb3;
    border-right: 3px solid #9fabb3;
}
 
div#header {
    background: #fff;
    width: 890px;
    height: 179px;
    margin: 0px;
    padding: 0px 5px;
    text-align: left;
    clear: both;
}
 
div#content {
    background: #fff url('images/contentbg.gif');
    color: #554d49;
    float: left;
    width: 900px;
    padding: 0px;
    clear: both;
    border-top: 10px solid #05386b;
}
 
div#left-col {
    width: 630px;
    padding: 5px 5px 10px 5px;
    float: left;
}
 
div#right-col {
    width: 250px;
    padding: 5px 5px 10px 5px;
    float: left;
}
 
 
div#footer {
    height: 30px;
    width: 890px;
    background: #859c0e;
    color: #fff;
    /*font-weight: bold;*/
    padding: 5px;
    margin: 0px;
    border-top: 10px solid #05386b;
    clear: both;
}
 
 
/*  images
---------------------------------------------------------------*/
img {
    border: 0px none;
    margin: 0px;
    padding: 0px;
}
 
.imgfloatleft {
    float: left;
    border-right: 4px solid #FFF;
    border-bottom: 4px solid #FFF;
}
 
.imgfloatright {
    float: right;
    border-left: 4px solid #FFF;
    border-bottom: 4px solid #FFF;
}
 
/*  Links 
---------------------------------------------------------------*/
#left-col a {
    color: #257AA3;
    text-decoration: none;
}
 
#left-col a:hover {
    text-decoration: underline;
}
 
a.portfolioLink {
    width: 620px;
    height: 53px;
    margin: 5px 0px 0px 0px;
    padding: 0px;
    display: block;
    border-top: 6px solid #000;
    border-bottom: 6px solid #000;
}
 
a.portfolioLink:hover {
    width: 620px;
    display: block;
    border-top: 6px solid #859C0E;
    border-bottom: 6px solid #859C0E;
}
 
 
/*  H1 H2 H3
---------------------------------------------------------------*/
h1 {
    font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1.5em; /* 27px */
    color: #5b81a5;
    border-bottom: 1px solid #afc2d4;
    margin: 0px;
}
 
h2 {
    font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1.33em; /* 24px */
    color: #5b81a5;
    border-bottom: 1px solid #afc2d4;
    margin: 0px;
}
 
h3 {
    font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1.16px; /* 21px */
    color: #5b81a5;
    margin: 0px;
}
 
/*  Paragraph Styles
---------------------------------------------------------------*/
p.quote {
    font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
    font-style: italic;
    width: 400px;
    border-left: 4px solid #7dcf47;
    margin: 2px 30px 2px 30px;
    padding: 2px;
}
 
div.testimonials {
    background:#edebd5 url(images/tabsBottom.gif) no-repeat bottom;
    border: 1px solid #9fabb3;
    color: #222222;
    font-style: italic;
    width: 230px;
    margin-right: 10px !important;
    margin-right: 0px;
    padding: 5px 10px 5px 10px !important;
    padding: 5px 10px 5px 9px;
}
 
p.portfolioText {
    color: #838b90;
}
 
 
div#content ul {
    margin: 0px;
    padding-left: 10px;
}
 
div#content ul.smaller {
    padding-left: 30px;
}
 
/*  Customize and Order Buttons
---------------------------------------------------------------*/
input.button {
    border: 1px solid #ddd;
    background: #f9f9f9;
    font-weight: bold;
    color: #000;
    padding: 2px 10px !important;
    padding: 2px 0px;
    margin: 2px;
}
 
input.button:hover, input.button:sfhover { 
    border: 1px solid #3da6b8; 
    background: #e7eef0;
}
 
input.buyAppButton {
    background: url('images/buyAppButton.png') no-repeat left top;
    width: 163px;
    height: 50px;
    outline: none;
    border: 0px;
    margin: 0px 0px 0px 60px;
}
 
input.buyAppButton:hover { 
      background-position:0% -52px;
}
 
input.customizeButton {
    background: url('images/customizeButton.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.customizeButton:hover { 
      background-position:0% -32px;
}
 
input.customizeButtonGBG {
    background: url('images/customizeButtonGBG.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.customizeButtonGBG:hover { 
      background-position:0% -32px;
}
 
input.orderNowButton {
    background: url('images/orderNowButton.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.orderNowButton:hover { 
      background-position:0% -32px;
}
 
input.continueButton {
    background: url('images/continueButton.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.continueButton:hover { 
      background-position:0% -32px;
}
 
input.checkoutButton {
    background: url('images/checkoutButton.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.checkoutButton:hover { 
      background-position:0% -32px;
}
 
input.updateButton {
    background: url('images/updateButton.png') no-repeat left top;
    width: 100px;
    height: 31px;
    outline: none;
    border: 0px;
}
 
input.updateButton:hover { 
      background-position:0% -32px;
}
 
/*  Cart Styles
---------------------------------------------------------------*/
.carttitle1 {
    color: #FFF;
    background: #4292bb;
}
.carttitle2 {
    color: #FFF;
    background: #1b89a4;
}
.cartheader1 {
    color: #000;
    background: #1486A0;
}
.cartheader2 {
    color: #000;
    background: #d2e0e4;
}
.cartemphasizedheader1 {
    color: #000;
    background: #1486A0;
    font-weight: bold;
}
.cartemphasizedheader2 {
    color: #000;
    background: #d2e0e4;
    font-weight: bold;
}
.cartcontent1 {
    color: #000;
    background: #eff3f5;
}
.cartcontent2 {
    color: #000;
    background: #f8f8f8;
}
.cartdivider {
    background: #eee;
}
.cartemphasized {
    font-weight: bold;
}
.addresslabel {
    width: auto;
    font-weight: bold;
    text-decoration: underline;
}
.carttotal {
    font-weight: bold;
    color: #fff;
    background: #306a88;
}
.carttotalprice {
    color: #fff;
    background: #667983;
}
.alignmiddle {
    text-align:center;
}
 
/*  Login Page Properties
---------------------------------------------------------------*/
.loginborder{ 
    background: #FFF; 
    border: 1px solid #000;
    padding: 0; 
    margin-left: auto; 
    margin-right: auto;
    width: 300px;
    float: left;
}
 
textarea, select {
    border-color: #000; 
    color: #000;
    background: #f9f9f9;
}
  
input {
  text-indent: 2px; 
}
 
.textarea, .searchinput {
    border: 1px solid #FFF;
    color: #000;
    background: #f9f9f9;
    padding: 2px;
    vertical-align: middle;
 }
 
#PriceBox_Layer {
    background: #fff;
    border: 1px solid #000;
}
 
.priceboxheader {
    font-weight: bold;
    background: #4292bb;
    color: #fff;
    width: 121px;
    padding: 2px;
    border-bottom: 1px solid #000;  
}
 
/*  Navigation 
---------------------------------------------------------------*/
#top-nav {
    background: #fff url('images/navbg.png');
    height: 30px;
    line-height: 30px;
}
 
#nav, #nav ul {
    width: 880px;
    list-style: none;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
    margin: 0px;
}
 
#nav li {
    float: left;
}
 
#nav a {
    display: block;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    line-height: 28px;
    padding: 1px 20px 1px 20px;
}
 
#nav li:hover, #nav li.sfhover {
    background: url('images/navbg-over.png');
}
 
#nav a:hover, #nav li.sfhover {
    color: #fff;
}
 
/*  Comments Form
---------------------------------------------------------------*/
form.commentsform fieldset {
    font-weight: bold;
    background: #FFFFDD;
    border: 1px solid #97c660;
    width: 400px;
    padding: 5px;
    float: left;
}
 
form.commentsform fieldset legend {
    color: #5ca605;
    float: left;
    font-weight: bold;
}
 
form.commentsform label {
    color: #656565;
    width: 120px;
    font-weight: bold;
    clear: both;
}
 
form.commentsform.input, form.commentsform.select, form.commentsform.textarea{
    width: 180px;
    margin-bottom: 5px;
}
 
form.commentsform textarea {
    width: 250px;
    height: 150px;
}
 
form.commentsform ol, form.commentsform ol li {
    list-style: none;
}
 
form.commentsform input, form.commentsform.select, form.commentsform textarea {
    background: url("images/input_bg.gif");
    border:1px #ccc solid;
    display:block;
    padding: 4px;
    margin: 0px;
}
 
form.commentsform input button {
    margin: 23px;
}
 
form.commentsform input:hover, form.commentsform.select:hover, form.commentsform textarea:hover {
    border:1px #97c660 solid;
}
 
form.commentsform input:focus, form.commentsform.select:focus, form.commentsform textarea:focus {
    border:1px #3a535e solid;
}
 
form.commentsform .hiddenField {
    display: none;
    background-image: none;
    border: none;
    padding: 0px;
}
 
.title1 { 
    border-left:0px none; 
    border-right:0px none; 
    background: #000 url('images/titlegrad.gif');
    color: #fff;
    height:27px;
    line-height:27px; 
    font-weight:bold; 
    border-top:1px solid #656B78; 
    border-bottom:1px solid #656B78; 
    padding-left:5px; 
    padding-right:5px
}
 
.PVPT2Column2, .row1 { 
    background: #edebd5;
    color: #0f0f0f;
}
.row2 { 
    background: #D8D5B4;
    color: #0f0f0f;
}
 
.PVPT2Column1, .title2 {
    background: #859C0E;
    color: #fff;
}
 
.PVPT2Column1 a:link, .PVPT2Column1 a:active, .PVPT2Column1 a:visited, .title2 a:link, .title2 a:active, .title2 a:visited {
    color: #fff;
    text-decoration: underline;
}
 
.PVPT2Column1 a:hover, .title2 a:hover {
    text-decoration: none;
}

html:

html Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     <head>        <title>Text</title>        <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <meta http-equiv="content-language" content="en-us" />        <meta name="verify-v1" content="11ImTHa6B8i7iVFi9D5RzhjNPtdzOsJ7+9oaCI8irug=" />        <!--Stylesheets Begin-->            <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/hosting.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/apps.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/servers.css" />            <style type="text/css" media="screen">@import url( stylesheets/style.css );</style>            <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/tabs.css" />            <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/lightbox.css" />            <!--[if lt IE 7]>                <link rel="stylesheet" type="text/css" href="stylesheets/iehacks.css" />                <style type="text/css">                     div#left-col {                        width: 629px;                    }                                        div#right-col {                        padding-right: 0px;                    }                   </style>            <![endif]-->        <!--Stylesheets End-->        <!--Javascripts Begin-->            <script type="text/javascript" src="javascripts/text-resize.js"></script>            <script type="text/javascript" src="javascripts/general.js"></script>            <script type="text/javascript" src="javascripts/prototype.js"></script>            <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>            <script type="text/javascript" src="javascripts/lightbox.js"></script>            <script type="text/javascript" src="javascripts/validation.js"></script>            <script type="text/javascript"><!--//--><![CDATA[//><!--                sfHover = function() {                    var sfEls = document.getElementById("nav").getElementsByTagName("LI");                    for (var i=0; i<sfEls.length; i++) {                        sfEls[i].onmouseover=function() {                            this.className+=" sfhover";                        }                        sfEls[i].onmouseout=function() {                            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");                        }                    }                }                                if (window.attachEvent) window.attachEvent("onload", sfHover);            //--><!]]></script>                    <!--Javascripts End-->    </head>    <body>        <div id="container">            <div id="page">                <div id="header">                    <div style="height: 50px; line-height: 80px; vertical-align: bottom; float: right;">                        <img src="images/smallfont.jpg" alt="Small Font" title="Small Font" onclick="javascript:changeFontSize('content', '10px');" style="cursor: hand;" />                        <img src="images/normalfont.jpg" alt="Normal Font" title="Normal Font" onclick="javascript:changeFontSize('content', '12px');" style="cursor: hand;" />                        <img src="images/largefont.jpg" alt="Large Font" title="Large Font" onclick="javascript:changeFontSize('content', '14px');" style="cursor: hand;" />                                </div>                    <img src="images/fts_logo_green02.png" alt="Fast Track Sites Logo" /><br />                                            <a href="applications.php"><img src="images/ad01.png" alt="" /></a>                          <div id="top-nav">                        <ul id="nav">                            <li><a href="">Text</a></li>                        </ul>                                      </div>                </div>                <div id="content">                    <div id="left-col">                            <h1>Text</h1>                        <br />                        Text                            </div>                    <div id="right-col">                        <h3>Text</h3>                        <div class="tabber" id="mytabber1">                            <div class="tabbertab">                                <h2>Text</h2>                                <dl>                                    <dd>Text</dd>                                </dl>                            </div>                        </div>                                  </div>                        </div>                <div id="footer">                    <div style="float: right;">Text</div>                    Copyright &copy; 2005-2006 Fast Track Sites                      <!-- phpmyvisites -->                    <a href="http://www.phpmyvisites.net/" title="phpMyVisites | Open source web analytics" onclick="window.open(this.href);return(false);">                        <script type="text/javascript">                            <!--                            var a_vars = Array();                            var pagename='';                            var phpmyvisitesSite = 1;                            var phpmyvisitesURL = "http://www.fasttracksites.com/phpmv2/phpmyvisites.php";                            //-->                        </script>                        <script src="http://www.fasttracksites.com/phpmv2/phpmyvisites.js" type="text/javascript"></script>                    </a>                    <noscript>                        <p>phpMyVisites | Open source web analytics                            <img src="http://www.fasttracksites.com/phpmv2/phpmyvisites.php" alt="phpMyVisites" style="border:0" />                        </p>                    </noscript>                    <script type="text/javascript" src="/phpmv2/plugins/clickheat/libs/js/clickheat.js"></script>                    <script type="text/javascript">                        <!--                        clickHeatSite = 1;                        clickHeatGroup = 'all';                        clickHeatServer = '/phpmv2/plugins/clickheat/libs/clickpmv.php';                        initClickHeat();                        //-->                    </script>                    <noscript><p><a href="http://www.labsmedia.com/clickheat/index.html" title="ClickHeat: clicks heatmap">clickheat</a></p></noscript>                    <!-- /phpmyvisites -->                   </div>            </div>        </div>              </body></html>