SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu problems IE

    Hello
    I am attempting a dropdown menu (first time) and I have it the way I like it in FF but it does not work in IE. Here is a link
    http://premiumwebsites.net/samples/hbd/index.html

    In IE the second menu is floated next to the image instead of under it and it is impossible to click on the link - they disappear to fast.

    Thanks in advance for your help.

    Dotty

  2. #2
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it looking acceptable in both IE7 and FF3, but it is totally destroyed in ie6. I really hate that browser! Any ideas?

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 won't allow content to overhang a container, so it is pushing the set width of the <li>s wider to fit the images. I would be more inclined to put a top padding of 76px on the dropdown <ul>s and apply the images as backgrounds for the <ul>s instead.

  4. #4
    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)
    I change some of the settings in hearing.css, placed last in each ruleset, hope it works as you intended:
    Code CSS:
    #header{
    	position:relative;
    	width:780px;
    	height:60px;
    	background-image:url(../images/bgheader.jpg);
    	background-repeat:repeat-y;
    	border-bottom:#FFFFFF solid 1px;
    	z-index:100;
    }
    #header img{
    	padding:10px 5px 5px 10px;
    	display:block;
    }
    #mainnav{
    	position:absolute;
    	top:22px;
    	right:0;
    }
    #mainnav ul{
    	padding:0;
    	margin:0;
    	list-style-type:none;
    	float:right;
    }
    #mainnav li{
    	float:left;
    	width:8em;
    	text-align:center;
    }
    #mainnav li ul {
    	width: 10em;
    	left: -999em;
    	clear:left;
    	float:left;
    	position: relative;
    	margin:0 -100px -999px 0;
    }
    #mainnav li ul li{
    	background-image:url(../images/bgnav.jpg);
    	background-repeat:repeat-x;
    	width:140px;
    	padding:5px;
    	border:#FFFFFF solid 1px;
    	float:left;
    }
    #mainnav ul li img{
    visibility:hidden;
    	margin:0 -100px 0 0;
    	padding:20px 0 1px 0;
    	position: relative;
    	float:left;
    }
    #leftcol hr{
    	border:0;                      /* for FF */
    	border-top:2px solid #fff;     /* for all except IE */
    	background:transparent;        /* for Opera and Safari */
    }
    #mainnav ul li:hover img,
    #mainnav ul li.sfhover img{
    	visibility:visible;
    }
    #mainnav li ul li:hover,
    #mainnav li ul li.sfhover{
    	position:relative;
    	left:auto;
    	color:#F7C106;
    	background-image:url(../images/bgnavhover.jpg);
    	background-repeat:repeat-x;
     
    }
    #mainnav li:hover ul,
    #mainnav li.sfhover ul {
    	position:relative;
    	left:auto;
    	color:#F7C106;
    	background-image:url(../images/bgnavhover.jpg);
    	background-repeat:repeat-x;
    }
    Edit:

    I also agree with Centauri about the images as ul backgrounds instead.
    Last edited by Erik J; Aug 12, 2008 at 05:51. Reason: Changed code-tag to css
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both bunches!
    I put the images as backgrounds and made the css changes indicated. It looks great except the the dropdown menu disappears before the mouse can get to it in all 3 browsers. This problem goes away if I allow the images to be directly beneath the navigation, but the customer wants them to be right under the header. How can I extend the focus upward?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Don't use margin-top on the ul because that puts it outside the focus of the parent list and that's why it goes away. Just add another 20px of padding and move the image down by 20px using the background position.

    e.g.
    Code:
    #mainnav ul li ul.yourhearing{
    padding-top:96px;
    width:150px;
    background:url(http://premiumwebsites.net/samples/hbd/images/crowd.jpg) no-repeat 0 20px;
    }
    Do that for the other ones as well.

  7. #7
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul
    That keeps it open - now in IE7 they stay open too long. When I go to the next link with a dropdown the first stays on screen.

  8. #8
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul
    I found the answer in another post.


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
  •