• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 755
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

 
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
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

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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