SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down menu not working in IE7

    I have made a drop down menu using CSS and it all works fine in Firefox and Chrome.

    Wne to test it in IE7 and hovering over the parent link reveals the drop down on hover> Try to go down the menu and it disappears.

    I have tried using that csshover.htc but it doesn't seem to work.

    Is there a problem somewhere else?

    The site can be viewed here
    Code CSS:
    * html body {
    	behavior: url(csshover.htc);
    }
     
    ul#tmenu {
    	list-style-type: none;
    	background-image: url(../images/topmenu/navi_bg.gif);
    	font-family: Arial, Verdana;
    	font-size:21px;
    	margin: 0;
    	padding: 0;
    }
     
    ul#tmenu li {
    	display: block;
    	position: relative;
    	float: left;
    	z-index:100;
    }
     
    ul#tmenu li ul { display: none; }
     
    ul#tmenu li a {
    	display: block;
    	text-decoration: none;
    	color: #ffffff;
    	border-top: 1px solid #ffffff;
    	padding: 11px 15px;
    	background: url(../images/topmenu/spacer.gif) no-repeat right;
    	margin-left: 1px;
    	white-space: nowrap;
    }
     
    ul#tmenu li a:hover { background: #617F8A; }
    ul#tmenu li:hover ul { 
    	display: block; 
    	position: absolute;
    	z-index:100;
    }
    ul#tmenu li:hover li { 
    	float: none;
    	font-size: 60%;
    	z-index:100;
    }
    ul#tmenu li:hover a { z-index:100;background: #617F8A; }
    ul#tmenu li:hover li a:hover { z-index:100;background: #95A9B1; }

  2. #2
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also can someone please look at the contact-form page? I have some float issues

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well this was quite tricky lol . You have to remove the postiion set on the dropdpown <li>s
    Code:
    ul#tmenu li li{position:static}
    I'll look at the contact form page.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh, and also for that you have to remove the XML declaration above the doctype (only remembered that because on your contact page you have it there as well lol . Remove anything above the doctype as that causes quirks mode.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you are only referring to the background image hanging over the left, it's because this element needs haslayout
    Code:
    .inner-tr{zoom:1;}
    I didn't see anything else wrong with the page though
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    I removed the xml decalration and it worked.

    I still have a problem with the contact form though. In IE surprisingly it is how I expect but in FF the labels are hidden behind the inputs/textarea.

    Is it something to do with the floats. All the images on the right are floated right but I have cleared them all

  7. #7
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update....fixed the overhang in with the background image and now the menu doesn't work again. I removed the XML declaration and it worked for a few times but now not at all

    Oh....and I couldn't find that
    Code:
    ul#tmenu li li{position:static}
    anywhere

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have to add that in your CSS file.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Hah, funny people missing that nothing they have said has anything to do with the problem.

    1) You aren't declaring a line-height, and you cannot trust the default line-height. This is why it's rendering broken here in FF as gecko is a complete retard about what &#37; line-heights mean.

    2) You aren't declaring TOP on your nested UL, so it's landing pretty much wherever the hell it likes. Combined with the lack of line-height you are getting a gap between the menu and it's sibling anchor - when you go to move the mouse from the LI/Anchor to the dropdown, you hit the gap, the menu dissapears!

    3) You might try adding a reset so you aren't re-declaring margin:0 padding:0 on every element.

    4) It's absolute, you shouldn't be having to dick with z-index.

    5) You should probably be using that absolute positioning to hide it instead of display:none - since display:none can make screen readers not even see the menu.

    6) Didn't you JUST have another thread with the same basic issues? I believe I wrote up a working example in that one with a rather lengthy explanation.

    If you don't want to make too many changes, strip font-family and font-size for:

    font:normal 21px/24px arial,helvetica,sans-serif;

    (BTW, Verdana is a MS core font, putting arial before it means it will NEVER cascade down, and don't forget to include a fallback-family!)

    Let's see, what are you aiming for there, 48px total height? Ok, so change the padding on the anchors to:

    padding:12px 15px;

    and then for the nested UL's, set

    top:48px;
    left:0;

    We also have that list-style works just as good as the long form, floated elements are inherently display:block so you don't need to re-state that on the LI, position:relative on the parent tmenu will likely negate the need to be screwing around with z-index, just 'right' on background-position is not recognized by all browsers so you have to say BOTH... I'll assume "top right" - margins with floats are problematic, so pad the parent LI instead of the anchor...

    SO...

    Code:
    /* assumes a CSS reset is in use */
    
    * html body {
        behavior: url(csshover3.htc);
    }
     
    #tmenu {
    	position:relative; /* depth sort over later elements */
    	list-style:none;
    	font:normal 21px/24px arial,helvetica,sans-serif;
    	background:url(../images/topmenu/navi_bg.gif);
    }
     
    #tmenu li {
      position: relative;
      float: left;
    }
     
    #tmenu li a {
    	float:left;
    	text-decoration:none;
      padding:11px 15px 12px; /* one less top px due to top border */
      white-space: nowrap;
      color:#FFF;
      background:url(../images/topmenu/spacer.gif) top right no-repeat;
      border-top:1px solid #FFF;
    }
    
    /*
    	11px top pad + 12px bottom pad +
    	24px line-height + 1px border == 48px
    	so we use top:48px on "li ul" since the 
    	default 'fall into place' position cannot
    	be trusted
    */
    
    #tmenu li a:hover {
    	background: #617F8A;
    }
    	
    #tmenu li ul {
    	position:absolute;
    	display:inline; /* IE state 'stick' fix */
    	top:48px;
    	left:-999em; /* way off the left side of the screen */
    }
     
    #tmenu li:hover ul { 
    	display: block; /* IE state 'stick' fix */
    	left:0;
    }
    
    #tmenu li li { 
    	float: none;
    	display:inline; /* get these unstyled */
    	font:normal 13px/15px arial,helvetica,sans-serif;
    }
    
    #tmenu li:hover a {
    	background:#617F8A;
    }
    
    #tmenu li li:hover a {
    	background: #95A9B1; 
    }
    Untested, but should do the job. Be sure you are using the newest csshover3.htc and not one of the old ones.

    TWO important lessons here: NEVER trust the default line-height, and NEVER trust the default placement of an absolute positioned item.

    BTW - you might want to look into REAL sliding doors techniques so you can get rid of that train wreck of nesting for your rounded corners. Feel free to try out my Eight Corners under one roof since it only needs one image to get the job done and by using sandbags before/after for the top/bottom you don't have the nesting hell that older outdated technique does.

  10. #10
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    6) Didn't you JUST have another thread with the same basic issues? I believe I wrote up a working example in that one with a rather lengthy explanation.
    Yes....that is for another menu. This one is for my sister-in-laws website.

    It's been a long time since I've used drop down menus and forgot how Micro$oft are so crap at writing browser software.

    Thanks guys....i got the menu working in IE now.

    Do you know why I'm having the problem with my form on the contact form page? I commented out the floated right images and the form displays properly but i need those images there so it has something to do with the floats.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AdRock952 View Post
    Do you know why I'm having the problem with my form on the contact form page? I commented out the floated right images and the form displays properly but i need those images there so it has something to do with the floats.
    I'm trying to figure out how you are even getting the form to appear next to them in Opera... to appear one atop the other they should be doing a clear:right, which should be forcing the form down the page.

    I'd be wrapping all three images in a DIV, and floating the DIV not the images, that way there's only one element the form has to worry about floating next to. Likewise I'd make sure I had a margin-right equal to the image width so the form doesn't slip 'under' the float.

    Though It's really hard to tell what's going on when it's indented 21 tabs. If you 'have' to nest that deep, you've got some really screwy border methods going on there.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Hah, funny people missing that nothing they have said has anything to do with the problem.
    I truely hope that wasn't directed at me. Because you are completely mistaken if you are. My fixes fix the page. They have everything to do with the problem.
    3) You might try adding a reset so you aren't re-declaring margin:0 padding:0 on every element.
    He had one (I thought one was needed too since I didn't see it cascaded in firebug, though he had it in a CSS file he linked to
    4) It's absolute, you shouldn't be having to dick with z-index.
    As explained earlier the problem with the dropdown is because position:static is needed
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •