...

View Full Version : Layout of site breaks when browser is resized - refresh



jarv
05-28-2012, 10:20 AM
hi, on my site: http://aet.inpreview.net/test/wordpress/ I am using the responsive layout from getskeleton.com

The problem I am having is when I resize my browser, to ipad (tablet) size and iphone size, the layout breaks unless the browser is refreshed?!

Please help

html


<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>AET</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<link rel="stylesheet" type="text/css" href="stylesheets/base.css">
<link rel="stylesheet" type="text/css" href="stylesheets/skeleton.css">
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css">
<link rel="stylesheet" type="text/css" href="stylesheets/aet.css">
<link rel="stylesheet" type="text/css" href="stylesheets/jqueryslidemenu.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="javascripts/modernizr.custom.32233.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="javascripts/tabs.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#banners ul').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
$("#menu ul li:last-child").addClass("nopadding");
});
</script>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="javascripts/jqueryslidemenu.js"></script>

</head>
<body>

<div class="container">
<div class="nine columns">
<div class="logo"><img src="images/logo.jpg" alt="logo"/></div>
</div>
<div class="seven columns">
<div id="newsletter">
<form method="post" action="#" name="newsletter">
<p>Sign up to out e-newsletter</p>
<input type="text" name="name" value="Name"/><input type="text" name="email" value="email" /><input type="button" name="submit" value="Sign up" />
</form>
</div>
</div>
<div class="sixteen columns">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Systems</a>
<ul>
<li><a href="#" title="AET Flexible Space UFAC">AET Flexible Space UFAC</a></li>
<li><a href="#" title="Solar Hot Water Systems">Solar Hot Water Systems</a></li>
<li><a href="#" title="Solar Cooling">Solar Cooling</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Air Handling Units</a></li>
<li><a href="#">Fan Terminal Units</a></li>
<li><a href="#">Raised Access Floor</a></li>
<li><a href="#">Solar Thermal Collectors</a></li>
<li><a href="#">Chillers Absorption Chillers</a></li>
<li><a href="#">Heat Pump Technology</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">AET what we offer</a>
<ul>
<li><a href="#" title="Design">Design</a></li>
<li><a href="#" title="Supply">Supply</a></li>
<li><a href="#" title="Commissioning">Commissioning</a></li>
<li><a href="#" title="Maintenance">Maintenance</a></li>
</ul>
</li>
<li><a href="#" title="to be developed">to be developed</a>
<ul>
<li><a href="#" title="Offices To Let">Offices To Let</a></li>
<li><a href="#" title="Showsuite / Demo zone">Showsuite / Demo zone</a></li>
<li><a href="#" title="CPD Training">CPD Trainingt</a></li>
<li><a href="#" title="AET Logistics possibly new domain?">AET Logistics possibly new domain?</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Projects</a>
<ul>
<li><a href="#" title="UFAC">UFAC</a></li>
<li><a href="#" title="UFAC">Solar</a></li>
</ul>
</li>
<li><a href="#" title="Contact">Contact</a>
<ul>
<li><a href="#" title="Office location map">Office location map</a></li>
<li><a href="#" title="Distributor">Distributor</a></li>
<li><a href="#" title="Personnel">Personnel</a></li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
<div id="banners">
<ul>
<li>
<h2>Whitehall Quay</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
<img src="images/banner-1lg.jpg" alt="banner 1" />
</li>
<li>
<h2>Whitehall Quay</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
<img src="images/banner-2lg.jpg" alt="banner 2" />
</li>
<li>
<h2>Whitehall Quay</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
<img src="images/banner-3lg.jpg" alt="banner 3" />
</li>
</ul>
</div>
</div>
<div class="sixteen columns">
<div class="spacer">&nbsp;</div>
</div>
<div class="one-third column">
<h4>Services</h4>
<ul id="services">
<li class="aircon"><a href="#"><h5>Air Conditioning</h5></a><span>text</span></li>
<li class="flooring"><a href="#"><h5>Flooring</h5></a><span>text</span></li>
<li class="solarpanels"><a href="#"><h5>Solar Panels</h5></a><span>text</span></li>
</ul>
</div>
<div class="one-third column">
<h4>Distributors</h4>
<div class="map">
<a href="#">View map</a>
</div>
</div>
<div class="one-third column">
<h4>Latest Updates</h4>
<ul id="latest">
<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
</ul>
</div>
<div class="sixteen columns">
<div class="footer">
<strong>Advanced Ergonomic Technologies</strong> Company Registration number 2874101
</div>
</div>
</div><!-- container -->

</body>
</html>

jarv
05-28-2012, 11:36 AM
See Screen grab

http://aet.inpreview.net/test/images/Screen2.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum