SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    NavBar IE nightmare. Anyone help me out?

    Hi,

    I have tried for two days now to get to the bottom of this. The problem only occurs in IE. Some of the menus don't popout the way they do on FF. FF works perfectly (as ever.)

    Please load my test page here. http://www.1stkreative.co.uk/2.html

    1 - With Firefox navigate to - Vertical CSS Pop-out menu > Tanfra demo EG>Tanfra tutorial > stage 6. Everything works as it should.

    2 - Now, on IE try navigating the above and you'll see what I mean.

    Has anyone any solutions? I am an accomplished beginner at best and haven't the knowledge just yet to get to the bottom of this.

    Anyone throw me a direction? Will be greatly appreciated.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kola, and welcome to SitePoint!

    Your menu won't work in IE 6, and barely works in IE 7 as it is. I'm not a fan of using a DIV container to wrap around a single unordered list (instead I'd style the list itself), and I also like to remove the margins and padding from all the elements I can before I start styling them (though that's not the issue here).

    You may want to take a look at the Sons of Suckerfish dropdown menu article for a better way to achieve this effect. (The only thing I'd recommend other than what they do is to use a .htc file instead of a combination of JavaScript and extra CSS, but that's just me.)

    If you want to use the csshover.htc file (which lets :hover be used on ANY element, not just anchors in IE 5/6), then go ahead an check this article out:
    http://www.xs4all.nl/~peterned/csshover.html (you will have to add the proper MIME type to your .htaccess file to make this work, but it's a small price to pay to get :hover working everywhere in IE 6).

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint Kola.

    The anchors needs height and the sublists need both top and left positions to work. Like this e.g.
    Code CSS:
    #menu a, 
    #menu h2  {
      border-width:1px;
      padding: 2px 3px;
      height: 35px; /* makes 40px with padding and border */
    }
    #menu a:hover  {
    color:green;
    background:red;
    }
    #menu li {
    position:relative;
    height: 40px;
    }
    #menu ul ul ul {
    top:0;
    left:100%;
    }
    #menu ul ul {
    position: absolute;
    z-index: 500;
    top:40px;
    left:0;
    }
    Hope it helps.

    Too slow typing again.
    Nice badge, Dan.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Fellas. Thanks for quick replies.

    @ Dan

    I am not as advanced as this code would pretend I am. I copied it and worked through it from another tutorial on the net. I messed around for ages and got it working on firefox flawlessly but IE is a pain as Im fast learning.

    Id rather not even touch on Javascript just yet. I only started coding two months ago but have put the shifts in big time but still, Ill master CSS first before I look at anything else.

    With that in mind, will me menu display correctly on IE 6 and 7 if I use csshover.htc?

    Thanks for your reply Dan, appreciated :]

    @ Eric

    Ill try what you say and report back. I hope your method works as Dan's htc file thingy sounds intimidating

    Thanks, Eric.




    EDIT:- Eric, your method worked!! Excellent. Only prob now is the boxes the menus fit into are too big. Sry haven't got an example of this online. Trying to sort this myself. Guessing its down to padding or something?
    Last edited by Kola; Feb 15, 2008 at 14:26. Reason: To avoid double post

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Dan said, the menu will not work in IE6 without the csshover.htc. The suckerfish menu is a good choise.

    Or if you want to read more on the csshover.htc at Whatever Hover
    Happy ADD/ADHD with Asperger's

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, and the great thing about the whatever:hover technique is you can literally just drop it in and it'll "just work" once you've added one line to your .htaccess file (it's just a plain text file that you can probably edit live on the server if you're using a FTP client like FileZilla).

  7. #7
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, sorted out the weird size stuff and it runs great in FF and IE7.

    Thats a huge step forward for me. Seriously, thanks big time. Ive been banging my head of a wall for days with it.

    Ill look into the .htc file as soon as Ive finished jumping around the room shouting eureka

    Thanks!!!

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I felt the exact same way when I was able to finally make my first CSS based dropdown menu work cross-browser, so take all the time you want to jump for joy.

  9. #9
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok m8, just finished jumping for joy lol

    Hey what a nice friendly and helpful forum. Think Ill stick around.

    How do you all view site's though IE6? IE6 transmuted itself without warning into IE7 on my PC.

    As far as I know IE6 and IE7 cant coexist on the same machine or can they?

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally use the IE Standalones from Tredosoft though they're not suitable for testing with JavaScript. For scripting, I suggest going to Microsoft.com and getting a downloadable ISO image with VirtualPC and IE 6 installed.

    (Also note that all the issues concerning conditional comments and whatnot have been fixed in the Tredosoft distribution, and the registry hacks and whatnot only apply to the Evolt.org version of the standalones.)


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
  •