Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question Layout of site breaks when browser is resized - refresh

    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
    Code:
    <!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>

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    See Screen grab



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •