Hi guys
I have a tree menu that works fine in IE6 and FF1.5 but I am having a text wrapping issue for menu items in IE7b3. Now I know IE7b3 is beta and it could just be that but wanted to ask you guys anyway in case I have some wrong code that you can help me with.
The text wrap issue is that when the menu item is longer than the specified width it wraps but it wraps over the top of the next menu item so makes that part of the link and the next menu item unreadable, however if you hover over the menu item (that is wrapping over the next item) the wrapped part becomes invisible?
css code for menu is
[CODE]
/* left menu setup */
div#left_menu {
position: absolute;
left: 0px;
top: 100px;
font-size: 0.8em;
padding: 0px;
width: 170px;
float: left;
line-height: 1.4em;
}
/* left menu level 1 styles */
div#left_menu ul {
list-style: none;
font-weight: normal;
margin: 0px;
padding: 0px;
padding-left: 0px;
}
div#left_menu a {
text-decoration: none;
color: #000000;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
display: block;
}
/* fix for IE */
*div#left_menu a {
height: 14px;
}
div#left_menu ul li#selected {
font-weight: bold;
}
div#left_menu a:link {
text-decoration: none;
}
div#left_menu a:hover {
color:#FFFFFF;
text-decoration: none;
}
div#left_menu a#selected {
font-weight: bold;
width: 160px;
text-decoration: none;
}
/* left menu level 2 styles */
div#left_menu ul ul {
/*background-color:#CCCCCC;*/
}
div#left_menu ul ul#selected {
display:block;
}
div#left_menu ul ul a {
padding-left: 15px;
}
div#left_menu ul ul a#selected {
font-weight: bold;
width: 150px;
}
example of related html code is
[CODE]
<div id=”left_menu” style=”background-color:#ffffff;”>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/some_link_example1.html”>A link Example 1</a></li>
<li><a href=”/some_link_example2.html”>A link Example 2</a></li>
<li><a href=”/some_link_example3.html”>A longer description link Example 3</a></li>
<li><a href=”/some_link_example4.html”>A link Example 4</a></li>
<li><a href=”#”>Expandable item 1</a>
<ul>
<li><a href=”/website_link_directory/”>A link Example 5</a></li>
<li><a href=”/website_link_directory/example1.html”>A link Example 6</a></li>
<li><a href=”/website_link_directory/example2.html”>A link Example 7</a></li>
<li><a href=”/website_link_directory/example3.html”>A link Example 8</a></li>
<li><a href=”/website_link_directory/example4.html”>A link Example 9</a></li>
<li><a href=”/website_link_directory/example5.html”>A longer description link Example 10</a></li>
<li><a href=”/website_link_directory/example6.html”>A link Example 1</a></li>
<li><a href=”/website_link_directory/example7.html”>A longer description link Example 12</a></li>
</ul>
</li><li><a href=”#”>Expandable item 2</a>
<ul>
<li><a href=”/manual_link_directory/”>A link Example 13</a></li>
<li><a href=”/manual_link_directory/example8.html”>A link Example 14</a></li>
<li><a href=”/manual_link_directory/example9.html”>A longer description link Example 15</a></li>
<li><a href=”/manual_link_directory/example10.html”>A longer description link Example 16</a></li>
<li><a href=”/manual_link_directory/example11.html”>A link Example 17</a></li>
<li><a href=”/manual_link_directory/example12.html”>A longer description link Example 18</a></li>
<li><a href=”/manual_link_directory/example13.html”>A link Example 19</a></li>
<li><a href=”/manual_link_directory/example14.html”>A link Example 20</a></li>
<li><a href=”/manual_link_directory/example15.html”>A link Example 21</a></li>
</ul>
</li>
</ul>
</div>
Any and all help appreciated
(edit: added more info on what is actually happening and fixed spelling}