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