Solved

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

Posted on 2007-11-15
3
379 Views
Last Modified: 2010-05-18
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
Comment
Question by:brassmonkeyboy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
galori earned 500 total points
ID: 20387972
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
 

Author Comment

by:brassmonkeyboy
ID: 20403958
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
 

Author Closing Comment

by:brassmonkeyboy
ID: 31409460
Helped me identify my problem
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question