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 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Menu inconsistency between IE7 and FireFox 3.

    I have been trying to help a poster with this site.

    It's here for you.

    I have spent almost the whole of two days to try to solve it.

    If you view it in FFox, you will find that selecting PORTFOLIO in FFox gives a horizontal result whereas in IE7 it gives an unwanted vertical result. As with the original poster, it is slowly driving me up the wall. For pity's sake someone, please put us out of our misery!

    Brownie points all round.

    Frank
    Last edited by effpeetee; 07-04-2008 at 04:36 PM. Reason: Title line very small print.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That's a big mess, start to build with the following
    Code:
    <div id="menu">
        <ul>
        <li class="top"><a href="#">HOME</a></li>
    	<li class="top"><a href="#">SERVICES</a></li>
    	<li class="top"><a href="#">CLIENTS</a></li>
    	<li class="top"><a href="#">CASE STUDIES</a></li>
    	<li class="top"><a href="#">PORTFOLIO</a>
            <ul class="subnav"> 
              <li class="item"><a href="#">ADVERTISING</a></li>
              <li class="item"><a href="#">WEB DESIGN</a></li>
              <li class="item"><a href="#">COLLATERAL</a></li>
              <li class="item"><a href="#">PUBLIC RELATIONS</a></li>
            </ul>
            </li>
    	<li class="top"><a href="#">CORE TEAM</a></li>
    	<li class="top"><a href="#">CONTACT US</a></li>
    </ul>
    </div>
    (properly nested and it's valid code)

    Or simply with
    Code:
    <ul  id="menu">
        <li ><a href="#">HOME</a></li>
    	<li ><a href="#">SERVICES</a></li>
    	<li ><a href="#">CLIENTS</a></li>
    	<li ><a href="#">CASE STUDIES</a></li>
    	<li ><a href="#">PORTFOLIO</a>
            <ul > 
              <li ><a href="#">ADVERTISING</a></li>
              <li ><a href="#">WEB DESIGN</a></li>
              <li ><a href="#">COLLATERAL</a></li>
              <li ><a href="#">PUBLIC RELATIONS</a></li>
            </ul>
            </li>
    	<li ><a href="#">CORE TEAM</a></li>
    	<li ><a href="#">CONTACT US</a></li>
    </ul>
    No divitis and no mess. Now it's very easy to write CSS, like
    Code:
    #menu{
    
    }
    #menu ul{
    
    }
    
    #menu li{
    }
    
    #menu li ul li{
    
    }
    and so on
    Last edited by abduraooft; 07-04-2008 at 05:01 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you abduraooft, But does it need to be re-written to cure the fault?

    My eyes are very bad and I was hoping for an IE hack or work around..
    Why does it not present correctly in IE7?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Because at present there are a lot of markup errors, due to improper nesting.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by abduraooft View Post
    Because at present there are a lot of markup errors, due to improper nesting.
    This is one area I find most difficult. where to put the </div>,s. I usually land up doing a suck it and see job.

    Removing the more obvious faults did nothing useful,

    Still, I'll press on regardless,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Frank, the basic structure of an unordered list is
    Code:
    <ul>
         <li>A</li>
        <li>B</li>
        <li>C</li>
        <!--........as many <li></li>s- list items required in primary list  -->
    </ul>
    Now, if we want to add a sublist to a list item, split the <li></li> and add another <ul>...</ul> set (like above inside it).
    Code:
    <ul>
         <li>A</li>
        <li>B
             <ul>
                 <li>a</li>
                 <li>b</li>
                 <li>c</li>
             </ul>
          </li>
        <li>C</li>
    </ul>
    Again, if we need to add anhcors to the text, just wrap our text inside <a></a> without touching the ul-li structure, say
    Code:
    <li><a href="a-url">A</a></li>
    .
    So the above list would become
    Code:
    <ul>
         <li><a href="a-url">A</a></li>
        <li><a href="a-url">B</a>
             <ul>
                 <li><a href="a-url">a</a></li>
                 <li>b</li>
                 <li>c</li>
             </ul>
          </li>
        <li>C</li>
    </ul>
    We can increase the nesting to any level, but be vary careful that the immediate child of any <ul> or <ol> should be an <li> (and it's close tag after some content)

    In your case, you have closed your starting <ul> before completing all list item. This is not going to be a markup error, but it's not the proper way to create a list. They are sitting as independent. see
    Code:
    <ul>
        <li class="top"><a href="#">HOME</a></li>
    </ul>
    
        <ul>
    <li class="top"><a href="#">SERVICES</a></li>
    </ul>
    
    <ul>
    <li class="top"><a href="#">CLIENTS</a></li>
    </ul>
    After this there is
    Code:
    <ul>
        <li class="top"><a href="#">PORTFOLIO</a></li>
       <div class="subnav">
       <li class="item"><a href="#">ADVERTISING</a></li>
    
       <li class="item"><a href="#">WEB DESIGN</a></li>
       <li class="item"><a href="#">COLLATERAL</a></li>
      <li class="item"><a href="#">PUBLIC RELATIONS</a></li>
    </ul>
    which is an error as you can't nest a div directly inside an ul. Indeed there is no closing tag.

    Hope this makes some sense
    Last edited by abduraooft; 07-07-2008 at 09:01 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    effpeetee (07-06-2008)

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Frank,

    take a look at your Sources page and the list code in it.

    You have ul's inside ol's which could be amended to have ul's inside ul's, where the contained ul's are for the flyout. Then use css to hide or unhide the fylout bits (using left:-999px; or something).

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you both, I will return to it shortly. At the moment my main PC is not available. We have builders in.

    'Nuff said,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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