...

View Full Version : CSS Drop Down Menu Problems



SWilson67
05-20-2005, 01:10 PM
Can anybody help me out with this problem? I've got this site working with drop down menus using CSS.

So basically, I have it working perfectly in Internet Explorer at 1024x768 resolution but any lower and it looks rubbish and using Firefox with any resolution it doesn't work at all.

I assume the resolution problem is because some parts of code use pixels instead of percentages but when I change it, it doesn't work properly.

Could somebody have a look at this for me and see if they can solve the problem?

http://s7.yousendit.com/d.aspx?id=36HZOFVBRAI8C19R0UZND0ZCL3
or
http://s20.yousendit.com/d.aspx?id=1OHV4MNWSBP6Y0YGKSVNZWA15R

I had to up it in a rar file as there is a fair amount of images attached to it and an external style sheet.

The lines of code that problems are being caused by is between either 5-38 or 137-209.

Thanks.

MattyUK
05-20-2005, 03:07 PM
you may be better posting a link to the page when its online. I for one won't take a unknown rar or zip file down unless I am sure as to its content. Also going to be easier to review online than to unpack, set up, then preview locally.

cheers.

SWilson67
05-20-2005, 03:17 PM
OK not a problem

http://www.bell.ac.uk/current/welcome.htm

That is the page at the moment and here are the parts of the code which I think are causing the problems.



<style type="text/css">
body {behavior: url(csshover.htc); background: #929292;}
h1 {border-bottom: 1px solid; margin-bottom: 0;}
div#nav {float:left; margin: 1px 0 0 3em; border: 0;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 7em;
display: none;
}
div#nav li.submenu {95% 50% no-repeat;}
div#nav ul {margin: 0; padding: 5; border: 0px solid #CCC; border-width: 0 0px;}
div#nav ul ul {position: right; width: 0em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display: inline; color: white;}
div#nav ul.level2 {background: url(tabs2-big-hl.gif) 70%;
padding-right: 0; font-size: 11px; white-space: nowrap;}

#main {margin-left: 0em; padding: 0em 0 0px 5%;
border-left: 0px solid;}
#nav {margin: 0; padding: 0; height: 10px; background-color: #0062BF;}
#nav li {list-style: none; float: left; padding-left: 15px;
font-size: 11px; line-height: 19px;
background: url(tabs2-big-hl.gif) 0 70%;
padding-right: 0;}
#nav a {display: block; float: right; padding: 0 10px 0px 0;
text-decoration: none; text-align: center; font-weight: bolder;
background: #DDD url(tabs2-big-hl.gif) 1%; color: White;}
#nav a {float: none;}
#nav a:hover {color: #B00;}
</style>




<ul id="nav">
<div id="nav" style="width: 850px height=50px">
<ul class="level1">
<li><a href="default.htm">Student Home</a></li>
<li class="submenu"><a href="student_services.html">Support</a>
<ul class="level2">
<li><a href="careers.htm">Careers</a></li>
<li><a href="counselling.htm">Counselling</a></li>
<li><a href="disabilities.htm">Learning Support</a></li>
<li><a href="finance.htm">Finance & Welfare</a></li>
</ul>
</li>
<li class="submenu"><a href="enrolment.htm">Course</a>
<ul class="level2">
<li><a href="property.htm">Personal Property</a></li>
<li><a href="payment.htm">Payment Of Fees</a></li>
<li><a href="attendance.htm">Attendance</a></li>
</ul>
</li>
<li class="submenu"><a href="stud_hand.cfm">General</a>
<ul class="level2">
<li><a href="exam_timetables.htm">Exam Timetable Home</a></li>
<li><a href="resits.htm">Resists</a></li>
</ul>
</li>
<li class="submenu"><a href="campus.htm">Campus Life</a>
<ul class="level2">
<li><a href="http://iclanarkshire.icnetwork.co.uk/whatson/">Whats On</a>
<li><a href="catering.htm">Catering</a>
<li><a href="parking.htm">Parking</a>
<li><a href="discount.htm">Discounts</a>
<li><a href="http://194.82.40.208:8080/student/studentone/index.htm">Campus Radio</a>
<li><a href="taekwon.htm">Clubs</a>
</ul>
</li>
</li>
<li class="submenu"><a href="online.htm">On-line Learning</a>
<ul class="level2">
<li><a href="http://bell-vle.bell.ac.uk/">Web CT</a>
<li><a href="http://sharepoint.bell.ac.uk/">Sharepoint</a>
<li><a href="http://gateway.bell.ac.uk/">Gateway</a>
<li><a href="http://eserver.bell.ac.uk/qm/perception.dll">Perception</a>
</ul>
</li>
</li>
<li class="submenu"><a href="calendars.htm">Administration</a>
<ul class="level2">
<li><a href="http://www.bell.ac.uk/current/calendar/Course%20Calendar%20by%20Year%202005%20-%202008%20(circulate%20Feb-05).htm">Nursing Caldendar</a>
<li><a href="http://info.bell.ac.uk/">IT</a>
<li><a href="staff.htm">Staff</a>
</ul>
</li>
</ul>
</li>
</ul>
</div>

