SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question browser friendly css vertical menu...

    Hi all. I was wondering if there was anyone out there who could assist me with a slight issue I'm having?

    After much testing and searching we managed to find a menu that was quite fast in loading the data. Basically we are using a menu adapted from http://www.seoconsultants.com/css/menus/tutorial/

    Now this works fine in all browsers, however after applying our code it doesn't seem to work in any browser other than IE. What we really need is for it to work in all browsers, which the original does!

    Here is link to the menu http://demo.glensoft.net/index.html.
    I just can't seem to see what exactly is going wrong...please can anyone help?

    Many thanks in advance!

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you've got some errors there. As an example comparing the original with yours:

    Original:

    HTML Code:
    <h2>CSS Tips</h2>
     <ul>
      <li><a href="http://www.seoconsultants.com/css/tips/" id="csstip" class="x">CSS Tips Index</a>
       <ul>
        <li><a href="http://www.seoconsultants.com/css/tips/#cssmenus" class="x">CSS Popout Menus</a><ul>
        <li><a href="http://www.seoconsultants.com/css/menus/vertical/">Vertical CSS Menu</a></li>
        <li><a href="http://www.seoconsultants.com/css/menus/horizontal/">Horizontal CSS Menu</a></li>
        <li><a href="http://www.seoconsultants.com/css/menus/tutorial/">CSS Menus Tutorial</a></li>
    </ul>
    Yours:
    HTML Code:
    <ul>
     <li><h2>Amplifiers</h2>
        <ul>
          <li><a href="productlist.asp?C1=HOME AMPLIFIERS"  >HOME AMPLIFIERS</a></li>
            <ul>
               <li><a href="productlist.asp?C1=Pioneer"  >Pioneer</a></li>
                <ul>
                  <li><a href="productlist.asp?C1=A109">A109</a></li>
    	 <li><a href="productlist.asp?C1=A209R">A209R</a></li>
    	 <li><a href="productlist.asp?C1=A509R">A509R</a></li>
    	 <li><a href="productlist.asp?C1=KAM_KPCS20_SPEAKERS">KAM_KPCS20_SPEAKERS</a></li>					</ul>
    You should have the headings outside of the lists. Then with the lists themselves you need to have the closing list item tag after the secondary list like this:

    HTML Code:
    <ul>
      <li>Thing here
        <ul>
          <li>Other thing here</li>
         </ul>
        </li>
    </ul>
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response Tailslide but I'm not entirely sure that this is the case. Tried doing this on numerous occassions and it just doesn't behave correctly.

    Ideally, what we are after is a multi-level menu which needs to be dynamic as it will be built on the fly. On http://demo.glensoft.net/index.html this works fine but doesn't work at all in Firefox.

    Been working on this for too long that I need a fix...lol... going loopy!

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An appaling 710 html errors to be exact. And for such a small page! I didn't even look to see how many css errors Plus, he's using the xml declaration which IE will choke on.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    An appaling 710 html errors to be exact. And for such a small page! I didn't even look to see how many css errors Plus, he's using the xml declaration which IE will choke on.
    Excuse my ignorance, but I'm more front-end and have taken this design from our developers in order to get the styling done. Nonetheless, could what you've mentioned be the reasoning for why the nav works in IE and not Firefox?

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All sorted...Tailslide, you da guru! Thanks

  7. #7
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The xml declaration puts IE into quirks mode and it won't perform as modern browsers do who understand it. If you designed your site in IE and then tested in Firefox, then yes, you designed to the old, buggy non-standard browser and expected a modern browser to perform the same.

    Obviously, that is backwards and you should always use a modern browser to initially check your markup, then check in IE to see if it boogers it up.

    Until the xml declaration is removed, and you fix your 710 html errors, you will continue to have problems of all sorts.


Bookmarks

Posting Permissions

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