Website not fluid -- messes up when minimized

Discussion in 'CSS' started by thra1l, Feb 8, 2012.

  1. #1
    I am working on a website, and the website is going fine, until I figured out that it completely messes up when minimized in any browser. I'll post my html and css code. Any help would be very much appreciated. Thanks.

    My HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr"><head profile="http://gmpg.org/xfn/11"><!-- TemplateBeginEditable name="doctitle" --><title>Kentucky Mustang Auto Sales</title><!-- TemplateEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="imagetoolbar" content="no" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript" src="../js/coin-slider.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script src="../galleria/galleria-1.2.6.min.js"></script><link rel="stylesheet" href="../styles/coin-slider-styles.css" type="text/css" /><link rel="stylesheet" href="../styles/style.css" type="text/css" />
    
    <style type="text/css">div.topnav{margin-right:auto;width:85%;}img.logo{display:block;margin-left:auto;margin-right:auto;margin-top:10px}div.phone{    margin-left:auto;    width: 58%}div.cartitle{    font:Georgia, "Times New Roman", Times, serif;    font-size: 28px;}div.specs{    border: 0px;}div.phone{    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    }a:link {COLOR: #ffffff;text-decoration: underline;}a:visited {COLOR: #00F;text-decoration: underline;}a:hover {COLOR: #00F;text-decoration: none;}a:active {COLOR: #00F;text-decoration: none;}</style>
    
    
    
    <link rel="stylesheet" href="../styles/layout.css" type="text/css" /><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --></head><body id="top"><!-- SLIDE OUT NAVIGATION START -->    <ul id="navigation"> <li class="facebook"><a href="https://www.facebook.com/kentuckymustang"><span>Facebook</span></a></li> <li class="youtube"><a href="http://www.youtube.com/user/KentuckyMustang"><span>Youtube</span></a></li></ul>
    
            <script type="text/javascript">            $(function() {                var d=300;                $('#navigation a').each(function(){                    $(this).stop().animate({                        'marginTop':'-80px'                    },d+=150);                });
                    $('#navigation > li').hover(                function () {                    $('a',$(this)).stop().animate({                        'marginTop':'-2px'                    },200);                },                function () {                    $('a',$(this)).stop().animate({                        'marginTop':'-80px'                    },200);                }            );            });        </script>
    <!-- SLIDE OUT NAVIGATION END --><div class="wrapper col2">  <div id="header">         <a href="../index.php"><img class="logo" src="../images/Sign.png" alt="Home Page" width="600" height="181" align="left" /></a>      <div id="phone">       <p>Phone: (859) 498-7570 | Email: <a href="mailto:sales@kentuckymustang.com">sales@kentuckymustang.com</a></p>     </div>    <div class="topnav">        <ul id="topnav">      <li class="last"><a href="#">KY Mustang Parts</a></li>
          <li><a href="#">About Us</a>      </li>
          <li><a href="../full-width.html">Contact Us/Directions</a></li>      <li><a href="../style-demo.html">Cars For Sale</a></li>      <li style="border-left: 2px solid #272727;" class="active"><a href="../index.php">Home</a></li>    </ul>          <br class="clear" />    </div></div></div><!-- TemplateBeginEditable name="Content" --><!-- BEGIN CAR TITLE --><div class="col3 cartitle">  <center>    Title of the Car  </center></div><div class="wrapper col3">  <!-- END CAR TITLE -->  <!-- galleria begin -->  <!-- Insert images and captions here for car -->  <center>    <div id='car'> <img src="../images/car1.jpg" /> <img src="../images/car2.jpg" /> <img src="../images/car3.jpg" /> </div>    <script>            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');            $("#car").galleria({                width: 900,                height: 500            });        </script>  </center></div><!-- galleria end --><div class="wrapper col4"></div><div class="wrapper col5">  <div id="container">    <div id="content">      <h2> Basic Overview</h2>      <table summary="Car Specs" cellpadding="0" cellspacing="0">        <thead>          <tr>            <th colspan="2">Basic Specs</th>          </tr>        </thead>        <tbody>          <tr class="light">            <td width="50%">Exterior Color</td>            <td width="50%">Value 2</td>          </tr>          <tr class="dark">            <td>Interior Color</td>            <td>Value 6</td>          </tr>          <tr class="light">            <td>Body Style</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>Engine Size</td>            <td>Value 14</td>          </tr>          <tr class="light">            <td>Transmission</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>VIN#</td>            <td>Value 14</td>          </tr>          <tr class="light">            <td>Odometer</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>Stock#</td>            <td>Value 14</td>          </tr>        </tbody>      </table>      <br />      <!-- DETAILED SPECS BEING -->      <div id="detailed">        <table width="210px" cellpadding="0" cellspacing="0" summary="Car Specs">          <thead>            <tr>              <th colspan="2">Detailed Specs</th>            </tr>          </thead>          <tbody>            <tr class="light">              <td colspan="2"><strong>                <center>                  Convenience                </center>              </strong></td>            </tr>            <tr class="dark">              <td width="50%">Cruise Control</td>              <td width="50%">Power Steering</td>            </tr>            <tr class="light">              <td>Air conditioning</td>              <td>Tilt Steering Wheel</td>            </tr>            <tr class="dark">              <td>Remote Door Locks</td>              <td>Power Seat(s)</td>            </tr>            <tr class="light">              <td>Power Windows</td>              <td>AM/FM Sterio</td>            </tr>            <tr class="dark">              <td>Rear Defroster</td>              <td>Power Mirrors</td>            </tr>            <tr class="light">              <td>Mach Audio System</td>              <td>&nbsp;</td>            </tr>            <tr class="dark">              <td>&nbsp;</td>              <td>&nbsp;</td>            </tr>            <tr class="light">              <td colspan="2"><strong>                <center>                  Safety Features                </center>              </strong></td>            </tr>            <tr class="dark">              <td>ABS Brakes</td>              <td>Driver/Passenger Air Bags</td>            </tr>            <tr class="light">              <td>&nbsp;</td>              <td>&nbsp;</td>            </tr>            <tr class="dark">              <td colspan="2"><strong>                <center>                  Exterior                </center>              </strong></td>            </tr>            <tr class="light">              <td>Rear Spoiler</td>              <td>Tinted Glass</td>            </tr>            <tr class="dark">              <td>Hood Scoop</td>              <td>&nbsp;</td>            </tr>          </tbody>        </table>      </div>      <!-- DETAILED SPECS END -->    </div>    <div id="column">      <h2 class="title">Video</h2>      <iframe width="420" height="315" src="http://www.youtube.com/embed/82Q4QCbkSDU" frameborder="1" allowfullscreen></iframe>    </div>    <br class="clear" />    <br class="clear" />  </div></div><!-- TemplateEndEditable --><div class="wrapper col6">  <div id="footer">    <div id="contactform">      <h2> Contact Us</h2>      <form action="#" method="post">        <fieldset>        <legend>Contact Form</legend>        <label for="fullname">Name:        <input id="fullname" name="fullname" type="text" value="" />        </label>        <label for="emailaddress" class="margin">Email:        <input id="emailaddress" name="emailaddress" type="text" value="" />        </label>        <label for="message">Message:<br />        <textarea id="message" name="message" cols="40" rows="4"></textarea>        </label>        <p>          <input id="submitform" name="submitform" type="submit" value="Submit" />          &nbsp;          <input id="resetform" name="resetform" type="reset" value="Reset" />        </p>        </fieldset>      </form>    </div>    <!-- End Contact Form -->    <div id="compdetails">      <div id="officialdetails">        <h2>Company Information</h2>        <ul>          <li>Copyright &copy; 2012 - All Rights Reserved</li>          <li>Kentucky Mustang Auto Sales</li>        </ul>              </div>      <div id="contactdetails">        <h2>Our Contact Details</h2>        <ul>          Kentucky Mustang Auto Sales          <li></li>          <li>985 Double Gate Road</li>          <li>Jeffersonville, KY 40337</li>          <li>Phone: (859) 498-7570</li>          <li>Email: sales@kentuckymustang.com</li>          <li> YouTube: <a href="http://www.youtube.com/user/KentuckyMustang">Kentucky Mustang</a></li>          <li class="last">Facebook: <a href="https://www.facebook.com/kentuckymustang">Kentucky Mustang</a>      </li>                 </ul>      </div>      <div class="clear"></div>    </div>    <div class="clear"></div>  </div></div><div class="wrapper col7">  <div id="copyright">    <ul>      <li><a href="#">Online Privacy Policy</a></li>      <li><a href="#">Terms of Use</a></li>      <li><a href="#">Permissions &amp; Trademarks</a></li>      <li><a href="#">Product License Agreements</a></li>      <li class="last">Template by <a target="_blank" href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></li>    </ul>  </div></div>
    
    </body></html>
    
    HTML:

    My CSS
    /*Template Name: PhotoBusiness
    File: Layout CSS
    Author: OS Templates
    Author URI: http://www.os-templates.com/
    Licence: <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>
    */
    
    
    @import url(navi.css);
    @import url(forms.css);
    @import url(tables.css);
    @import url(gallery.css);
    
    
    body{
        margin:0;
        font-size:12px;
        font-family:verdana, Arial, Helvetica, sans-serif;
        color:#CCCCCC;
        background-color:#2E2E2E;
        padding-top: 0px;
        padding-right: 100px;
        padding-bottom: 50px;
        padding-left: 100px; 
        }
    
    
    img{border:0; padding:0; margin:0;}
    .justify{text-align:justify;}
    .bold{font-weight:bold;}
    .center{text-align:center;}
    .right{text-align:right;}
    .nostart {list-style-type:none; margin:0; padding:0;}
    .clear{clear: both;}
    br.clear{
        clear:both;
        margin-top:-15px;
        text-align: center;
    }
    a{outline:none; text-decoration:none;}
    
    
    .fl_left{float:left;}
    .fl_right{float:right;}
    
    
    .imgl, .imgr{border:1px solid #666666; padding:5px;}
    .imgl{float:left; margin:0 8px 8px 0; clear:left;}
    .imgr{float:right; margin:0 0 8px 8px; clear:right;}
    
    
    /* ----------------------------------------------Wrapper-------------------------------------*/
    
    
    div.wrapper{
        position:relative;
        float:left;
        width:100%;
        margin:0;
        text-align:left;
        }
    
    
    div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
        margin:0 0 20px 0;
        padding:0 0 8px 0;
        font-size:22px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        border-bottom:1px dashed #DDDDDD;
        }
    
    
    .col1{color:#333333; background-color:#000000;}
    .col2{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col3{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col4{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col5{color:#CCCCCC; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col5 a{color:#99CC00; background-color:#000000;}
    .col6{color:#FFFFFF; background-color:#1B1B1B; border-bottom:1px solid #3B3B3B;}
    .col7, .col7 a{color:#CCCCCC; background-color:#2E2E2E;}
    
    
    /* ----------------------------------------------Generalise-------------------------------------*/
    
    
    #topbar, #header, #gallery, #cars, #breadcrumb, #container, #footer, #copyright{
        position:relative;
        margin:0 auto;
        display:block;
        width:960px;
        }
    
    
    /* ----------------------------------------------TopBar-------------------------------------*/
    
    
    #topbar{
        height:25px;
        padding:10px 0;
        }
    
    
    /* ----------------------------------------------Header-------------------------------------*/
    
    
    #header{
        padding:0 0 20px 0;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        }
    
    
    #header #logo{
        display:block;
        float:left;
        width:300px;
        }
    
    
    #header h1, #header p{
        margin:0;
        padding:0;
        border:none;
        clear:left;
        font-size:13px;
        text-align: left;
        }
    
    
    #header h1{
        margin-bottom:5px;
        font-size:36px;
        }
    
    
    #header h1 a{
        color:#DBDBDB;
        background-color:#000000;
        }
    
    
    /* ----------------------------------------------Header-------------------------------------*/
    
    
    #cars{
        padding:20px 0 0 0;
        text-transform:;
        font-size:16px;
        font-family:Georgia, "Times New Roman", Times, serif;
        }
    
    
    #cars img{
        margin:0;
        padding:0;
        line-height:normal;
        }
    
    
    #cars ul{
        display:block;
        width:960px;
        margin:0;
        padding:0;
        list-style:none;
        overflow:hidden;
        }
    
    
    #cars li{
        display:block;
        float:left;
        width:234px;
        height:175px;
        margin:0 8px 8px 0;
        padding:0;
        overflow:hidden;
        }
    
    
    #cars li.last{
        margin-right:0;
        }
    
    
    #cars a strong{
        display:none;
        width:100%;
        margin:0;
        padding:7px 0;
        font-weight:normal;
        text-align:center;
        color:#5B5B5B;
        background-color:#232323;
        }
    
    
    #cars a:hover strong{
        display:block;
        }
    
    
    /* ----------------------------------------------BreadCrumb-------------------------------------*/
    
    
    #breadcrumb{
        padding:15px 0;
        }
    
    
    #breadcrumb a{color:#99CC00; background-color:#000000;}
    
    
    #breadcrumb ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #breadcrumb ul li{display:inline;}
    #breadcrumb ul li.current a{text-decoration:underline;}
    
    
    /* ----------------------------------------------Content-------------------------------------*/
    
    
    #container{
        padding:15px 0;
        }
    
    
    #container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
        margin:0 0 15px 0;
        padding:0 0 8px 0;
        color:#CCCCCC;
        background-color:#000000;
        border-bottom:1px solid #CCCCCC;
        }
    
    
    #content{
        display:block;
        float:left;
        width:600px;
        }
    #body{
        width: 100%;
        height:100%;
    }
    /* ------Comments-----*/
    
    
    #comments{margin-bottom:40px;}
    
    
    #comments .commentlist {margin:0; padding:0;}
    
    
    #comments .commentlist ul{margin:0; padding:0; list-style:none;}
    
    
    #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
    
    
    #comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
    #comments .commentlist li.comment_odd a{color:#3E7060; background-color:#F7F7F7;}
    
    
    #comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
    #comments .commentlist li.comment_even a{color:#3E7060; background-color:#E8E8E8;}
    
    
    #comments .commentlist .author .name{font-weight:bold;}
    #comments .commentlist .submitdate{font-size:smaller;}
    
    
    #comments .commentlist p {margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
    
    
    #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
    
    
    /* ----------------------------------------------Column-------------------------------------*/
    
    
    #column{
        display:block;
        float:right;
        width:300px;
        }
    
    
    .flickrbox ul{
        margin:0;
        padding:0;
        list-style:none;
        }
        
    .flickrbox li{
        display:block;
        float:left;
        width:80px;
        height:80px;
        margin:0 15px 15px 0;
        padding:4px;
        border:1px solid #666666;
        }
    
    
    .flickrbox li.last{margin-right:0;}
    
    
    #column .holder, #column #featured{
        display:block;
        width:300px;
        margin-bottom:20px;
        }
    
    
    #column .holder p{
        line-height:1.6em;
        }
    
    
    #column h2{
        font-size:20px;
        }
    
    
    #column .holder h2.title{
        display:block;
        width:100%;
        height:65px;
        margin:0;
        padding:15px 0 0 0;
        font-size:20px;
        line-height:normal;
        border-bottom:1px dashed #666666;
        }
    
    
    #column .holder h2.title img{
        float:left;
        margin:-15px 8px 0 0;
        padding:5px;
        border:1px solid #666666;
        }
    
    
    #column .holder p.readmore{
        display:block;
        width:100%;
        font-weight:bold;
        text-align:right;
        line-height:normal;
        }
    
    
    #column div.imgholder{
        display:block;
        width:290px;
        margin:0 0 10px 0;
        padding:4px;
        border:1px solid #666666;
        }
        
    /* Featured Block */
    
    
    #column #featured a{
        color:#99CC00;
        background-color:#161616;
        }
    
    
    #column #featured ul, #column #featured h2, #column #featured p{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #column #featured li{
        display:block;
        width:250px;
        margin:0;
        padding:20px 25px;
        color:#666666;
        background-color:#161616;
        }
    
    
    #column #featured li p{
        line-height:1.6em;
        }
    
    
    #column #featured li p.imgholder{
        display:block;
        width:240px;
        height:90px;
        margin:20px 0 15px 0;
        padding:4px;
        color:#666666;
        background-color:#333333;
        border:1px solid #666666;
        }
    
    
    #column #featured li h2{
        margin:0;
        padding:0 0 14px 0;
        font-size:20px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#666666;
        background-color:#161616;
        line-height:normal;
        border-bottom:1px dashed #666666;
        }
    
    
    #column #featured p.more{
        display:block;
        width:100%;
        margin-top:15px;
        font-weight:bold;
        text-align:right;
        line-height:normal;
        }
    
    
    /* ----------------------------------------------Footer-------------------------------------*/
    
    
    #footer{
        padding:20px 0;
        }
    
    
    #footer a{
        color:#99CC00;
        background-color:#1B1B1B;
        }
    
    
    #footer h2{
        margin:0 0 15px 0;
        padding:0 0 8px 0;
        font-size:22px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#CCCCCC;
        background-color:#1B1B1B;
        line-height:normal;
        border-bottom:1px dashed #CCCCCC;
        }
    
    
    #contactform{
        display:block;
        float:left;
        width:350px;
        }
    
    
    /* ------Company Details------*/
    
    
    #compdetails{
        display:block;
        float:right;
        width:550px;
        }
    
    
    #compdetails ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #compdetails li{
        margin:0 0 12px 0;
        }
    
    
    #compdetails li.last{
        margin:0;
        }
    
    
    #officialdetails{float:left}
    #officialdetails li.last{margin-bottom:20px;}
    
    
    #contactdetails{float:right}
    
    
    /* ----------------------------------------------Copyright-------------------------------------*/
    
    
    #copyright{
        padding:20px 0;
        text-align:right;
        }
    
    
    #copyright ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #copyright li{
        display:inline;
        margin-right:8px;
        padding-right:10px;
        border-right:1px solid #CCCCCC;
        }
    
    
    #copyright li.last{
        margin-right:0;
        padding-right:0;
        border-right:none;
        }
    
        
    Code (markup):

     
    thra1l, Feb 8, 2012 IP
  2. Inna

    Inna Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #2
    It would be easier to check the alive site. Could not you give the link?
     
    Inna, Feb 15, 2012 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    Try this instead:

    My HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr"><head profile="http://gmpg.org/xfn/11"><!-- TemplateBeginEditable name="doctitle" --><title>Kentucky Mustang Auto Sales</title><!-- TemplateEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="imagetoolbar" content="no" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript" src="../js/coin-slider.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script src="../galleria/galleria-1.2.6.min.js"></script><link rel="stylesheet" href="../styles/coin-slider-styles.css" type="text/css" /><link rel="stylesheet" href="../styles/style.css" type="text/css" />
    
    <style type="text/css">div.topnav{margin-right:auto;width:85%;}img.logo{display:block;margin-left:auto;margin-right:auto;margin-top:10px}div.phone{    margin-left:auto;    width: 58%}div.cartitle{    font:Georgia, "Times New Roman", Times, serif;    font-size: 28px;}div.specs{    border: 0px;}div.phone{    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    }a:link {COLOR: #ffffff;text-decoration: underline;}a:visited {COLOR: #00F;text-decoration: underline;}a:hover {COLOR: #00F;text-decoration: none;}a:active {COLOR: #00F;text-decoration: none;}</style>
    
    
    
    <link rel="stylesheet" href="../styles/layout.css" type="text/css" /><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --></head><body id="top"><!-- SLIDE OUT NAVIGATION START -->    <ul id="navigation"> <li class="facebook"><a href="https://www.facebook.com/kentuckymustang"><span>Facebook</span></a></li> <li class="youtube"><a href="http://www.youtube.com/user/KentuckyMustang"><span>Youtube</span></a></li></ul>
    
            <script type="text/javascript">            $(function() {                var d=300;                $('#navigation a').each(function(){                    $(this).stop().animate({                        'marginTop':'-80px'                    },d+=150);                });
                    $('#navigation > li').hover(                function () {                    $('a',$(this)).stop().animate({                        'marginTop':'-2px'                    },200);                },                function () {                    $('a',$(this)).stop().animate({                        'marginTop':'-80px'                    },200);                }            );            });        </script>
    <!-- SLIDE OUT NAVIGATION END --><div class="wrapper col2">  <div id="header">         <a href="../index.php"><img class="logo" src="../images/Sign.png" alt="Home Page" width="600" height="181" align="left" /></a>      <div id="phone">       <p>Phone: (859) 498-7570 | Email: <a href="mailto:sales@kentuckymustang.com">sales@kentuckymustang.com</a></p>     </div>    <div class="topnav">        <ul id="topnav">      <li class="last"><a href="#">KY Mustang Parts</a></li>
          <li><a href="#">About Us</a>      </li>
          <li><a href="../full-width.html">Contact Us/Directions</a></li>      <li><a href="../style-demo.html">Cars For Sale</a></li>      <li style="border-left: 2px solid #272727;" class="active"><a href="../index.php">Home</a></li>    </ul>          <br class="clear" />    </div></div></div><!-- TemplateBeginEditable name="Content" --><!-- BEGIN CAR TITLE --><div class="col3 cartitle">  <center>    Title of the Car  </center></div><div class="wrapper col3">  <!-- END CAR TITLE -->  <!-- galleria begin -->  <!-- Insert images and captions here for car -->  <center>    <div id='car'> <img src="../images/car1.jpg" /> <img src="../images/car2.jpg" /> <img src="../images/car3.jpg" /> </div>    <script>            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');            $("#car").galleria({                width: 900,                height: 500            });        </script>  </center></div><!-- galleria end --><div class="wrapper col4"></div><div class="wrapper col5">  <div id="container">    <div id="content">      <h2> Basic Overview</h2>      <table summary="Car Specs" cellpadding="0" cellspacing="0">        <thead>          <tr>            <th colspan="2">Basic Specs</th>          </tr>        </thead>        <tbody>          <tr class="light">            <td width="50%">Exterior Color</td>            <td width="50%">Value 2</td>          </tr>          <tr class="dark">            <td>Interior Color</td>            <td>Value 6</td>          </tr>          <tr class="light">            <td>Body Style</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>Engine Size</td>            <td>Value 14</td>          </tr>          <tr class="light">            <td>Transmission</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>VIN#</td>            <td>Value 14</td>          </tr>          <tr class="light">            <td>Odometer</td>            <td>Value 10</td>          </tr>          <tr class="dark">            <td>Stock#</td>            <td>Value 14</td>          </tr>        </tbody>      </table>      <br />      <!-- DETAILED SPECS BEING -->      <div id="detailed">        <table width="210px" cellpadding="0" cellspacing="0" summary="Car Specs">          <thead>            <tr>              <th colspan="2">Detailed Specs</th>            </tr>          </thead>          <tbody>            <tr class="light">              <td colspan="2"><strong>                <center>                  Convenience                </center>              </strong></td>            </tr>            <tr class="dark">              <td width="50%">Cruise Control</td>              <td width="50%">Power Steering</td>            </tr>            <tr class="light">              <td>Air conditioning</td>              <td>Tilt Steering Wheel</td>            </tr>            <tr class="dark">              <td>Remote Door Locks</td>              <td>Power Seat(s)</td>            </tr>            <tr class="light">              <td>Power Windows</td>              <td>AM/FM Sterio</td>            </tr>            <tr class="dark">              <td>Rear Defroster</td>              <td>Power Mirrors</td>            </tr>            <tr class="light">              <td>Mach Audio System</td>              <td> </td>            </tr>            <tr class="dark">              <td> </td>              <td> </td>            </tr>            <tr class="light">              <td colspan="2"><strong>                <center>                  Safety Features                </center>              </strong></td>            </tr>            <tr class="dark">              <td>ABS Brakes</td>              <td>Driver/Passenger Air Bags</td>            </tr>            <tr class="light">              <td> </td>              <td> </td>            </tr>            <tr class="dark">              <td colspan="2"><strong>                <center>                  Exterior                </center>              </strong></td>            </tr>            <tr class="light">              <td>Rear Spoiler</td>              <td>Tinted Glass</td>            </tr>            <tr class="dark">              <td>Hood Scoop</td>              <td> </td>            </tr>          </tbody>        </table>      </div>      <!-- DETAILED SPECS END -->    </div>    <div id="column">      <h2 class="title">Video</h2>      <iframe width="420" height="315" src="http://www.youtube.com/embed/82Q4QCbkSDU" frameborder="1" allowfullscreen></iframe>    </div>    <br class="clear" />    <br class="clear" />  </div></div><!-- TemplateEndEditable --><div class="wrapper col6">  <div id="footer">    <div id="contactform">      <h2> Contact Us</h2>      <form action="#" method="post">        <fieldset>        <legend>Contact Form</legend>        <label for="fullname">Name:        <input id="fullname" name="fullname" type="text" value="" />        </label>        <label for="emailaddress" class="margin">Email:        <input id="emailaddress" name="emailaddress" type="text" value="" />        </label>        <label for="message">Message:<br />        <textarea id="message" name="message" cols="40" rows="4"></textarea>        </label>        <p>          <input id="submitform" name="submitform" type="submit" value="Submit" />                     <input id="resetform" name="resetform" type="reset" value="Reset" />        </p>        </fieldset>      </form>    </div>    <!-- End Contact Form -->    <div id="compdetails">      <div id="officialdetails">        <h2>Company Information</h2>        <ul>          <li>Copyright © 2012 - All Rights Reserved</li>          <li>Kentucky Mustang Auto Sales</li>        </ul>              </div>      <div id="contactdetails">        <h2>Our Contact Details</h2>        <ul>          Kentucky Mustang Auto Sales          <li></li>          <li>985 Double Gate Road</li>          <li>Jeffersonville, KY 40337</li>          <li>Phone: (859) 498-7570</li>          <li>Email: sales@kentuckymustang.com</li>          <li> YouTube: <a href="http://www.youtube.com/user/KentuckyMustang">Kentucky Mustang</a></li>          <li class="last">Facebook: <a href="https://www.facebook.com/kentuckymustang">Kentucky Mustang</a>      </li>                 </ul>      </div>      <div class="clear"></div>    </div>    <div class="clear"></div>  </div></div><div class="wrapper col7">  <div id="copyright">    <ul>      <li><a href="#">Online Privacy Policy</a></li>      <li><a href="#">Terms of Use</a></li>      <li><a href="#">Permissions & Trademarks</a></li>      <li><a href="#">Product License Agreements</a></li>      <li class="last">Template by <a target="_blank" href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></li>    </ul>  </div></div>
    
    </body></html>
    
    HTML:

    My CSS
    [/FONT][/COLOR]
    /*Template Name: PhotoBusiness
    File: Layout CSS
    Author: OS Templates
    Author URI: http://www.os-templates.com/
    Licence: <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>
    */
    
    
    @import url(navi.css);
    @import url(forms.css);
    @import url(tables.css);
    @import url(gallery.css);
    
    
    body{
        margin:0;
        font-size:12px;
        font-family:verdana, Arial, Helvetica, sans-serif;
        color:#CCCCCC;
        background-color:#2E2E2E;
        padding-top: 0px;
        padding-right: 100px;
        padding-bottom: 50px;
        padding-left: 100px; 
        }
    
    
    img{border:0; padding:0; margin:0;}
    .justify{text-align:justify;}
    .bold{font-weight:bold;}
    .center{text-align:center;}
    .right{text-align:right;}
    .nostart {list-style-type:none; margin:0; padding:0;}
    .clear{clear: both;}
    br.clear{
        clear:both;
        margin-top:-15px;
        text-align: center;
    }
    a{outline:none; text-decoration:none;}
    
    
    .fl_left{float:left;}
    .fl_right{float:right;}
    
    
    .imgl, .imgr{border:1px solid #666666; padding:5px;}
    .imgl{float:left; margin:0 8px 8px 0; clear:left;}
    .imgr{float:right; margin:0 0 8px 8px; clear:right;}
    
    
    /* ----------------------------------------------Wrapper-------------------------------------*/
    
    
    div.wrapper{
        position:relative;
        float:left;
        width:100%;
        margin:0;
        text-align:left;
        }
    
    
    div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
        margin:0 0 20px 0;
        padding:0 0 8px 0;
        font-size:22px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        border-bottom:1px dashed #DDDDDD;
        }
    
    
    .col1{color:#333333; background-color:#000000;}
    .col2{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col3{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col4{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col5{color:#CCCCCC; background-color:#000000; border-bottom:1px solid #3B3B3B;}
    .col5 a{color:#99CC00; background-color:#000000;}
    .col6{color:#FFFFFF; background-color:#1B1B1B; border-bottom:1px solid #3B3B3B;}
    .col7, .col7 a{color:#CCCCCC; background-color:#2E2E2E;}
    
    
    /* ----------------------------------------------Generalise-------------------------------------*/
    
    
    #topbar, #header, #gallery, #cars, #breadcrumb, #container, #footer, #copyright{
        position:relative;
        margin:0 auto;
        display:block;
        width:960px;
        }
    
    
    /* ----------------------------------------------TopBar-------------------------------------*/
    
    
    #topbar{
        height:25px;
        padding:10px 0;
        }
    
    
    /* ----------------------------------------------Header-------------------------------------*/
    
    
    #header{
        padding:0 0 20px 0;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        }
    
    
    #header #logo{
        display:block;
        float:left;
        width:300px;
        }
    
    
    #header h1, #header p{
        margin:0;
        padding:0;
        border:none;
        clear:left;
        font-size:13px;
        text-align: left;
        }
    
    
    #header h1{
        margin-bottom:5px;
        font-size:36px;
        }
    
    
    #header h1 a{
        color:#DBDBDB;
        background-color:#000000;
        }
    
    
    /* ----------------------------------------------Header-------------------------------------*/
    
    
    #cars{
        padding:20px 0 0 0;
        text-transform:;
        font-size:16px;
        font-family:Georgia, "Times New Roman", Times, serif;
        }
    
    
    #cars img{
        margin:0;
        padding:0;
        line-height:normal;
        }
    
    
    #cars ul{
        display:block;
        width:960px;
        margin:0;
        padding:0;
        list-style:none;
        overflow:hidden;
        }
    
    
    #cars li{
        display:block;
        float:left;
        width:234px;
        height:175px;
        margin:0 8px 8px 0;
        padding:0;
        overflow:hidden;
        }
    
    
    #cars li.last{
        margin-right:0;
        }
    
    
    #cars a strong{
        display:none;
        width:100%;
        margin:0;
        padding:7px 0;
        font-weight:normal;
        text-align:center;
        color:#5B5B5B;
        background-color:#232323;
        }
    
    
    #cars a:hover strong{
        display:block;
        }
    
    
    /* ----------------------------------------------BreadCrumb-------------------------------------*/
    
    
    #breadcrumb{
        padding:15px 0;
        }
    
    
    #breadcrumb a{color:#99CC00; background-color:#000000;}
    
    
    #breadcrumb ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #breadcrumb ul li{display:inline;}
    #breadcrumb ul li.current a{text-decoration:underline;}
    
    
    /* ----------------------------------------------Content-------------------------------------*/
    
    
    #container{
        padding:15px 0;
        }
    
    
    #container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
        margin:0 0 15px 0;
        padding:0 0 8px 0;
        color:#CCCCCC;
        background-color:#000000;
        border-bottom:1px solid #CCCCCC;
        }
    
    
    #content{
        display:block;
        float:left;
        width:600px;
        }
    #body{
        width: 100%;
        height:100%;
    }
    /* ------Comments-----*/
    
    
    #comments{margin-bottom:40px;}
    
    
    #comments .commentlist {margin:0; padding:0;}
    
    
    #comments .commentlist ul{margin:0; padding:0; list-style:none;}
    
    
    #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
    
    
    #comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
    #comments .commentlist li.comment_odd a{color:#3E7060; background-color:#F7F7F7;}
    
    
    #comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
    #comments .commentlist li.comment_even a{color:#3E7060; background-color:#E8E8E8;}
    
    
    #comments .commentlist .author .name{font-weight:bold;}
    #comments .commentlist .submitdate{font-size:smaller;}
    
    
    #comments .commentlist p {margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
    
    
    #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
    
    
    /* ----------------------------------------------Column-------------------------------------*/
    
    
    #column{
        display:block;
        float:right;
        width:300px;
        }
    
    
    .flickrbox ul{
        margin:0;
        padding:0;
        list-style:none;
        }
        
    .flickrbox li{
        display:block;
        float:left;
        width:80px;
        height:80px;
        margin:0 15px 15px 0;
        padding:4px;
        border:1px solid #666666;
        }
    
    
    .flickrbox li.last{margin-right:0;}
    
    
    #column .holder, #column #featured{
        display:block;
        width:300px;
        margin-bottom:20px;
        }
    
    
    #column .holder p{
        line-height:1.6em;
        }
    
    
    #column h2{
        font-size:20px;
        }
    
    
    #column .holder h2.title{
        display:block;
        width:100%;
        height:65px;
        margin:0;
        padding:15px 0 0 0;
        font-size:20px;
        line-height:normal;
        border-bottom:1px dashed #666666;
        }
    
    
    #column .holder h2.title img{
        float:left;
        margin:-15px 8px 0 0;
        padding:5px;
        border:1px solid #666666;
        }
    
    
    #column .holder p.readmore{
        display:block;
        width:100%;
        font-weight:bold;
        text-align:right;
        line-height:normal;
        }
    
    
    #column div.imgholder{
        display:block;
        width:290px;
        margin:0 0 10px 0;
        padding:4px;
        border:1px solid #666666;
        }
        
    /* Featured Block */
    
    
    #column #featured a{
        color:#99CC00;
        background-color:#161616;
        }
    
    
    #column #featured ul, #column #featured h2, #column #featured p{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #column #featured li{
        display:block;
        width:250px;
        margin:0;
        padding:20px 25px;
        color:#666666;
        background-color:#161616;
        }
    
    
    #column #featured li p{
        line-height:1.6em;
        }
    
    
    #column #featured li p.imgholder{
        display:block;
        width:240px;
        height:90px;
        margin:20px 0 15px 0;
        padding:4px;
        color:#666666;
        background-color:#333333;
        border:1px solid #666666;
        }
    
    
    #column #featured li h2{
        margin:0;
        padding:0 0 14px 0;
        font-size:20px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#666666;
        background-color:#161616;
        line-height:normal;
        border-bottom:1px dashed #666666;
        }
    
    
    #column #featured p.more{
        display:block;
        width:100%;
        margin-top:15px;
        font-weight:bold;
        text-align:right;
        line-height:normal;
        }
    
    
    /* ----------------------------------------------Footer-------------------------------------*/
    
    
    #footer{
        padding:20px 0;
        }
    
    
    #footer a{
        color:#99CC00;
        background-color:#1B1B1B;
        }
    
    
    #footer h2{
        margin:0 0 15px 0;
        padding:0 0 8px 0;
        font-size:22px;
        font-weight:normal;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#CCCCCC;
        background-color:#1B1B1B;
        line-height:normal;
        border-bottom:1px dashed #CCCCCC;
        }
    
    
    #contactform{
        display:block;
        float:left;
        width:350px;
        }
    
    
    /* ------Company Details------*/
    
    
    #compdetails{
        display:block;
        float:right;
        width:550px;
        }
    
    
    #compdetails ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #compdetails li{
        margin:0 0 12px 0;
        }
    
    
    #compdetails li.last{
        margin:0;
        }
    
    
    #officialdetails{float:left}
    #officialdetails li.last{margin-bottom:20px;}
    
    
    #contactdetails{float:right}
    
    
    /* ----------------------------------------------Copyright-------------------------------------*/
    
    
    #copyright{
        padding:20px 0;
        text-align:right;
        }
    
    
    #copyright ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    
    #copyright li{
        display:inline;
        margin-right:8px;
        padding-right:10px;
        border-right:1px solid #CCCCCC;
        }
    
    
    #copyright li.last{
        margin-right:0;
        padding-right:0;
        border-right:none;
        }
    
        
    Code (markup):

     
    drhowarddrfine, Feb 15, 2012 IP
  4. thra1l

    thra1l Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I tried, but I don't have enough status on the forum lol.

    It's this, though: www. kentuckymustangautosales .com
     
    thra1l, Feb 15, 2012 IP
  5. Awais-Aslam

    Awais-Aslam Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    But what is the solution for Supporting css code in Internet Explorer.
     
    Awais-Aslam, Feb 16, 2012 IP