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

IE not floating objects next to each other

Hello,

i have a problem with IE 6 and 7. Both browsers are not rendering my code correctly. I have containers which should be displayed next to each other within an outer container, but IE puts the elements under/beneath each other, instead of next to each other. And instead of giving them the minimal required length, it gives them the maximum possible length.

Firefox does it all right. Opera does it right, too!

See my code for details. I will attach two screenshots to further visualize my problem description.
<!-- PLEASE BE AWARE THAT THIS OUTER CONTAINER DIV (id: category-allocator) IS CONTAINED IN A TABLE TD //-->
 
<div id="category-allocator">
 
	<div id="se-category-basic" class="category">
 
		<div class="handle">
			<span class="icon">
				<img src='/img/symbols/cat_b.gif' />
			</span>
			<span class="cat-label">
				basic
			</span>
			<span onclick="remove_category('basic')" onmouseover="this.className='x-button on';" onmouseout="this.className='x-button';" class="x-button"></span>
			<span onclick="edit_category('basic')" onmouseover="this.className='e-button on';" onmouseout="this.className='e-button';" class="e-button"></span>
		</div>
 
		<div id="letter_salutation" class="item">letter_salutation</div>
 
		<div id="title" class="item">title</div>
		<div id="first_name" class="item">first_name</div>
		<div id="birthdate" class="item">birthdate</div>
		<div id="agency_name" class="item">agency_name</div>
		<div id="cp_first_name" class="item">cp_first_name</div>
		<div id="cp_last_name" class="item">cp_last_name</div>
		<div id="comm_sector" class="item">comm_sector</div>
 
	</div>
 
<!-- I ONLY DISPLAY ONE CATEGORY HERE, TO MAKE MY CODE EXAMPLE CLEARER, BUT IN THE ORIGINAL CODE THERE ARE MULTIPLE CATEGORIES OF CLASS se-category-* //-->
 
</div>

Open in new window

shot-ff.jpg
shot-ie.jpg
0
spiritwithin
Asked:
spiritwithin
  • 6
  • 5
1 Solution
 
spiritwithinAuthor Commented:
I am ashamed, i forgot to add the CSS code!

#category-allocator {
 
	padding:						8px;
	
}
 
#category-allocator .category {
    
    float: 							left; 
    margin-bottom:					6px;
     
}
 
#category-allocator .handle {
     
	font-family:					Arial, Verdana, Helvetica, Geneva;
	font-size:						11px;
	font-weight:					bold;
	color:							#0E0062;
	padding:						2px 3px 2px 4px;
	background-color:				#EBEFCA;
	cursor:							move;
	border:							1px solid #b0b0b0;
	margin:							0px 8px 0px 0px;
	height:							15px;
	
}
 
#category-allocator .item {
    
	font-family:					Arial, Verdana, Helvetica, Geneva;
	font-size:						11px;
	color:							#0E0062;
	background-color:				#ffffff;
	cursor:							move;
	border-bottom:					1px solid #b0b0b0;
	border-left:					1px solid #b0b0b0;
	border-right:					1px solid #b0b0b0;
	margin:							0px 8px 0px 0px;
	padding:						2px 8px 2px 8px;
	
}
 
#category-allocator .item.on {
 
	background-color:				#fbff98;
	
}
 
                  
#category-allocator .handle .icon {
 
	float:							left;
	padding:						1px 6px 0px 0px;
 
}         
             
#category-allocator .handle .cat-label {
 
	float:							left;
 
}
 
#category-allocator .handle .x-button {
 
	float:							right;
	cursor:							pointer;
	padding:						1px 0px 0px 0px;
	margin: 						1px 0px 0px 2px;
	background-image:				url('/img/symbols/x1_off.gif');
	background-repeat:				no-repeat;
	height:							12px;
	width:							13px;
	        	
}   
 
#category-allocator .handle .x-button.on {
 
	background-image:				url('/img/symbols/x1_on.gif');
	
}
                  
#category-allocator .handle .e-button {
 
	float:							right;
	cursor:							pointer;
	padding:						1px 0px 0px 0px;
	margin: 						1px 0px 0px 6px;
	background-image:				url('/img/symbols/edit1_off.gif');
	background-repeat:				no-repeat;
	height:							12px;
	width:							13px;
	        	
}   
 
#category-allocator .handle .e-button.on {
 
	background-image:				url('/img/symbols/edit1_on.gif');
	
}            
       

Open in new window

0
 
David S.Commented:
What happens if you temporarily remove the float:right declarations form ".x-button" and ".e-button"?
0
 
spiritwithinAuthor Commented:
Wow. Sir. Thank you!

What happens is that suddenly the containers are displayed correctly - next to each other.

The only remaining question is: how can i position the buttons correctly now? Because if i do not use float right, what other option do i have to position them on the right end of the container title bars?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
spiritwithinAuthor Commented:
One more thing: the title bars of the containers (which contained the divs using the x-button and e-button classes) are now having the minimal required width, instead of having the same width as the items below.

I'll attach a screenshot.
shot-ie.jpg
0
 
David S.Commented:
Give "#category-allocator .handle" position:relative and then absolutely position those buttons instead of floating them.

Try this:

#category-allocator .handle .x-button {
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
  padding: 1px 0 0;
  background-image: url('/img/symbols/x1_off.gif');
  background-repeat: no-repeat;
  height: 12px;
  width: 13px;
}
#category-allocator .handle .e-button {
  position: absolute;
  top: 3px;
  right: 18px;
  cursor: pointer;
  padding: 1px 0 0;
  background-image: url('/img/symbols/edit1_off.gif');
  background-repeat: no-repeat;
  height: 12px;
  width: 13px;
}

Open in new window

0
 
David S.Commented:
> One more thing: the title bars of the containers (which contained the divs using the x-button and e-button classes)
> are now having the minimal required width, instead of having the same width as the items below.

Odd. I'm not sure what would cause that.
0
 
spiritwithinAuthor Commented:
Me neither.

Isn't it possible to strech those title bars to the full length of the next outer container?
0
 
David S.Commented:
No way to do that comes to mind. Widthless floats are tricky.

We would be better able to help you if you could post a link to an example page.
0
 
spiritwithinAuthor Commented:
I would like to do that but the whole page is constructed dynamically - and that - locally. I need to set up database, php config and all the other things on a webserver. I do not want to post this information here. Is there any other way i can reach you, in order to provide you with a proper link?

Be aware, that you already provided a solution to my actual problem by pointing me to the correct directions to find the cause, thus i accept the above hint as solution.

I would however appreciate any further help, of course!
0
 
spiritwithinAuthor Commented:
Thank you!
0
 
David S.Commented:
> I would like to do that but the whole page is constructed dynamically

That doesn't matter. You can view the source in your browser and then save a copy.

> Is there any other way i can reach you, in order to provide you with a proper link?

Yes, I do consulting. Click on my username to see my profile which contains a link to my site.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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