SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    small dropdown menu problem in IE

    Hello, I am having this small problem in Explorer.

    Url is here: http://www.websconsult.com/abelson/

    On the left navigation, the gold area, when you rollover the buttons and the dropdown appears, they appear but there's a slight white border there that shouldnit be there. and my horizontal borders are not there.

    I say this site has been a mess, we had a contractor do the html and CSS and he did a horrible job. I had to take his code and CSS and and fix it as it only worked in Firefox and IE 7.

    If anyone can help me with this last issue that would be great!

    Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it is something to do with the z-index, because that white border thingy is part of the main navigation button graphics...I have droplists set to a higher z-index but its still not working....but of course works in Firefox

    Any ideas?

    thanks!

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

    Yes its a common problem due to IE's buggy handling of z-index.

    You have to set each parent list from the top to the bottom using a descending z-index order so that each one is lower than the one above.

    e.g.

    Code:
    #left_nav li, #left_nav a {
    position:relative;
    display: block;
    width: 228px;
    height: 26px;
    color: black; 
    text-decoration: none; 
    float:left;
    position:relative;
    }
            
    #left_nav li.t-personal-inj
     {background: url(http://www.websconsult.com/abelson/images/left_nav/personal_inj_o.jpg) no-repeat left top;z-index:10}
    #left_nav li.t-vehicle
     {background: url(http://www.websconsult.com/abelson/images/left_nav/vehicle_acc_o.jpg) no-repeat left top;z-index:9}
    #left_nav li.t-medmal
     {background: url(http://www.websconsult.com/abelson/images/left_nav/med_mal_o.jpg) no-repeat left top;z-index:8}
    #left_nav li.t-med-error
     {background: url(http://www.websconsult.com/abelson/images/left_nav/med_errors_o.jpg) no-repeat left top;z-index:7}
    #left_nav li.t-dangerous
     {background: url(http://www.websconsult.com/abelson/images/left_nav/dangerous_prod_o.jpg) no-repeat left top;z-index:6}
    #left_nav li.t-construction
     {background: url(http://www.websconsult.com/abelson/images/left_nav/construct_accidents_o.jpg) no-repeat left top;z-index:5}
    #left_nav li.t-premises
     {background: url(http://www.websconsult.com/abelson/images/left_nav/premises_liability_o.jpg) no-repeat left top;z-index:4}
    #left_nav li.t-insurance
     {background: url(http://www.websconsult.com/abelson/images/left_nav/insurnace_bad_o.jpg) no-repeat left top;z-index:3}
     #left_nav li.t-wrongful-death
       {background: url(http://www.websconsult.com/abelson/images/left_nav/wrongful_death_o.jpg) no-repeat left top;z-index:2}

  4. #4
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! you rock! it was driving me crazy insane!

    Stupid IE, yea I figured it was something like that...but I never seen that bug before and I've done a lot of menus....weird...must happen in only certain conditions. I'll remember this next time...

    thanks again!

  5. #5
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having one more small problem at http://216.197.100.113/

    In IE the dropdowns do not go away when you roll out of the dropdowns...but stick....looks fine in in IE 6

    thanks

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

  7. #7
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops sorry, IE 7.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he means IE 7. Now that my computer is working again, I'll take a look at it once I get the other tabs cleared in my browser.

    (edit: too late - shows how long it's been since I opened the tab and replied to it - that's what happens when one has over 50 tabs open just for SitePoint alone)

  9. #9
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to work fine for me in both IE7 and IE6... no problems with the menus disappearing after mousing out.

    Nadia

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes I have no problems in IE7 either

  11. #11
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks....yes it seems to work fine then it starts doing that. Could it be a server problem? Do you see anything wrong with the CSS/code that it would be doing that?

    thanks

  12. #12
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it on the old development server which seems to be fine in IE 7: http://www.websconsult.com/abelson/del%5Fme/

    It's just the new server at http://216.197.100.113 that seems to be doing it.


    It must be a server problem.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Its still seems ok to me on that second link.

    Are you using the correct IE7 and not the betas?

  14. #14
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Yes, mine IE 7 is not the beta. My coworkers are having the same problem. It works are http://www.websconsult.com/abelson/del%5Fme/ but not at http://216.197.100.113

    really weird problem. Weird thing is if I try to copy the CSS and code from the site at http://216.197.100.113 and overwrite the ones at the other server that other site stops working right too.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I notice that you have saved a BOM in your css that shouldn't be there;

    Code:
    body {
    Get rid of that and then fix the validation errors and we'll take it from there.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here area a couple of other things to try.

    IE7 doesn't need the javascript in order to work but it does need the css to be changed a bit.

    Code:
        #left_nav li ul { /* second-level lists */
        
        position: absolute;
            margin-left: -999em;
            margin-top : -1.35em;
            z-index: 500;
        }
            
        #left_nav li ul li a {
            width: 16em;
            w\idth : 15em;
            display : block;
            color : #FFF;
            font-weight : bold;
            text-decoration : none;
             background-color: #377d7d;
            padding : 4px 0.5em 0 0.5em;    
            font-weight: normal;        
            font-size: 1em;    
            position: relative;
            z-index: 500;    
                    }
        
        #left_nav li ul li a:hover {
            color : white;
            background-color : #720404;
        }
        
        #left_nav li:hover ul ul, #left_nav li:hover ul ul ul, #left_nav li.sfhover ul ul, #left_nav li.sfhover ul ul ul {
            margin-left: -999em;
        }
        
        #left_nav li:hover ul, #left_nav li li:hover ul, #left_nav li li li:hover ul, #left_nav li.sfhover ul, #left_nav li li.sfhover ul, #left_nav li li li.sfhover ul { /* lists nested under hovered list items */
            margin-left: 223px;
        }
    Use margin-left instead of left because it doesn't like it.

    Then hide the JS:

    Code:
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("left_nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    Also add this fix in the IE file.

    Code:
    #left_nav a:hover {visibility:visible}
    Try all that

  17. #17
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul,

    That seems to have fixed it. I did not see any BOM near the body tag and thee was no spaces before it....not sure about that.


    weird problem. What does the fix in the IE css file do? #left_nav a:hover {visibility:visible}

  18. #18
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea about validation, I had to clean up the the contractor person's messy code and CSS, so still has some issues I am slowly fixing....you should've seen it before

    It's launching today, so I had to get some quick fixes and you saved the day!!

    Thanks for all your help!

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I did not see any BOM near the body tag
    It's in the css file and is the first character in the file.

    What does the fix in the IE css file do? #left_nav a:hover {visibility:visible}
    It allows your hover image to show because IE will not action any changes on inner elements in anchors (such as a:hover img {}) unless a reflow is forced and the visibility:visible does just that.

  20. #20
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    weird...I'm not seeing anything before the CSS file....the first characters are body.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    here they are copied from your css file:

    Code:
    &#239;&#187;&#191;body {
    background: #203466 url(../images/background.jpg) center top repeat-x;         
           margin: 0;
           padding: 0;
           color: #000;
           text-align: center;
           font: 76&#37;/1.5 Arial, Helvetica, sans-serif;  
          }
    Your editor is saving the BOM there and it shouldn't be there. See Tommy's (autistic cuckoo) character encoding posts for more info


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
  •