No replies
lisa15
lisa15's picture
Offline
newbie
Last seen: 8 years 14 weeks ago
Timezone: GMT-4
Joined: 2011-04-15
Posts: 4
Points: 8

(Here is the link to the site I'm having problems with: http://www.youvebeenframedorlando.com/home.html)

When the window is resized (made smaller) in IE, the positioning of everything gets totally out of whack.
I've managed to get it to work fine in Firefox.

Any ideas as to what I can do to make the elements behave in IE when the screen is resized the way they do when the screen is resized in Firefox would be much appreciated!

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<!-- TemplateBeginEditable name="doctitle" -->
<title> </title>
<!-- TemplateEndEditable -->
<link href="../stylesheet.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
 
$(document).ready( function(){
 
$(window).load(resizeWindow);
 
// $(window).load(function() { alert('The window is loaded!'); });
 
$(window).bind("resize", resizeWindow);
 
 
  function resizeWindow( e ) {
    if (jQuery.support.cssFloat == false) 
    {
      $foo = $(window).width();
      if ($foo < 1024) 
      {
        $('#staple1, #staple3').css({"right": "0px", "visibility": "hidden"});
 
	    $('#staple2').css({"left": "0px", "visibility": "hidden"});
	  }
 
      else
      {
        $('#staple1, #staple3').css({"right": "-35px", "visibility": "visible"});
 
	    $('#staple2').css({"left": "-20px", "visibility": "visible"});
      }
  }
 
});
</script>
 
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
 
<body class="twoColFixHdr">
 
<div id="sitewrap">
   <div id="header"><center>
   <a href="http://www.youvebeenframedorlando.com/home.html"><img src="../images/logo.gif"/></a>
   </center>
      <div id="staple1"><br clear="all"/>
      </div>
   </div>
 
 
<br clear="all" />
 
 
  <div id="container">
     <div id="staple2"><br clear="all" />
     </div>
 
   <div id="sidebar1">
    <div class="wrap">
     <div id="nav2">
      <div id="nav2top"><a href="../about.html"><img src="../images/aboutframe.gif" alt="" width="135" height="85" /></a><br />
<br /><br />
<br />
 
 
<a href="../pricing.html"><img src="../images/pricingframe.gif" alt="" /></a><br />
<br />
<br />
<br />
 
<a href="../contact.html"><img src="../images/contactframe.gif" alt="" /></a>
      </div>
 
 
      <div id="nav2btm"><br clear="all" />
	  </div>
    </div>
  </div>
</div>
 
  <!-- TemplateBeginEditable name="body" -->
  <div id="mainContent">
    <div class="wrap">
 
<br />
<br />
</div>
 
  <!-- TemplateEndEditable -->  
    <br clear="all" />
 
 
<div id="footer">
<br />
<br />
<br />
<br />
 
 
  <div id="ribbon"><br clear="all" />
  </div>
<br />
 
  <div id="staple3">
<br clear="all"/>
  </div>
 
    <ul class="footerBottom">
		<li><a href="/about.html">About Us</a></li>
		<li><a href="/pricing.html">Pricing</a></li>
		<li><a href="/contact.html">Contact Us</a></li>
 
		<li>Gallery</li>
    </ul>
	<br />
<br />
<br />
<b>
 
	 Via del Sol &nbsp;Orlando, FL 32708 &nbsp; &middot; &nbsp;407-555-4797</b>	
	<br /><br />
 
<br /><span class="copyright">Copyright &copy; 2011 &middot; You've Been Framed &middot; All rights reserved.<br />
</span>
 </div>
 
</div>
</div>
</body>
</html>

And here is the CSS:

/* CSS Document */
 
*  { margin: 0; padding: 0; }
 
body { 
	background: #31201e url(images/g_backgroundTile.jpg) 50% 0 repeat-y scroll; 
	text-align: center;
	}
 
.twoColFixHdr #sidebar1 {
	float: left; /* since this element is floated, need to provide a width */
	width: 190px; 
	margin-left: 8px;
	}
 
.twoColFixHdr #mainContent { 
	width: 700px; 
	float: left; 
	clear: none; 
	margin-left: 32px; 
	}
 
h1 {
	line-height: 23px; 
	margin-bottom: 16px; 
	}
 
