Advertising
y u no do it?

Advertising (learn more)
Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

Website not fluid -- messes up when minimized

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

thra1l Peon

Messages:: 2

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

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

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

drhowarddrfine Peon

Messages:: 5,428

Likes Received:: 95

Best Answers:: 7

Trophy Points:: 0

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

thra1l Peon

Messages:

2

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#4

Inna said: ↑

It would be easier to check the alive site. Could not you give the link?
Click to expand...

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
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

(You must log in or sign up to reply here.)

Log in or Sign up

Advertising (learn more)

Website not fluid -- messes up when minimized

thra1l Peon

Inna Peon

drhowarddrfine Peon

thra1l Peon

Awais-Aslam Peon

Log in or Sign up

Advertising (learn more)

Website not fluid -- messes up when minimized

thra1l Peon

Inna Peon

drhowarddrfine Peon

thra1l Peon

Awais-Aslam Peon

Useful Searches