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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question IE CSS Styling Issue, help needed

    Got a shop of http://www.outdoorbits.com

    there is a drop down menu which operates fine in FF, Safari,Chrome and Opera but in IE the dropdown options are moved over to the right and not actually under the correct headings making it difficult to navigate.

    Its a CSS Menu but for the life of me not sure what is causing it ???

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You should validate all coding. I just did for your page. See results here http://validator.w3.org/check?uri=ht...Inline&group=0
    139 Errors, 48 warning(s)
    These should be fixed first.
    Evolution - The non-random survival of random variants.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thx, looking down the list some seem easy fixes, but the top few xml errors I haven't a clue on, any ideas on how to resolve the first few which talk about doc types etc ?

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    been working through the validation issues, got it down to 29 errors and 16 warnings, but I don't believe any of the remainder are affecting my issue of the misaligned menu bar only in IE, could someone take a look now and see if they know what is causing the issue please ?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    any help anyone ?

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    The concept is simple.

    1. Each item on your main menu has a certain position.
    2. Your sub menu's position should be positioned relative to that item (aka the parent item).

    So, in your stylesheet.css, you should find this:

    Code:
    #content-header #nav li{float:left;}
    This is the parent item. You need to add "relative: position;".

    Then, you will find this section:

    Code:
    #content-header #nav li:hover ul, #content-header #nav li li:hover ul, #content-header #nav li li li:hover ul, #content-header #nav li.sfhover ul, #content-header #nav li li.sfhover ul, #content-header #nav li li li.sfhover ul{left:auto;}
    Left is set at auto, but it should be 0 because you want the left side of the sub menu to be aligned to the left side of the parent item.
    My signature :)

  • Users who have thanked ttkim for this post:

    fuzioneer (08-29-2013)

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks for the info

    implemented what you state as follows:-

    #content-header #nav li{float:left; relative: position;}
    #content-header #nav li:hover ul, #content-header #nav li li:hover ul, #content-header #nav li li li:hover ul, #content-header #nav li.sfhover ul, #content-header #nav li li.sfhover ul, #content-header #nav li li li.sfhover ul{left:0;}


    but now in IE the menu is always below the left most menu option no matter which header you click on ?

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ah it was me being stupid, looked up relative and i had it the wrong way around i.e. position: relative lol

    all working now, really appreciate the help

  • #9
    New to the CF scene
    Join Date
    Aug 2013
    Location
    new york
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thank

    Hello all. I'm a new member, and I am learning css. I think I will learn a lot here. thank you


  •  

    Posting Permissions

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