h2 {
	line-height: 18px; 
	margin-bottom: 16px; 
	}
 
h3 { 
	font-size: 12px; 
	line-height: 16px; 
	}
 
a { 
	outline: none; 
	color: #a62800; 
	}
 
a img { 
	border: none; 
	}
 
ul, li { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	}
 
p { 
	margin-bottom: 0;
 
	}
 
.clear { 
	clear: both; 
	}
 
 
/* page staples */
#staple1, #staple2, #staple3 { position: absolute; }
 
#ribbon {
	position: absolute;
	}
 
/* header */
#staple1 { 
	right: -30px; 
	bottom: 0; 
	height: 34px; 
	width: 56px; 
	background: url(images/staple1.png) no-repeat;
	}
 
/* content area */
#staple2 { 
	left: -20px; 
	top: 60px; 
	height: 24px; 
	width: 54px; 
	background: url(images/staple2.png) no-repeat; 
	}
 
/* footer */
#staple3 { 
	right: -35px; 
	top: 100px; 
	height: 30px; 
	width: 60px; 
	background: url(images/staple3.png) no-repeat; 
	}
 
#sitewrap {
	width: 100%;
 
  	}
 
#header { 
	text-align: left; 
	width: 955px; 
	height: 250px; 
	margin: 0 auto; 
	position: relative;
	padding-top: 20px;
	padding-bottom: 15px;
	}
 
#header a.logo { 
	position: absolute;
	top: 8px; 
	left: 47px; 
	width: 218px; 
	height: 67px; 
	background:  0 0 no-repeat;
	text-indent: -9999px;
	}	
 
 
 
/* Sidebar - Left Navigation */
#sidebar1 { 
	_margin-left: 5px; 
	}
 
#sidebar1 { 
	clear: both; 
	}
 
#sidebar1 .wrap { 
	padding-right: 10px; 
	}
 
#nav2 { 
	width: 160px; 
	margin-left: 45px; 
	_margin-left: 45px; 
	margin-top: 20px;
 
	}
 
/* Container ---------------------------------- */
#container { 
	text-align: left; 
	width: 940px; 
	margin: 0 auto; 
	padding-right: 25px;
	position: relative;
 
	}
 
.col2Wrap {
	padding-left: 6px;
	}
 
#mainContent {
	float: left;
	width: 680px;
	color: #0F0404;
	}
 
#mainContent .wrap { 
	margin-top: 25px; 
	width: 670px; 
	font-family: Georgia, Arial, serif;
	line-height: 1.2em;
	}
 
#mainContent .wrap h1 {
	font-family: Georgia, Arial, serif; 
	font-size-adjust: none; 
	font-stretch: normal; 
	font-weight: bold; 
	line-height: normal; 
	text-align: left; 
	padding-bottom: 8px; 
	background: bottom left no-repeat; 
	padding-left: 10px;
	padding-right: 30px;
	}
 
#mainContent .wrap p {
	padding-left: 10px;
	font-family: Georgia, Arial, serif;
	font-size: 1em;
	padding-bottom: 20px;
	}
 
#mainContent .wrap h2 {
	font-family: Georgia, Arial, serif;
	font-size: 1em;
	padding-left: 10px;
	font-weight: bold;	
	}
 
#mainContent .wrap ul {
	padding-left: 34px;
	font-family: Georgia, Arial, serif;
	padding-top: 5px;
	}
 
#mainContent .wrap ul li {
	padding-left: 8px;
	list-style-type: disc;
	}
 
#ribbon {
	position: bottom right;
	top: 0px;
	right: 40px;
	height: 180px;
	width: 100px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	background: url(images/sealfinal.gif) no-repeat;
	}
 
#footer { 
	text-align: center; 
	width: 950px; 
	height: 90px; 
	margin: 0 auto; 
	padding-top: 15px; 
	background: no-repeat bottom center; 
	position: relative; 
	font-family: Georgia, Arial, serif; 
	font-size: .9em;
	color: #796244; 
	clear: both; 
	}
 
#footer ul.footerBottom li {
	display: inline; 
	padding-right: 28px; 
	}	
 
#footer span.copyright {
	position: relative; 
	padding-right: 28px; 
	}