PDA

Click to See Complete Forum and Search --> : IE7 jumping DIV problem upon browser resize

boycottIE
01-23-2009, 03:47 PM
I hope this is a simple problem to solve, but I have no idea how to fix it. The site works fine in FF, Opera, Safari. I don't know about IE6 because I no longer have access to it, but in IE7 there is a problem with one of my DIVs jumping down and breaking the page layout.

It happens when I resize the browser window so that the width is smaller than about 750px.

The site is:

http://www.indiana.edu/~meis/

Here's the HTML and (I think) the relevant CSS. Any help is greatly appreciated. Thank you!

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 name="Keywords" content="Middle Eastern and Islamic Studies Program, IU Bloomington Middle Eastern and Islamic Studies, Middle East, Islam, IU, Indiana University" />
<meta name="Description" content="Indiana University Middle Eastern and Islamic Studies." />

<title>Middle Eastern and Islamic Studies: Indiana University</title>

<!-- BEGIN INDIANA UNIVERSITY BLOOMINGTON BRANDING BAR AND FOOTER STYLES -->

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

<!-- END INDIANA UNIVERSITY BLOOMINGTON BRANDING BAR AND FOOTER STYLES -->

<!-- Following are workaround for IE rendering problems -->
<!--[if gte IE 7]>
<link href="css/ie7styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lte IE 6]>
<link href="css/ie6styles.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>


<div id="skipnav">
<a href="#skip">Skip to main content</a>
<a href="#navigation">Skip to navigation bar links</a>

</div>

<!-- BEGIN INDIANA UNIVERSITY BLOOMINGTON BRANDING BAR -->
<div id="identity">
<div id="signature">
<a href="http://www.iub.edu/" class="iub" title="Indiana University Bloomington"><img src="img/iub_white.gif" alt="Indiana University Bloomington" width="171" height="44" /></a>


<!-- BEGIN OPTIONAL SEARCH FEATURE -->

<form method="get" action="http://search5.iu.edu/search">
<fieldset id="set1">
<ul>


<!-- BEGIN UNIT SEARCH OPTION -->


<li>




<input type="radio" name="as_sitesearch" id="search1" value="http://www.indiana.edu/~meis" checked="checked" />&nbsp;


<label for="search1" title="Keep the MEIS radio button highlighted to search within the MEIS website">MEIS</label></li>

<!-- END UNIT SEARCH OPTION -->

<li><input type="radio" name="as_sitesearch" id="search2" value="" />&nbsp;<label for="search2" title="Highlight the IUB radio button to search within all IU&ndash;Bloomington websites">IUB</label></li>
</ul>
</fieldset>
<fieldset id="set2">

<input type="text" name="q" id="searchtxt" size="25" maxlength="255" value="Search" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />

<!-- BEGIN "GO" BUTTON -->

<input type="image" name="btnG" id="go" src="img/go_red.gif" alt="GO" />

<!-- END "GO" BUTTON -->

<input type="hidden" name="as_dt" value="i" />
<input type="hidden" name="site" value="iub" />
<input type="hidden" name="client" value="iub" />
<input type="hidden" name="proxystylesheet" value="iub" />

<input type="hidden" name="output" value="xml_no_dtd" />
</fieldset>
</form>

<!-- END OPTIONAL SEARCH FEATURE -->
</div>
</div>

<!-- END INDIANA UNIVERSITY BLOOMINGTON BRANDING BAR -->

<!-- BEGIN DEPARTMENT BANNER -->

<div class="content">


<div id="deptbanner">
<div id="bannerimages">
<img src="img/deptbanner9.gif" class="depttitle" alt="Middle Eastern and Islamic Studies" width="345" height="75" />
<img src="img/banner8.jpg" alt="Collage of Middle Eastern images" width="303" height="75" />
</div>
</div>

<!-- END DEPARTMENT BANNER -->


<!-- NAVIGATION BAR -->
<div id="navbar">
<a id="navigation"></a>

<ul id="menu">
<li>Home</li>
<li><a href="mission.shtml">Mission</a></li>
<li><a href="events/">Events</a></li>
<li><a href="outreach/">Outreach</a></li>
<li><a href="faculty/">Affiliated Faculty</a></li>
<li><a href="csi.shtml">Committee for the Study of Islam</a></li>

<li><a href="resources/" title="Job postings, Calls for papers, Conference announcements">Resources</a></li>
<li><a href="curriculum/">Curriculum</a></li>
<li><a href="https://www.indiana.edu/~meis/allta/" title="Arabic Language Learning and Translation Annex">ALLTA</a></li>

<li><a href="links.shtml">Links</a></li>
<li><a href="contact.shtml">Contact</a></li>
</ul>

