/    Sign up×
Community /Pin to ProfileBookmark

IE7b3 css for Tree menu help please

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;
}
[/CODE]

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>
[/CODE]

Any and all help appreciated

(edit: added more info on what is actually happening and fixed spelling}

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@FangJul 04.2006 — Don't use general fixes for IE, use [URL=http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]conditional comments[/URL]. IE7 does not require the same fixes as IE6 or IE5!
Copy linkTweet thisAlerts:
@gwmboxauthorJul 04.2006 — Yes have tried that by removing those fixes (I'll also look at converting to conditionals) but still the same issue, and anyway I would need to keep the fixes in for those still using IE5 or IE6

Any other ideas?
Copy linkTweet thisAlerts:
@FangJul 04.2006 — *div#left_menu a {
height:1%;
}

Use conditional comments
Copy linkTweet thisAlerts:
@gwmboxauthorJul 05.2006 — That fixed it thanks - I should ask why does the 1% fix it?

From what I read conditionals can not be put in the CSS file is that correct?

So I guess I will need to create an IE specific CSS file and call that via the conditional statement in the HTML code, Correct?

Cheers for your help
Copy linkTweet thisAlerts:
@FangJul 05.2006 — [URL=http://www.satzansatz.de/cssd/onhavinglayout.html]On having layout[/URL]

Conditional comments go in the <head>, a seperate css file.
×

Success!

Help @gwmbox spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...