SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu border not showing in IE

    Hello there,

    I'm building a site that uses dropdown menu. Here's the link to it.
    http://www.lifecafe.me/

    This dropdown uses nested <ul> tags which are styled with CSS and each of the child menu should have a colored border that matches the color of its parent.

    While this works fine with FireFox, Chrome and Safari, it fails on all versions of Internet Explorer. I've looked around for the solution in this forum and quite few other places without any luck. I've also tried the use of background image for the border but this fails on IE as well.

    Does anyone have come across a similar issue?

  2. #2
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi There,

    First of all is that drop down full html and css based or does it rely on anything else such as javascript of jquery
    Kind Regards,
    Glen Wheeler
    Engine | Glen Wheeler

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem is you have no space between the hex code and the value

    #category_bar ul li#cat-36 ul.children{border:1px solid #F45C0B;}

    Notice how I put a space between "solid" and the hex code? Your code in your page doens't have that. You have many instances of that. Change all . IE is ignoring the rule becuase of that
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Thanks for pointing out the 'space' issue. The CMS has a feature of combining and minimizing the CSS files. It seems like the CMS in not inserting a space in front of '#' character. I solved this by moving the hax value before all other so that the resulting style looks like below.

    #category_bar ul li#cat-36 ul.children{border:#F45C0B 1px solid;}

    This solved it. Cheers!


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
  •