• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

Trouble using float with re-rendered (partial) content in IE 6

IE 6 renders regular content in my 'sidebar' element in the upper-right corner like a good browser.

#sidebar {
    float: right;
}

However, if I put a reference to a separate page (called a partial in Ruby on Rails) in 'sidebar' that will be re-rendered without a page reload, 'sidebar' renders in the upper-left-most side of the page. This happens on the initial page load, before the 'partial' is re-rendered. Here is my html:

<div id='sidebar'>
<ul id='event_list'><%= render :partial => 'events', :object => @case %></ul>
</div>

I have tried putting the 'sidebar' divs in the 'events' partial, but got the same result. This problem seems to be unique to IE 6 (and probably all versions before it), but not in IE 7 or 8. I'm aware that IE 6 and below handle floats incorrectly, but is there a way around this?

Thanks,

Peter
0
brassmonkeyboy
Asked:
brassmonkeyboy
  • 2
1 Solution
 
galoriCommented:
the fact that its a partial does not make a difference.

The problem is somewhere in the HTML or CSS.

Can you post the final HTML source code of the sidebar div and any applicable CSS? (view source in your browser)

a good way to troubleshoot this would be to isolate it, start with a page with just this piece of HTML and the applicable CSS.

0
 
brassmonkeyboyAuthor Commented:
Thanks for your response Galori. Below is my applicable css. Attached in the code snippet is my applicable html.

* {
      margin: 0;
      padding: 0;
}

body {
      font-family: Helvetica, Geneva, Arial, sans-serif;
      font-size: 12pt;
      background-color: #494A48;
      height: 100%;
}

input {       margin-bottom:5px}

p { line-height: 150%; }

div#container {
      margin: 0 auto;
      width: 718px;
      height: 100%;
      background-color: #E2E7F0;
}

div#content {
      margin-left: 6px;
      margin-right: 6px;
      margin-bottom: 6px;
}

div#header {
      width: 718px;
      height: 94px;
      margin: 0 auto;
      padding-bottom: 0px;
      background-image: url(/images/Header.jpg);
}

div#footer {
      width: 100%;
      bottom: 0%;
      text-align: center;
      color: #6B6A6A;
      font-size: 10pt;
      padding: 4px;
}

div#login {
      float: right;
      color: #fff;
      font-size: 10pt;
      text-align: right;
      margin: 6px;
}

div#title {
      color: #fff;
      padding: 4px;
      padding-left: 6px;
      font-weight: bold;
      background-color: #000;
}

#sidebar {  
      float: right;
}

#clear
{
      clear: both;
}

div#list_head {
      color: #fff;
      width: 298px;
      padding: 3px;
      padding-left: 4px;
      padding-right: 4px;
      font-weight: bold;
      background-color: #394996;
      margin-top: 2px;
}

div#list_item {
      padding: 2px;
      padding-left: 4px;
      background-color: #fff;
      border: 1px solid #CBD0D8;
      width: 298px;
      margin-top: 2px;
}

div#documents {
      padding: 2px;
      padding-left: 15px;
      background-color: #7E807C;
      border: 1px solid #7E807C;
      width: 287px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="/javascripts/prototype.js?1194225462" type="text/javascript"></script>
<script src="/javascripts/effects.js?1194225462" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1194225462" type="text/javascript"></script>
<script src="/javascripts/controls.js?1194225462" type="text/javascript"></script>
<script src="/javascripts/application.js?1194225462" type="text/javascript"></script>
	<head>
	  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	  <title>Orbus Systems</title>
	  <link href="/stylesheets/style.css?1196450056" media="screen" rel="Stylesheet" type="text/css" />
	</head>
 
	<body id="orbus">
 
		<div id="container">
 
			<div id="header">
			
				<div id ="login" >
					
						<span style="color: #7E8FC8">logged in as </span><strong>Peter</strong><br>
						<a href="/login/logout">Logout</a>
						
				</div>
				
			</div>
 
			<div id='title'></div>
 
<div id='list_space'></div>
 
<div id='content'>
 
 
 
<!-- EVENTS (SIDEBAR) -->
 
<div id='sidebar'>
 
	<ul id='event_list'>
 
		<div id='list_head'>December  3, 2007</div>
		
		<div id='list_item'>
 
			<span id='39_side_arrow'></span>
			<span id='39_down_arrow' style="display:none;"></span>
 
		</div>
 
		<div id='39_documents' style="display:none;">
		
			<div id='documents'></div>
			
		</div>
			
	</ul>
	
</div>
 
 
 
<!-- INPUTS -->
 
<div id='list_head'>Inputs</div>
<ul id='input_list'>
 
 
 
<!-- MAIN INFO -->
 
<div id="list_head">
 
	<span id="list_modifier"></span>
	General Info
	
</div>
 
<ul id="general_information">
 
	<div id="general_info">
	</div>
	
</ul>
 
<div id='clear'></div>
 
</div>
			<div id="footer"></div>
			
		</div>
	
	</body>
</html>

Open in new window

0
 
brassmonkeyboyAuthor Commented:
Helped me identify my problem
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now