MattyUK
05-20-2005, 03:33 PM
Hi

Personally I wouldn't live with the IE only code. If you are wanting cross browser you could do worse than take a good look at:
http://www.alistapart.com/articles/dropdowns/

It doesn't use a HTC. Thats a significant benefit in my opinion. Other than that I can see it is very similar. Also there are forums on that site for the drop down menu you can find other posted solutions that may be closer to your needs.

I've used it before. You can overcome the boxes fixed widths with fluid widths by playing and setting the white space to nowrap at the right point.
If you gut your menu and try the suckerfish approach you may resolve not only your IE problems but your FF ones as well. You can style it as you see fit.

I'm sure others here are thankful for the link and the code. Ta. I'll try to take a look should I get the freedom later on. But I'd strongly suggest the suckerfish menu be examined for your use.

MattyUK

SWilson67
05-20-2005, 03:38 PM
Thanks, I'll have a look at that now.

SWilson67
05-24-2005, 10:59 AM
OK now I've got the drop down part working in both Firefox and IE using the csshover.htc way. I suggested using the suckerfish way of working, but he seemed to want to use this way for some reason so I've had to make it work.

But now the problems are large white spaces in both IE and Firefox, could somebody please take a look at it for me and see if you have any ideas on how to fix it?

http://www.bell.ac.uk/current/welcome.htm

Code:



<style type="text/css">
body { behavior: url(csshover.htc);} /* WinIE behavior call */
h1 {color: white; border-bottom: 1px solid; border: #FFF; margin-bottom: 0;}
#main {color: white; margin-left: 7em; padding: 0em 0 0px 0;
border-left: 2px solid; background-color: #0062BF;}
div#nav {float: left; margin: 0px 0 0 0em;
background: #0062BF; white-space:nowrap; border: 0px solid #0062BF; background-color: #0062BF;}
div#nav ul {margin: 0; padding: 0; background-color: #0062BF;
border: 0px solid #0062BF; border-width: 0 0px;}
div#nav li {position: relative; list-style: none; margin: 0;
float: left; width: 8em; line-height: 1.5em; background: #0062BF; color: #fff; background-color: #0062BF; background: url(tabs2-big-hl.gif) 95% 50% no-repeat;}
div#nav li:hover { background: url(tabs2-big-hl.gif) 95% 50% no-repeat; background: #0062BF; color: #fff; background-color: #0062BF;}
div#nav li.submenu {background: url(tabs2-big-hl.gif);}
div#nav li.submenu:hover {background-color: #0062BF;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 7em; background: url(tabs2-big-hl.gif);}
div#nav ul a {width: auto;}
div#nav ul ul {position: absolute; width: 7em;
display: none; background: url(tabs2-big-hl.gif);}
div#nav ul ul li {border-top: 1px solid #FFF; background: url(tabs2-big-hl.gif);}
div#nav li.submenu li.submenu {background: url(tabs2-big-hl.gif);}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level1 {top: 2em; left: 2px; border-top: -1px solid #FFF;}
div#nav ul.level2 {top: 2em; left: 2px; border-top: -1px solid #FFF;}
div#nav ul.level3 {top: -2em; left: 2px;
border-top: -2px solid #FFF; background: url(tabs2-big-hl.gif) 95% 50% no-repeat;}
</style>