<!-- MAIN CONTENT -->
<div id="main">
<a id="skip"></a>
<h1>Welcome to the Middle Eastern and Islamic Studies Program.</h1>
<p>The Middle Eastern and Islamic Studies program (MEIS) was established in 1980 with the mission of providing students, scholars, and the general public with information about the Middle East and Islamic world. Since then, the program has been primarily interested in outreach activities that introduce people on campus and in southern Indiana to the diverse cultures, histories, and peoples of the Middle East.</p>
<p>In the spring of 2007, the program was rededicated to its original <a href="mission.shtml">mission</a> and is currently working to develop a comprehensive program that focuses on research, <a href="curriculum/">curricular development</a>, and an <a href="outreach/">outreach</a> program with a national and international impact.</p>

<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="footer">
<div id="copyright">
<div id="blockiu">
<a href="/" title="Indiana University"><img src="/~meis/img/blockiu_white.gif" alt="Block IU" width="22" height="28" /></a>
</div>

<div id="statement"> Middle Eastern and Islamic Studies Program | <a href="http://college.indiana.edu/">College&nbsp;of&nbsp;Arts&nbsp;and&nbsp;Sciences</a><br />

Weatherly Hall 114, 1800 East Tenth Street, Bloomington,&nbsp;IN&nbsp;47406<br />
Phone: (812) 856-3977 |
Fax: (812) 855-2600
| E‑mail:&nbsp;<a href="mailto:meis@indiana.edu">meis@indiana.edu</a>&nbsp;|&nbsp;<a href="https://www.indiana.edu/~meis/comments.shtml" title="Send us questions or comments!">Comments</a><br />
<a href="/copyright.html" >Copyright</a> &copy; 2009, The Trustees of <a href="/" title="Indiana University">Indiana University</a> | <a href="/copyright_complaints.shtml" >Copyright&nbsp;Complaints</a> <br />

</div>
<div id="lastmod">
Last Updated: Tuesday, 25 November 2008
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


relevant CSS:


body{font-family:Arial, Helvetica, sans-serif; background:#fff;font-size:100%;margin:0;padding:0;text-align:left}
#footer #copyright{text-align:left;margin-top:0;margin-right:auto;margin-bottom:0;width:auto;padding:7px
0 7px 15px}

#deptbanner {background-color:#E9E9C1; height:75px; border:3px solid #B9B9B9}
#deptbanner{border-width: 3px 0 2px}
.depttitle{float:left}
#navbar{background-color:#E9E9C1;font-family:Georgia, "Times New
Roman", Times, serif;text-align:left;float:left;padding-left:1em}
.menu2{width:8.3em;padding-left:.5em;border-bottom:thin solid #999}
.menu2 li{margin-bottom:.35em}
#main{font-family:Arial, Helvetica,
sans-serif;background-color:#FFF;margin-left:9.5em;line-height:150%;padding-top:1em;padding-right:3em;padding-left:1.5em;
border:3px solid #B9B9B9}
#main{border-width:0 0 0 2px}

#identity form{height:44px;position:absolute;right:15px;top:0}
#identity fieldset{border:none;float:left;margin:0;padding:0}
#identity fieldset#set1{left:0;position:relative;top:17px}
#identity ul{list-style:none;margin:0;padding:0}
#identity li{float:left;margin:0 10px 0 0}
#identity input#search1,#identity
input#search2{left:0;float:left;height:13px;margin:0;padding:0;position:relative;top:-2px;width:13px}
#identity fieldset#set2{left:2px;position:relative;top:12px}
#identity #searchtxt{border:1px solid #c59d9a; color:#616364; float:left; font-family: Arial, Helvetica, sans-serif;font-size:10px;height:15px;line-height:11px;margin:0 6px 0
0;min-height:13px;padding:2px 4px 0}
#identity #go{margin:1px 5px 0 0}
#identity{width:100%;background-color:#7d110c;color:#fff;font-size:.625em;height:44px;line-height:1em}
#identity a{color:#fff;text-decoration:underline}
#identity #signature{width:auto;padding:0 0 0
15px;height:44px;margin:0 auto;position:relative;text-align:left}
#identity #signature a.iub img,#footer #copyright #blockiu a
img,#footer hr,#identity #signature a img,#identity hr,#skipnav
hr{display:none}

#bannerimages{width: 648px}
label{cursor:pointer}

body{min-width:515px}



And the conditional IE7 CSS:

#body {
padding: 0;
margin: 0;
}

#main {
width: 535px;
padding-top: 2em;
padding-right: 0;
}

#menu {
margin-left: 0em;
}
boycottIE
01-27-2009, 01:26 PM
Sorry to bump my own thread, but I was surprised to get no replies to this. I'm guessing it's a fairly simple problem that I don't know how to solve. Any thoughts? Thank you!
SpongeBob21
09-24-2009, 10:26 AM
To fix this problem, associate the 'overflow:hidden' property with the div whose id = main. When the user makes the page smaller and moves within the edge of your text, the text will not jump below the menu area on the left side of the page but will be hidden.