Hi all,

I'm working on a website which has a horizontal navigation menu, much like the one on DaniWeb. Basically I need to include an icon which floats right for each list item. IE7 has a bug whereby if the container div does not have a width stipulated then a right floated element inside of the div will cause it to expand to 100% width. I've tried numerous workarounds that i've seen in blogs and other forums but to no avail. I've spent around 15 hours on this bug. I'm not a designer but due to lack of designer resource I'm having to take this on and finding it difficult to come up with a solution.

Also the width of the container div is not known as the information is dynamic, so therefore I cannot simply set a fixed width.

Here is an example of my code:

<div id="navSearchBar">
<!-- My repeater item -->
<Item Template>
	<li>
		<a href="http://somelink.com">Click me<a>
		<img src="image_example.png" class="icon">
	</li>
</Item Template>
</div>
#navSearchBar{
	float:left;
	width:auto !important; margin:0 0 10px; 
	background: #4594bf url(../LayoutImages/previewNav.png) repeat-x !important;
	}

	.icon
{
    margin-top:4px;
    margin-bottom:4px;
    margin-right:4px;
    margin-left:4px;
    width:20px;
    height:20px;    
    float:right;
}

hi, i think the div id to set single element not for more elements,so better user

<div class="navigation" id="somthing">.....</div>

for know :
http://www.eclouds.net
or

use percentages to set your widths and set a min-width and max-width in px for the navigation div.

You might also be able to use the IE if in the head:

<!--[if eq IE 7]>
PUT YOUR ADDITIONAL IE 7 ONLY STYLES HERE
<![endif]-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.