<div id="nav" align="center" style="width: 850px height=50px; background: #0062BF;">
<ul class="level1">
<li><a href="default.htm">Student Home</a></li>
<li class="submenu"><a href="student_services.html">Support</a>
<ul class="level2">
<li><a href="careers.htm">Careers</a></li>
<li><a href="counselling.htm">Counselling</a></li>
<li><a href="disabilities.htm">Learning Support</a></li>
<li><a href="finance.htm">Finance & Welfare</a></li>
</ul>
</li>
<li class="submenu"><a href="enrolment.htm">Course</a>
<ul class="level2">
<li><a href="property.htm">Personal Property</a></li>
<li><a href="payment.htm">Payment Of Fees</a></li>
<li><a href="attendance.htm">Attendance</a></li>
</ul>
</li>
<li class="submenu"><a href="stud_hand.cfm">General</a>
<ul class="level2">
<li><a href="exam_timetables.htm">Exam Timetable Home</a></li>
<li><a href="resits.htm">Resists</a></li>
</ul>
</li>
<li class="submenu"><a href="campus.htm">Campus Life</a>
<ul class="level2">
<li><a href="http://iclanarkshire.icnetwork.co.uk/whatson/">Whats On</a>
<li><a href="catering.htm">Catering</a>
<li><a href="parking.htm">Parking</a>
<li><a href="discount.htm">Discounts</a>
<li><a href="http://194.82.40.208:8080/student/studentone/index.htm">Campus Radio</a>
<li><a href="taekwon.htm">Clubs</a>
</ul>
</li>
</li>
<li class="submenu"><a href="online.htm">On-line Learning</a>
<ul class="level2">
<li><a href="http://bell-vle.bell.ac.uk/">Web CT</a>
<li><a href="http://sharepoint.bell.ac.uk/">Sharepoint</a>
<li><a href="http://gateway.bell.ac.uk/">Gateway</a>
<li><a href="http://eserver.bell.ac.uk/qm/perception.dll">Perception</a>
</ul>
</li>
</li>
<li class="submenu"><a href="calendars.htm">Administration</a>
<ul class="level2">
<li><a href="http://www.bell.ac.uk/current/calendar/Course%20Calendar%20by%20Year%202005%20-%202008%20(circulate%20Feb-05).htm">Nursing Caldendar</a>
<li><a href="http://info.bell.ac.uk/">IT</a>
<li><a href="staff.htm">Staff</a>
</ul>
</li>
</li>
</div>

MattyUK
05-24-2005, 02:45 PM
It's completely broken for me in FF. The text in the drop downs are hidden when they run over the space available.

I'd suggest you fix the page code first in terms of making it validate, then you can be sure whatever the issues are are working issues not from invalid code.


line 55 column 5 - Warning: missing <tr>
line 86 column 6 - Warning: missing <td>
line 87 column 13 - Warning: discarding unexpected <td>
line 86 column 6 - Warning: missing </form>
line 94 column 12 - Error: discarding unexpected </form>
line 96 column 5 - Warning: missing <td>
line 97 column 14 - Error: discarding unexpected <td>
line 96 column 5 - Warning: missing </form>
line 102 column 29 - Error: discarding unexpected </form>
line 120 column 9 - Error: discarding unexpected </tr>
line 127 column 5 - Warning: missing <td>
line 129 column 1 - Error: discarding unexpected <body>
line 138 column 36 - Warning: unescaped & which should be written as &amp;
line 164 column 2 - Error: discarding unexpected </li>

Too many errors. Not all warnings/errors were shown.

10 errors / 27 warnings


Try this:
http://www.w3schools.com/site/site_validate.asp

Hope it helps.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum