Forum Moderators: not2easy
I wish I could show you a screenshot of this, but the menu I have looks like a complex web of text and garbage. So, I was wondering if someone would be able to help me find where it is breaking in IE5Mac.
-----CSS-----
.menu{
width: auto;
margin: 25px 0 0 15px;
}.menu ul {
margin: 0;
padding: 0;
text-align: left;
}
.menu li {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
font-weight: normal;
}
.menu li a {
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu ul a {
text-decoration: none;
color: #111;
padding-left: 15px;
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-position: left;
background-repeat: no-repeat;
}
.menu ul a:hover {
color: #999;
background-image: url(../new-web/css/secondarypage_css/images/hoversmall_arrow.gif);
background-position: left;
background-repeat: no-repeat;
}
/* Submenu styles */
/* Second Level */
.menu ul ul {
padding: 0;
}
.menu ul ul a {
text-decoration: none;
color: #111;
}
.menu li li {
margin: -2px 0 0 5px;
padding: 0;
}
.menu li li a {
background-image: none;
}
.menu li li a:hover {
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-repeat: no-repeat;
position: left;
color: #999;
}
/* Third Level */
.menu ul ul ul a {
padding-left: 15px;
}
.menu li li li {
margin: -2px 0 0 10px;
padding: 0;
}/* Symbol styles */
.menu .symbol-item, .menu .symbol-open, .menu .symbol-close{
float: left;
width: auto;
height: 1em;
background-position: left center;
background-repeat: no-repeat;
}
.menu .symbol-item {
background-image: url(page.png);
}
.menu .symbol-open {
background-image: url(minus.png);
}
.menu .symbol-close {
background-image: url(plus.png);
}/* Menu line styles */
.menu li.open {
font-weight: bold;
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-position: 0 4px;
background-repeat: no-repeat;
}
.menu li.close {
font-weight:normal;
}
/* Menu Fixes for IE5Mac */
/*\*//*/
@import "ie5mac.css";
/**/
-----MarkUp-----
<div class="menu">
<ul id="nav">
<li><a href="javascript:void 0" onclick="TreeMenu.toggle(this)">Upper School</a>
<ul>
<li><a href="upperschool/index.htm">US Home</a></li>
<li><a href="upperschool/general/usfaculty.htm">US Faculty</a></li>
<li><a href="calendars/usscalendar0506.htm">US Calendar</a></li>
<li><a href="athletics/upper/usathmain.htm">US Athletics</a></li>
<li><a href="javascript:void 0" onclick="TreeMenu.toggle(this)">US Academics</a>
<ul>
<li><a href="upperschool/academics/uspe.htm">PE</a></li>
<li><a href="upperschool/academics/usmath.htm">Math</a></li>
<li><a href="upperschool/academics/ussci.htm">Science</a></li>
<li><a href="upperschool/academics/usenglish.htm">English</a></li>
<li><a href="upperschool/academics/ussocial.htm">Social Studies</a></li>
<li><a href="upperschool/academics/usarts.htm">Performing Arts</a></li>
<li><a href="upperschool/academics/usarts.htm">Communications</a></li>
<li><a href="upperschool/academics/uslanguages.htm">Foreign Language</a></li>
<li><a href="upperschool/academics/uscompsci.htm">Computer Science</a></li>
</ul>
</li>
<li><a href="upperschool/studentsinfo/us_menu.htm">US Lunch Menu</a></li>
<li><a href="upperschool/general/afterschool.htm">US Publications</a></li>
<li><a href="upperschool/studentsinfo/clubs_activities.htm">Clubs & Activities</a></li>
<li><a href="upperschool/college_counseling/index.htm">College Counseling</a></li>
</ul>
</li>
is there anything in there we should see?
apart from that this is a shameless bump,
(I don't know, IE/Mac off the radar these days ;))
Anyone else know..
Suzy
I actually found that what was causing me the biggest headache was not adding a clear to .menu ul
Without it the <li>s would try to squish as much as possible into each line within the confines of the container. Adding a nice clear:both forced a line break and like magic everything was fixed.
This is a small thing now, but in IE5Win the text of the <li>s is sitting on top of the background images. It's acting as if I don't have a padding of 15 on the left of the li's. Trivial, but if someone can spot it it'd be cool to have that fixed.
actually I looked at your menu in Mac/IE5 several times but only saw a nice list of links. Later I added two different arrow images but still didn't see anything wrong.
After that I tried to read your CSS and I think you can do the same with a lot less. Below is the part above the "Symbol styles" comment.
And no wonder I didn't see anything wrong? You only need to clear when you float an element, but these classes are missing from the code you posted (the symbol styles)...
.menu {
width:auto;
margin:25px 0 0 15px;
}
.menu ul,.menu li {
margin:0;
padding:0;
list-style:none;
text-align:left;
}
.menu li a {
padding-left:15px;
background:url(arrow.gif) no-repeat left;
font:normal .7em verdana,arial,helvetica,sans-serif;
color:#111;
text-decoration:none;
}
.menu li a:hover {
background:url(smallarrow.gif) no-repeat left;
color:#999;
}
.menu li li {
margin:-2px 0 0 5px;
}
.menu li li a {
background:none;
}
.menu li li a:hover {
background:url(arrow.gif) no-repeat left;
}
Added:
It's acting as if I don't have a padding of 15 on the left of the li's.
[Edit: Sorry, in the code I posted I didn't change the background image URLs back to yours.]
Strange. Any ideas?
/*----------------------------------------------------*/
/* Menu styles */
.menu{
width: auto;
margin: 25px 0 0 15px;
}.menu ul {
margin: 0;
padding: 0;
text-align: left;
clear: both;
}
.menu li {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
font-weight: normal;
}
.menu li a {
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu ul a {
text-decoration: none;
color: #111;
padding-left: 15px;
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-position: left;
background-repeat: no-repeat;
}
.menu ul a:hover {
color: #999;
background-image: url(../new-web/css/secondarypage_css/images/hoversmall_arrow.gif);
background-position: left;
background-repeat: no-repeat;
}
/* Submenu styles */
/* Second Level */
.menu ul ul {
padding: 0;
}
.menu ul ul a {
text-decoration: none;
color: #111;
}
.menu li li {
margin: -2px 0 0 5px;
padding: 0;
}
.menu li li a {
background-image: none;
}
.menu li li a:hover {
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-repeat: no-repeat;
position: left;
color: #999;
}
/* Third Level */
.menu ul ul ul a {
padding-left: 15px;
}
.menu li li li {
margin: -2px 0 0 10px;
padding: 0;
}/* Symbol styles */
.menu .symbol-item, .menu .symbol-open, .menu .symbol-close{
float: left;
width: auto;
height: 1em;
background-position: left center;
background-repeat: no-repeat;
}
.menu .symbol-item {
background-image: url(page.png);
}
.menu .symbol-open {
background-image: url(minus.png);
}
.menu .symbol-close {
background-image: url(plus.png);
}/* Menu line styles */
.menu li.open {
font-weight: bold;
/* commented backslash hack v2 hides styles from IE 5 Mac\*/
background-image: url(../new-web/css/secondarypage_css/images/small_arrow.gif);
background-position: 0 4px;
background-repeat: no-repeat;
/* end hack */
}
.menu li.close {
font-weight:normal;
}
but as far as I can make out now from your code ALL IE's (Win) require a "layout hack".
When I replace the backgrounds with colors I got repainting errors in them all, and once I applied the layout hacks for the rest of the versions it also brought IE5/Win into line so try adding this to see if it helps your menu:
/* hide from Mac - IE/Win Layout hack \*/
* html .menu, * html .menu li a {height: 1px;}
/* end hack */
this doesn't correct the vertical whitespace problem, but if height of the li is a visual problem once your images are in place there are other things to try.
The menu div sized by margins is the ultimate problem, as floating the <li>'s is the usual cure to bring IE5 into line, but without a width that causes further problems with your code, can the menu div be given a fixed width by any chance?
Suzy
