Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop Down Menu Problems

    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=36...C19R0UZND0ZCL3
    or
    http://s20.yousendit.com/d.aspx?id=1...Y0YGKSVNZWA15R

    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.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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
    Last edited by MattyUK; 05-20-2005 at 02:39 PM.

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'll have a look at that now.

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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.

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •