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
LVL 1
spiritwithinAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.