When i create the landing page, and go to my preview/debug in browser in my dreamweaver cs6; everything looks good in preview/ debug browser button. When i upload it to my web host it looks stretched in sample1. In sample2, that is what dreamweaver shows me in remote and it looks good. what gives?
Any ideas on how to fix this?
Thanks!
Any ideas on how to fix this?
I would start by looking at the code to make sure it validates. You need to check your HTML as well as CSS.
<http://jigsaw.w3.org/css-validator/>
Or post a link here so that somebody else can do it for you.
Good luck.
Looking at your two screenies, I can see a couple of things:
1. The masthead image is not stretched, but the text within it has reoriented itself.
2. The images below the masthead are stretched with one exception.
3. The text in the captions has re-wrapped.
I think you've got some images at 100% and some containers at 100%. As mytaxsite says, we need to see your code.
<!DOCTYPE HTML>
<html>
<head>
<title>Greater IA Home Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" />
<style type="text/css">
a:link {
color: #FFF;
}
</style>
<link href="backtotop.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none"> </script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<header id="header">
<!-- Logo -->
<h1><a href="home.html" class="mobileUI-site-name">Greater IA Home Search</a></h1>
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item"><a href="#resources">Resources</a></li>
<li> <!--
<li class="current_page_item"><a href="index.html">About</a></li> -->
<li>
<a href="calendar.html" class="arrow">Contact Me</a>
<!-- <ul> -->
<!--(mine) <li><a href="#">resources</a></li> <!--(mine)
<li><a href="#">Home Owners' Insurance</a></li>
<li><a href="#">Credit Restoration</a></li>
<li>
<span class="arrow">Phasellus consequat</span>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li> (mine)--> <!--
<li><a href="right-sidebar.html">515-360-1247</a></li>
<li><a href="left-sidebar.html"><a href="mailto:Matthew.Reeves@cbdsm.com">Matthew.Reeves@cbdsm.com</a></a></li> -->
<!--9mine) <li><a href="no-sidebar.html">Resources</a></li>
</ul> (mine)-->
</nav>
</header>
</div>
</div>
</div>
</div>
<!-- Banner Wrapper -->
<div id="banner-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Banner -->
<div id="banner">
<h2>"Time to invest in a new home, or looking to sell your house?"</h2>
<div id="firstcall">From the first phone call until papers are signed, I will work hard to get your house sold fast!</div>
</p>
<a href=target="_blank"><a href="http://www.matthew-reeves.com" class="button button-big">Begin your search</a>
</a>
<a href="calendar.html" class="button button-big button-alt">Need to sell your home?</a>
</div>
</div>
</div>
</div>
</div>
<p>
<p>
<!-- Top Bar Wrapper ->
<div id="top-bar-wrapper"> (mine)-->
<!-- Search -->
<!--(mine) <div class="5grid-layout">
<div class="row">
<div class="8u">
<section class="box-bar">
<p><strong>Nibh sodales adipiscing in vel quam. Nam erat a posuere laoreet eget nibh sodales.</strong></p>
</section>
</div>
<div class="4u">
<section>
<form method="post" action="#" id="searchbox">
<input type="text" class="text" name="search" />
<input type="submit" class="submit" value="" />
</form>
</section>
</div>
</div>
</div>
</div> (mine)-->
<!-- Main Wrapper -->
<!- <div id="main-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<section>
<!-- <header class="featured-heading"><strong>Resources</strong></header> -->
<div id="featured" class="5grid">
<div class="row">
<div class="3u">
<!-- Feature #1 -->
<section>
<header>
<h2><a id="loans"></a>Loans and Credit Score</h2>
</header>
<a href="Loans.html" class="image image-full"><img src="Approved262136.jpg" width="262" height="127"></a>
<p>Are you curious what your credit score is or just looking for a loan? These preferred local providers excel in creating strategies that will start you down the right path to saving you time and energy to get you into your new home.</p>
</section>
<!-- Feature Ends -->
</div>
<div class="3u">
<!-- Feature #2 -->
<section>
<header>
<h2><a id="insurance"></a>Home Owners Insurance</h2>
</header>
<a href="Insurance.html" class="image image-full"><img src="Home-Insurance-Quote262136.jpg" width="262" height="127"></a>
<p>If you need assistance insuring your new home, check out these preferred local providers.</p>
</section>
<!-- Feature Ends -->
</div>
<div class="3u">
<!-- Feature #3 -->
<section>
<header>
<h2>Credit Restoration</h2>
</header>
<a href="http://www.heartlandcreditrestoration.com/" target="_blank" class="image image-full"><img src="edit heartland-1.jpg" width="262" height="127"></a>
<p>Need help getting your credit above 620? Credit Restoration will help speed up the process in getting you into your new dream home.</p>
</section>
<!-- Feature Ends -->
</div>
<div class="3u">
<!-- Feature #4 -->
<section>
<header>
<h2>Iowa Finance Authority</h2>
</header>
<div id="ifa"><a href="http://iowafinanceauthority.gov/Home/Index"><img src="IFA.JPG" width="262" height="75"></a></div>
<p>The Iowa Finance Authority (IFA) offers a variety of programs that address a continuum of housing needs, from homeless assistance to multifamily rental and homeownership.
</p>
</section>
<!-- Feature Ends --> <!--(mine)
</div>
</div>
</div>
</section>
</div>
</div>
<div id="main" class="row"> (mine)-->
<!-- Content Area -->
<!--(mine) <div id="content" class="8u">
<section>
<header class="title">
<h2>Ipsum feugiat consequat</h2>
</header>
</section>
<article class="box box-post">
<header>
<h2>Venenatis et consequat</h2>
<span class="posted">Posted by <a href="#">John Doe</a> on Tuesday, March 5, 2013</span>
</header>
<a href="#" class="image image-left"><img src="images/pic05.jpg" alt=""></a>
<p><strong>Vivamus ut mauris tempus</strong> sodales adipiscing in vel quam. Nam erat a posuere laoreet eget nibh sodales adipiscing in vel dolore. Phasellus vitae tristique dui. Duis arcu tortor, fringilla sed venenatis sed, pharetra ac velit. Sed in volutpat nisl. Mauris vel sagittis diam. Lorem ipsum dolor sit amet, consectetur sed adipiscing elit. Pellentesque nec metus <a href="#">feugiat lorem tempus suscipit</a> eros quis accumsan. Phasellus vitae tristique dui. Duis arcu tortor, fringilla sed venenatis sed, pharetra ac velit. Sed in volutpat nisl dolore ipsum.</p>
<a href="#" class="button">Continue Reading</a>
</article>
<article class="box-post">
<header>
<h2>Duis tortor fringilla lorem</h2>
<span class="posted">Posted by <a href="#">John Doe</a> on Tuesday, March 5, 2013</span>
</header>
<a href="#" class="image image-left"><img src="images/pic06.jpg" alt=""></a>
<p><strong>Vivamus ut mauris tempus</strong> sodales adipiscing in vel quam. Nam erat a posuere laoreet eget nibh sodales adipiscing in vel dolore. Phasellus vitae tristique dui. Duis arcu tortor, fringilla sed venenatis sed, pharetra ac velit. Sed in volutpat nisl. Mauris vel sagittis diam. Lorem ipsum dolor sit amet, consectetur sed adipiscing elit. Pellentesque nec metus <a href="#">feugiat lorem tempus suscipit</a> eros quis accumsan. Phasellus vitae tristique dui. Duis arcu tortor, fringilla sed venenatis sed, pharetra ac velit. Sed in volutpat nisl dolore ipsum.</p>
<a href="#" class="button">Continue Reading</a>
</article>
</div> (mine)-->
<!-- End Content Area -->
<!-- Sidebar Area -->
<!--(mine) <div id="sidebar" class="4u">
<section class="box">
<header class="title">
<h2>Recent Posts</h2>
</header>
<ul class="style3">
<li class="first">
<p class="date">Mar<b>2</b></p>
<h3><a href="#">Amet sed volutpat mauris</a></h3>
<p>Mauris tempus nibh sodales adipiscing dolore.</p>
</li>
<li>
<p class="date">Feb<b>28</b></p>
<h3><a href="#">Sagittis diam dolor sit amet</a></h3>
<p>Duis arcu tortor fringilla sed venenatis sed magna.</p>
</li>
<li>
<p class="date">Feb<b>25</b></p>
<h3><a href="#">Adipiscing sed consequat</a></h3>
<p>Pharetra ac velit sed in volutpat nisl mauris vel.</p>
</li>
<li>
<p class="date">Feb<b>20</b></p>
<h3><a href="#">Fringilla venenatis sed lorem</a></h3>
<p>Sagittis diam lorem ipsum dolor sit amet dolor.</p>
</li>
<li>
<p class="date">Feb<b>15</b></p>
<h3><a href="#">Vitae tristique sed posuere</a></h3>
<p>Lorem ipsum dolor sit amet feugiat consequat.</p>
</li>
</ul>
<a href="#" class="button">Browse Archive</a>
</section>
<section>
<header class="title">
<h2>Recent Images</h2>
</header>
<div class="do-5grid box-gallery">
<div class="row">
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic07.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic08.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic09.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic10.jpg" alt=""></a></div>
</div>
<div class="row">
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic11.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic12.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic13.jpg" alt=""></a></div>
<div class="do-3u"><a href="#" class="image image-full"><img src="images/pic14.jpg" alt=""></a></div>
</div>
</div>
<a href="#" class="button">Browse Gallery</a>
</section>
</div> (mine)-->
<!-- End Sidebar Area --> <!--(mine)
</div>
</div>
</div> (mine)-->
<!-- Bottom Bar Wrapper --> <!--(mine)
<div id="bottom-bar-wrapper"> (mine)-->
<!-- Sponsors --> <!--(mine)
<div class="5grid-layout">
<div class="row">
<div class="12u">
<section>
<ul class="style4">
<li><a href="#"><img src="css/images/logo01.png" width="180" height="60" alt=""></a></li>
<li><a href="#"><img src="css/images/logo02.png" width="180" height="60" alt=""></a></li>
<li><a href="#"><img src="css/images/logo03.png" width="180" height="60" alt=""></a></li>
<li><a href="#"><img src="css/images/logo04.png" width="180" height="60" alt=""></a></li>
<li><a href="#"><img src="css/images/logo05.png" width="180" height="60" alt=""></a></li>
<li><a href="#"><img src="css/images/logo06.png" width="180" height="60" alt=""></a></li>
</ul>
</section>
</div>
</div>
</div>
</div> (mine)-->
<!-- Footer Wrapper --> <!--(mine)
<div id="footer-wrapper">
<div id="footer" class="5grid-layout">
<div class="row">
<div class="8u">
<section>
<header>
<h2>Ipsum feugiat consequat</h2>
</header>
<ul class="style3 style3-alt">
<li class="first">
<p class="date">Mar<b>2</b></p>
<h3><a href="#">Amet sed volutpat mauris</a></h3>
<p>Mauris tempus nibh sodales adipiscing dolore feugiat consequat et ipsum dolor sit.</p>
</li>
<li>
<p class="date">Feb<b>28</b></p>
<h3><a href="#">Sagittis diam dolor sit amet</a></h3>
<p>Duis arcu tortor fringilla sed venenatis sed magna blandit feugiat amet dolore lorem.</p>
</li>
<li>
<p class="date">Feb<b>25</b></p>
<h3><a href="#">Adipiscing sed consequat</a></h3>
<p>Pharetra ac velit sed in volutpat nisl mauris vel.veroeros sed tempus consequat nisl.</p>
</li>
<li>
<p class="date">Feb<b>20</b></p>
<h3><a href="#">Fringilla venenatis sed lorem</a></h3>
<p>Sagittis diam lorem ipsum dolor sit amet dolor sed in volutpat nisl mauris magna.</p>
</li>
<li>
<p class="date">Feb<b>15</b></p>
<h3><a href="#">Vitae tristique sed posuere</a></h3>
<p>Lorem ipsum dolor sit amet feugiat consequat tortor fringilla sed venenatis etiam.</p>
</li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Adipiscing etiam</h2>
</header>
<a href="#" class="image image-full"><img src="images/pic15.jpg" alt=""></a>
<p>Vivamus ut mauris tempus sodales adipiscing in vel quam. Nam erat a posuere laoreet eget nibh sodales adipiscing in vel dolore. Phasellus vitae tristique dui. Duis arcu tortor, fringilla sed venenatis sed, pharetra ac velit. Sed in volutpat nisl. Mauris vel sagittis.</p>
<a href="#" class="button">Ipsum feugiat consequat</a>
</section>
</div>
</div> (mine)-->
<!-- Footer --> <!--(mine)
<div class="row">
<div class="4u">
<section>
<header>
<h2>Magna lorem</h2>
</header>
<ul class="style1">
<li class="first"><a href="#">Dolore feugiat consequat et amet nullam</a></li>
<li><a href="#">Mauris vel.veroeros nisl feugiat lorem</a></li>
<li><a href="#">Sed in volutpat nisl mauris tempus. nulla</a></li>
<li><a href="#">Dolore feugiat consequat et amet nullam</a></li>
<li><a href="#">Blandit feugiat lorem diam nullam dolore</a></li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Sed consequat</h2>
</header>
<ul class="style1">
<li class="first"><a href="#">Dolore feugiat consequat et amet nullam</a></li>
<li><a href="#">Mauris vel.veroeros nisl feugiat lorem</a></li>
<li><a href="#">Sed in volutpat nisl mauris tempus. nulla</a></li>
<li><a href="#">Dolore feugiat consequat et amet nullam</a></li>
<li><a href="#">Blandit feugiat lorem diam nullam dolore</a></li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Nisl duis fringilla</h2>
</header>
<ul class="contact">
<li><a href="#" class="contact01">Contact-01</a></li>
<li><a href="#" class="contact02">Contact-02</a></li>
<li><a href="#" class="contact03">Contact-03</a></li>
<li><a href="#" class="contact04">Contact-04</a></li>
<li><a href="#" class="contact05">Contact-05</a></li>
</ul>
<ul class="style5">
<li class="first">
<span class="address">Address</span>
<span class="address-01">1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
</li>
<li>
<span class="mail">Mail</span>
<span class="mail-01"><a href="#">someone@untitled.tld</a></span>
</li>
<li>
<span class="phone">Phone</span>
<span class="phone-01">(000) 000-0000</span>
</li>
</ul> (mine)-->
</section>
</div>
</div>
<div align="center"><!-- Footer Ends Here -->
<!--(mine) back to top icon(mine)-->
<a id="resources"></a><a href="#top">Back to top </a>
<!-- Copyright -->
</div>
<div class="row">
<div class="12u">
<div id="copyright">
<span>Matthew Reeves 1401 50th Street, Suite 105, West Des Moines, IA 50266 ©2013, Coldwell Banker Mid-America Group, REALTORS - Serving Des Moines area. Licensed in Iowa. Equal Housing Opportunity. West Des Moines, Iowa. The Coldwell Banker name and trade mark are licensed to Coldwell Banker Real Estate LLC. Each office is independently owned and operated.</span>
</div>
</div>
</div>
<!-- Copyright Ends Here -->
</div>
</div>
</body>
</html>
CORE.CSS
/*****************************************************************/
/* 5grid 0.4.3 by n33.co | MIT+GPLv2 license licensed */
/* core.css: Core stylesheet */
/*****************************************************************/
/**************************************************/
/* Resets (by meyerweb.com/eric/tools/css/reset/) */
/**************************************************/
html, body, span , div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer , hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
z-index: 100;
font-family: inherit;
color: #FFF;
border-radius: 8px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*********************/
/* Grid */
/*********************/
.\35 grid .\31 2u { width: 100%; } .\35 grid .\31 1u { width: 91.5%; } .\35 grid .\31 0u { width: 83%; } .\35 grid .\39 u { width: 74.5%; } .\35 grid .\38 u { width: 66%; } .\35 grid .\37 u { width: 57.5%; } .\35 grid .\36 u { width: 49%; } .\35 grid .\35 u { width: 40.5%; } .\35 grid .\34 u { width: 32%; } .\35 grid .\33 u { width: 23.5%; } .\35 grid .\32 u { width: 15%; } .\35 grid .\31 u { width: 6.5%; }
.\35 grid .\31 u, .\35 grid .\32 u, .\35 grid .\33 u, .\35 grid .\34 u, .\35 grid .\35 u, .\35 grid .\36 u, .\35 grid .\37 u, .\35 grid .\38 u, .\35 grid .\39 u, .\35 grid .\31 0u, .\35 grid .\31 1u, .\35 grid .\31 2u {
margin: 1% 0 1% 2%;
float: left;
}
.\35 grid:after {
content: '';
display: block;
clear: both;
height: 0;
}
.\35 grid-flush .\31 2u { width: 100% !important; } .\35 grid-flush .\31 1u { width: 91.6666666667% !important; } .\35 grid-flush .\31 0u { width: 83.3333333333% !important; } .\35 grid-flush .\39 u { width: 75% !important; } .\35 grid-flush .\38 u { width: 66.6666666667% !important; } .\35 grid-flush .\37 u { width: 58.3333333333% !important; } .\35 grid-flush .\36 u { width: 50% !important; } .\35 grid-flush .\35 u { width: 41.6666666667% !important; } .\35 grid-flush .\34 u { width: 33.3333333333% !important; } .\35 grid-flush .\33 u { width: 25% !important; } .\35 grid-flush .\32 u { width: 16.6666666667% !important; } .\35 grid-flush .\31 u { width: 8.3333333333% !important; }
.\35 grid-flush .\31 u, .\35 grid-flush .\32 u, .\35 grid-flush .\33 u, .\35 grid-flush .\34 u, .\35 grid-flush .\35 u, .\35 grid-flush .\36 u, .\35 grid-flush .\37 u, .\35 grid-flush .\38 u, .\35 grid-flush .\39 u, .\35 grid-flush .\31 0u, .\35 grid-flush .\31 1u, .\35 grid-flush .\31 2u {
margin: 0 !important;
}
.do-5grid .do-12u { width: 100%; } .do-5grid .do-11u { width: 91.5%; } .do-5grid .do-10u { width: 83%; } .do-5grid .do-9u { width: 74.5%; } .do-5grid .do-8u { width: 66%; } .do-5grid .do-7u { width: 57.5%; } .do-5grid .do-6u { width: 49%; } .do-5grid .do-5u { width: 40.5%; } .do-5grid .do-4u { width: 32%; } .do-5grid .do-3u { width: 23.5%; } .do-5grid .do-2u { width: 15%; } .do-5grid .do-1u { width: 6.5%; }
.do-5grid .do-1u, .do-5grid .do-2u, .do-5grid .do-3u, .do-5grid .do-4u, .do-5grid .do-5u, .do-5grid .do-6u, .do-5grid .do-7u, .do-5grid .do-8u, .do-5grid .do-9u, .do-5grid .do-10u, .do-5grid .do-11u, .do-5grid .do-12u {
margin: 1% 0 1% 2%;
float: left;
}
.do-5grid:after {
content: '';
display: block;
clear: both;
height: 0;
}
.do-5grid-flush .do-12u { width: 100%; } .do-5grid-flush .do-11u { width: 91.6666666667%; } .do-5grid-flush .do-10u { width: 83.3333333333%; } .do-5grid-flush .do-9u { width: 75%; } .do-5grid-flush .do-8u { width: 66.6666666667%; } .do-5grid-flush .do-7u { width: 58.3333333333%; } .do-5grid-flush .do-6u { width: 50%; } .do-5grid-flush .do-5u { width: 41.6666666667%; } .do-5grid-flush .do-4u { width: 33.3333333333%; } .do-5grid-flush .do-3u { width: 25%; } .do-5grid-flush .do-2u { width: 16.6666666667%; } .do-5grid-flush .do-1u { width: 8.3333333333%; }
.do-5grid-flush .do-1u, .do-5grid-flush .do-2u, .do-5grid-flush .do-3u, .do-5grid-flush .do-4u, .do-5grid-flush .do-5u, .do-5grid-flush .do-6u, .do-5grid-flush .do-7u, .do-5grid-flush .do-8u, .do-5grid-flush .do-9u, .do-5grid-flush .do-10u, .do-5grid-flush .do-11u, .do-5grid-flush .do-12u {
margin: 0 !important;
}
/*********************/
/* Mobile */
/*********************/
#mobileUI-site-titlebar {
text-align: center;
}
#mobileUI-site-nav-opener {
top: 0;
left: 0;
}
#mobileUI-site-nav {
}
#mobileUI-site-nav-inner {
}
.mobileUI-site-nav-link {
display: block;
}
.mobileUI-site-nav-link .indent-1 { display: inline-block; width: 1em; }
.mobileUI-site-nav-link .indent-2 { display: inline-block; width: 2em; }
.mobileUI-site-nav-link .indent-3 { display: inline-block; width: 3em; }
.mobileUI-site-nav-link .indent-4 { display: inline-block; width: 4em; }
.mobileUI-site-nav-link .indent-5 { display: inline-block; width: 5em; }
.mobileUI-site-nav-link .indent-6 { display: inline-block; width: 6em; }
.mobileUI-site-nav-link .indent-7 { display: inline-block; width: 7em; }
.mobileUI-site-nav-link .indent-8 { display: inline-block; width: 8em; }
.mobileUI-site-nav-link .indent-9 { display: inline-block; width: 9em; }
.mobileUI-site-nav-link .indent-10 { display: inline-block; width: 10em; }
#donations {
text-align: center;
font-weight: bolder;
font-size: 16px;
}
#iPadRules {
text-align: justify;
font-size: 16px;
position: relative;
line-height: 2em;
width: 720px;
left: 180px;
}
#karsjens {
}
#schraderbacher {
}
#integratedins {
top: 10px;
padding-top: -100px;
padding-left: 300px;
}
}
#jeffstark {
width: 150px;
}
#wellsfargo {
background-color: #FFF;
width: 523px;
height: 210px;
margin-left: 327px;
padding: 10px;
}
#starkcontact {
margin-top: -190px;
margin-left: 155px;
overflow: hidden;
width: 190px;
}
#wellslogo {
margin-left: 320px;
margin-top: -155px;
z-index: 100;
}
#greateriacredit {
background-color: #FFF;
width: 523px;
margin-left: 325px;
padding: 10px;
}
#kreigercontact {
margin-left: 490px;
margin-top: -180px;
}
#greaterlogo {
margin-left: 675px;
z-index: 100;
margin-top: -150px;
}
#consumer loan {
background-color: #FFF;
width: 523px;
height: 100px;
}
#consumerloansllc {
background-color: #FFF;
height: 168px;
width: 523px;
margin-left: 325px;
margin-top: 85px;
padding: 10px;
}
#abrahamzon {
}
#consumercontact {
color: #000;
margin-left: 160px;
margin-top: -150px;
}
.fontcolor {
color: #CC0001;
}
#logofooter {
color: #CC0001;
font-size: 16px;
}
#clvlogo {
z-index: 100;
margin-left: 210px;
margin-top: -55px;
}
#insurance {
}
#cappspic {
margin-top: 80px;
}
#integrated_insurance {
margin-left: 320px;
margin-top: -129px;
background-color: #FFF;
padding: 10px;
width: 523px;
height: 153px;
display: block;
}
#asset_protection {
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 320px;
background-color: #FFF;
padding: 10px;
height: 157px;
width: 523px;
}
#capps {
}
#integrated_logo {
margin-top: -50px;
margin-left: -45px;
float: right;
}
#integrated_contact {
}
#integrated_contact {
color: #000;
margin-top: -143px;
margin-left: 150px;
}
.cappscolor {
color: #26416E;
}
#integrated_logo {
margin-top: 15px;
margin-left: -10px;
}
#asset_contact {
color: #000;
margin-left: 450px;
margin-top: -140px;
z-index: 100;
overflow: hidden;
display: block;
}
#Asset_logo {
margin-left: 450px;
margin-top: 10px;
}
#ifa {
background-color: #FFF;
height: 127px;
width: 262px;
padding-top: 22px;
}
#firstcall {
color: #FFF;
font-size: 24px;
text-align: center;
}
Style-Desktop.css
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
.button
{
font-size: 1.25em;
padding: 1.3em 2.2em 1.3em 2.2em;
letter-spacing: -0.035em;
}
.button-big
{
padding: 1.4em 2.5em;
font-size: 1.25em;
}
.title h2
{
font-size: 3em;
line-height: normal;
}
.title h2:after
{
width: 100%;
height: 4px;
margin: 0 0 0 30px;
top: 8px;
}
.box-post
{
padding: 1em 0em 3em 0em;
}
.box-post header
{
margin-bottom: 3em;
}
.box-post h2
{
letter-spacing: -2px;
font-size: 3em;
}
.box-post .posted
{
padding-top: 1em;
}
/*********************************************************************************/
/* Wrappers */
/*********************************************************************************/
#header-wrapper
{
padding: 1em 0 1em 0;
}
#banner-wrapper
{
padding-top: 40em;
padding-right: 0;
padding-bottom: 8em;
padding-left: 0;
}
#top-bar-wrapper
{
padding: 2em 0 2em 0;
}
#top-bar-wrapper p
{
line-height: 3em;
}
#main-wrapper
{
background-color: #26416e;
padding-top: 5em;
padding-right: 0;
padding-bottom: 0em;
padding-left: 0;
font-size: medium;
}
#bottom-bar-wrapper
{
padding: 2em 0 2em 0;
}
#bottom-bar-wrapper p
{
line-height: 3em;
}
#footer-wrapper
{
padding: 8em 0 8em 0;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
overflow: hidden;
position: relative;
height: 3em;
}
#header h1
{
position: absolute;
top: -5px;
left: 0;
line-height: 3em;
font-size: x-large;
overflow: visible;
text-shadow: 2px 2px 1px #000000;
}
#header h1 a
{
letter-spacing: -1px;
font-weight: 600;
text-decoration: none;
color: #FFFFFF;
font-size: 1.0em;
z-index: auto;
background-color: #26416e;
padding-bottom: 0px;
margin-top: 0px;
clip: rect(-5px,0px,0px,0px);
margin-left: 200px;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
overflow: hidden;
position: relative;
right: 0;
top: 0;
margin-left: 900px;
}
#nav ul
{
margin: 0;
padding: 0;
text-align: center;
}
#nav > ul > li > ul
{
display: none;
}
#nav li
{
float: left;
display: inline-block;
margin: 0em 0.50em;
}
#nav a
{
display: inline-block;
border-radius: 6px;
text-decoration: none;
font-size: 1.15em;
font-weight: 400;
color: #FFFFFF;
-moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;
-webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;
-o-transition: background-color .2s ease-in-out, color .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out, color .2s ease-in-out;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
outline: 0;
margin-top: 15px;
padding-top: 0.7em;
padding-right: 1.2em;
padding-bottom: 0.7em;
padding-left: 1.2em;
}
#nav a:hover, #nav .current_page_item a, #nav li.active a
{
/* [disabled]background-color: #2F2F2F; */
color: #FFFFFF;
margin-top: 15px;
}
#nav li.active a
{
xborder-bottom-left-radius: 0;
xborder-bottom-right-radius: 0;
}
.dropotron
{
background-color: #393939;
background-image: -moz-linear-gradient(top, rgba(83,83,83,1), rgba(57,57,57,0));
background-image: -webkit-linear-gradient(top, rgba(83,83,83,1), rgba(57,57,57,0));
background-image: -o-linear-gradient(top, rgba(83,83,83,1), rgba(57,57,57,0));
background-image: -ms-linear-gradient(top, rgba(83,83,83,1), rgba(57,57,57,0));
background-image: linear-gradient(top, rgba(83,83,83,1), rgba(57,57,57,0));
border-radius: 6px;
padding: 1.25em 0 1.25em 0;
min-width: 15em;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.15);
}
.dropotron a,
.dropotron span
{
font-size: 1.15em;
font-weight: 400;
color: #999;
display: block;
text-decoration: none;
padding: 0.65em 1.25em 0.65em 1.25em;
-moz-transition: color .2s ease-in-out, color .2s ease-in-out;
-webkit-transition: color .2s ease-in-out, color .2s ease-in-out;
-o-transition: color .2s ease-in-out, color .2s ease-in-out;
-ms-transition: color .2s ease-in-out, color .2s ease-in-out;
transition: color .2s ease-in-out, color .2s ease-in-out;
}
.dropotron li:hover > a,
.dropotron li:hover > span
{
color: #fff;
}
.dropotron-level-0
{
margin-top: 1.5em;
}
.dropotron-level-0:before
{
content: '';
position: absolute;
left: 20px;
top: -10px;
border-bottom: solid 10px #535353;
border-left: solid 10px rgba(0,0,0,0);
border-right: solid 10px rgba(0,0,0,0);
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
}
#banner h2
{
margin-bottom: 0px;
font-size: 4em;
font-family: "Times New Roman", Times, serif;
}
#banner p
{
font-size: 1.5em;
margin: 0 0 2em 0;
font-family: "Times New Roman", Times, serif;
}
#banner .button
{
margin-top: 0;
margin-right: 0.75em;
margin-bottom: 0;
margin-left: 2em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
}
#footer header
{
margin-bottom: 3em;
}
#footer header h2
{
font-size: 1.4em;
line-height: normal;
}
#footer header h2:after
{
width: 100%;
height: 4px;
margin: 0 0 0 30px;
top: 8px;
}
#footer .image
{
margin-bottom: 2em;
}
#footer .row
{
padding-top: 6em;
}
#footer .row:first-child
{
padding-top: 0;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#main
{
padding: 0 0 4em 0;
}
.homepage #main
{
padding: 5em 0em 0em 0em;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content
{
padding-right: 0em;
}
.left-sidebar #content
{
padding-left: 2.5em;
}
.homepage #content .image
{
padding-top: 0;
}
#content .image
{
padding-top: 0.7em;
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar
{
}
#sidebar header
{
margin-bottom: 3em;
}
#sidebar section
{
margin-bottom: 4em;
padding: 0em 0em 5em 0em;
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright
{
margin-top: 0em;
font-size: 18px;
}
#copyright span
{
padding-top: 1.2em;
padding-right: 2em;
padding-bottom: 1.2em;
padding-left: 2em;
font-size: 14px;
}
/*********************************************************************************/
/* Searchbox */
/*********************************************************************************/
#searchbox
{
position: relative;
}
#searchbox .text
{
width: 100%;
padding: 0.85em 3.25em 0.85em 0.75em;
font-size: 1em;
}
#searchbox .submit
{
width: 3em;
height: 3em;
border: 0;
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
}
#featured header
{
margin-bottom: 2em;
}
#featured header h2
{
font-size: 1.2em;
}
#featured .image
{
margin-bottom: 1.5em;
}
.featured-heading
{
margin-bottom: 5em;
font-size: 1.6em;
background-color: #26416e;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 1em;
padding-left: 2em;
margin-top: 0px;
}
.featured-heading:before
{
width: 40%;
height: 4px;
top: 8px;
left: 0;
margin: 0em 0em 0em 0em;
}
.featured-heading:after
{
width: 40%;
top: 8px;
height: 4px;
margin-left: 2em;
}
Sure looks like there's lots of invalid HTML there. Can you check it at http://validator.w3.org?
Yeah, I ended up restarting the whoole thing. The CSS coding was all messed up statewide and just easier to start over. I did start validating everything and its starting to look a lot better now. its running smoother.