SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown quit working

    www.outlawracing.com
    Mouse over class info, suppose to be a dropdown. If you click on forums and then do it, it works. The forums and index page use separate stylesheets and html. I didn't think I changed anything, specifically nothing to do with that navigation.. but I must be wrong. Notice anything that would indicate the problem? The stylesheet specific for this is www.outlawracing.com/stylesheets/main.css
    The stylesheet specific for the forums is www.outlawracing.com/stylesheets/forums.css

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I have no idea what happened but a few things seem to be screwed up slightly. Hrmmmmm

  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All of your .css files are coming back as 404 errors. Maybe an incorrect path issue?

    http://www.outlawracing.com/forums/s...themelinks.css

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rustybuddy View Post
    All of your .css files are coming back as 404 errors. Maybe an incorrect path issue?
    Where do you see that at? Would be odd because the site is layed out correctly, except for a few things. I'll check my paths but it just doesn't seem right since everything is in it's place correctly

    edit: the link you posted "shouldn't" have anything to do with these problems.

  5. #5
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see 7 .css files returning as 404 errors for this page (6 + the one I posted above).

    I don't know that any of them are attributing to the problem, but it would be very important to either remove them if not needed or correctly path them or upload them.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rustybuddy View Post
    I see 7 .css files returning as 404 errors for this page (6 + the one I posted above).

    I don't know that any of them are attributing to the problem, but it would be very important to either remove them if not needed or correctly path them or upload them.
    How about now?

  7. #7
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's better. Could you post the javascript used for the dropdown?

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I THINK this it the javascript:
    Code:
    <!--[if lt IE 7.]>
    
    <script language="JavaScript" type="text/javascript">
    
    sfHover = function() {
    	var sfEls = document.getElementById("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>
    I don't really do good with javascript, so I just copy and paste stuff if it deals with javascript. This is in a lower than ie7 conditional though. I don't think it uses javascript for other browsers. Again, this was working earlier today and I haven't touched javascript any, I'm not sure what I did..
    It's suppose to be your basic suckerfish dropdown.


    edit: notice the www.outlawracing.com/index.php?page=registration page, the fields are not getting the styles applied to them.
    edit2: nevermind, you have to be signed in to view that page ^ but they have a class=textfield and in my main.css I have styling applied to .textfield. I don't get it.

  9. #9
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you got me. That's why I asked you to post the js, b/c I wasn't seeing it anywhere. I did see this conditional but kinda ignored it....

    maybe just remove the conditional statements and see what happens?

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't do a thing. I'm really confused. Even if my host was changing some version of languages.. that shouldn't affect my textfields on the other page.. I can open the page up for viewing if you would like to see it?

  11. #11
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you have a backup version of the page from earlier today when it was working?

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not that I know of. Usually when I'm working on stuff, it's small and if anything happens I usually do it in small sections and can just easily undo it. This seems to have slipped by, and it's odd that it's that and those textfields (all I've noticed so far). The textfields were working 2 hours ago. I haven't really done anything since. I the position of an element, through main.css. Uploaded the file, saw what it did. I undid the change and uploaded main.css again, and it put it back in place. That's when I *noticed* it, but there's no way that caused all this. ;/

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I notice in your conditional comments you have a . here. I don't know whether that was a cause (about to go out) but make sure your code is valid
    Code:
    <!--[if lt IE 7.]>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't fix it

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

    Your stylesheets in the first link are a mess of conflicting and invalid rules.

    e.g.

    Code:
    #nav li:hover ul {
        text-align: center;
        background-color: #000;
        border: solid 1px #504939;
        /*left: 405px;/*
        /*top: 49px;/*
        margin-left: 0;
        height: 90px;
        width: 105px;
        border-top: solid 0px;    
    }
    Those comments are incorrect and result in the rest of that stylesheet being commented out also! (/* a css comment */)

    You also have this code way down the stylesheet that ensures the dropdown will never show:

    Code:
    #nav li:hover ul,
    #nav li:hover ul ul,
    #nav li.sfhover ul, 
    #nav li.sfhover ul ul {
        margin-left:-999em;
    }
    The dropdown can never work with that rule in place as it will always be way off screen. If you remove that last rule then fix the comments as shown below the dropdown should work.

    Code:
    #nav li:hover ul {
        text-align: center;
        background-color: #000;
        border: solid 1px #504939;
        /*left: 405px;*/
        /*top: 49px;*/
        margin-left: 0;
        height: 90px;
        width: 105px;
        border-top: solid 0px;    
    }
    You haven't added any of the hover rules for ie6 although you have the js in place for it (e.g. #nav li.sfhover ul{}).

    You also have rules like this:

    Code:
    /* Set big button dimensions */
    .buttons div.reply-icon        { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
    .buttons div.post-icon        { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
    .buttons div.locked-icon    { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
    .buttons div.pmreply-icon    { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
    .buttons div.newpm-icon        { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
    .buttons div.forwardpm-icon    { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }
    Which look as though they should have been parsed by PHP before the browser sees them.

  16. #16
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks for pointing that out to me. I think I was working on this trying to get the drop down to work in IE 5 and 6, got pulled off on to something else and forgot I was in the middle of it. My problem with IE 5/6 is that the hover works, but it ends up showing really far to the right of the page and I can't seem to do anything to tame it. (that's what it was doing) Right now it just doesn't work for ie5/6 at all. It is working in ie7/8 and FF though, so that's definitely getting somewhere.

    Oh, that last part is phpbb's code, I'm not touching it.

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    You also have this code way down the stylesheet that ensures the dropdown will never show:

    Code:
    #nav li:hover ul,
    #nav li:hover ul ul,
    #nav li.sfhover ul, 
    #nav li.sfhover ul ul {
        margin-left:-999em;
    }
    The dropdown can never work with that rule in place as it will always be way off screen....
    Hi,
    I think that entire syntax got into the OP's stylesheet by mistake. That was some code from an example I posted in his other thread.

    I was just showing how to set up the classes for the IE6 sfhover script.

    The code above was to hide the 3rd level sublist while hovering on the 2nd level sublist items that did not have sub/ul's

    It worked in my case because I was overriding them lower down in the cascade. It was never intended to be pasted into the OP's stylesheet, rather just an example to show the sfhover class for IE6.

  18. #18
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    I think that entire syntax got into the OP's stylesheet by mistake. That was some code from an example I posted in his other thread.

    I was just showing how to set up the classes for the IE6 sfhover script.

    The code above was to hide the 3rd level sublist while hovering on the 2nd level sublist items that did not have sub/ul's

    It worked in my case because I was overriding them lower down in the cascade. It was never intended to be pasted into the OP's stylesheet, rather just an example to show the sfhover class for IE6.
    I think I had put it there to test quickly, then remove and that's when I got removed from what I was doing.

    I threw it back in, but inside the IF LT iE7 conditional and it didn't help 5/6 do a thing. That's all I just removed so that is kind of odd. I'm going to go back to the other thread to recap on what you said, but I think I'm stuck

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You'll need this to show the dropdown in iE6:
    Code:
    #nav li:hover ul,
    #nav li.sfhover ul {
        text-align: center;
        background-color: #000;
        border: solid 1px #504939;
        /*left: 405px;*/
        top: 49px;
        margin-left: 0;
        height: 90px;
        width: 105px;
        border-top: solid 0px;    
    }

  20. #20
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That's all I just removed so that is kind of odd. I'm going to go back to the other thread to recap on what you said, but I think I'm stuck
    Here is a standalone version of your menu with the IE6 script in place. I eliminated some of the repetitive rules in the css.

    I got rid of the <li class="dropdown-style"> and just set those rules on the "li li a"

    Live Demo Here

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dropnav Test</title>
     
    <style type="text/css">
     
    #nav, #nav ul {
    padding:0;
    margin:0;
    list-style:none;
    }
    #nav {
    width:1022px;
    margin-left:12px;
    }
    #nav li,
    #nav li a{
    position:relative;
    float:left;
    text-decoration:none;
    }
    #nav li span{
    display:none;
    }
    #nav li li span{
    display:block;
    }
    #news{
    float:left;
    width:94px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/news.jpg") no-repeat 0 0;
    }
    #news:hover{
    background-position: 0 -58px;
    }
    #forums{
    float:left;
    width:79px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/forums.jpg") no-repeat 0 0;
    }
    #forums:hover{
    background-position: 0 -58px;
    }
    #classifieds{
    float:left;
    width:106px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/classifieds.jpg") no-repeat 0 0;
    }
    #classifieds:hover{
    background-position: 0 -58px;
    }
    #raceschedule{
    float:left;
    width:127px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/raceschedule.jpg") no-repeat 0 0;
    }
    #raceschedule:hover{
    background-position: 0 -58px;
    }
    #rulebooks {
    position:relative;
    float:left;
    width:105px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/classinfo.jpg") no-repeat 0 0;
    }
    #rulebooks:hover {
    background-position: 0 -58px;
    }
    #standings{
    float:left;
    width:96px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/standings.jpg") no-repeat 0 0;
    }
    #standings:hover {
    background-position: 0 -58px;
    }
    #records {
    float:left;
    width:86px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/records.jpg") no-repeat 0 0;
    }
    #records:hover {
    background-position: 0 -58px;
    }
    #photogallery {
    float:left;
    width:125px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/photogallery.jpg") no-repeat 0 0;
    }
    #photogallery:hover {
    background-position: 0 -58px;
    }
    #racerprofile{
    float:left;
    width:164px;
    height:58px;
    background: url("http://www.outlawracing.com/images/nav/racerprofile.jpg") no-repeat 0 0;
    }
    #racerprofile:hover{
    background-position: 0 -58px;
    }
     
    /*=== Sublist Styles ===*/
    #nav li ul {
    position:absolute;
    width:105px;
    left:0;
    top:49px;
    margin-left:-999em;
    background:#000;
    border:solid 1px #504939;
    border-top:solid 0px;
    text-align:center;
    }
    #nav li:hover ul,
    #nav li.sfhover ul {
    margin-left:0;
    }
    #nav li li {
    float:none;
    display:block;
    }
    #nav li li span{
    display:block;
    }
    #nav li li a {
    float: none;/*reset the float from #nav li a*/
    display:block;
    width:101px;
    margin-left:2px;
    margin-top:2px;
    font-size:12px;
    line-height:20px;
    background-color:#18150e;
    color:#FFF;
    }
    #nav li li a:hover {
    background-color:#26230d;
    text-decoration:none;
    }
    </style>
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
    var sfEls = document.getElementById("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]-->
     
    </head>
    <body>
     
    <ul id="nav">
        <li><a id="news" href="index.php?page=news" title="news"><span>News</span></a></li>
        <li><a id="forums" href="forums/" title="forums"><span>Forums</span></a></li>
        <li><a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a></li>
        <li><a id="raceschedule" href="../index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a></li>
        <li><a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>
            <ul>
                <li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
                <li><a href="index.php?page=payout" title="payouts"><span>Fees &amp; Payouts</span></a></li>
                <li><a href="index.php?page=contingency" title="contingency"><span>Contingency</span></a></li>
                <li><a href="index.php?page=registration" title="registration"><span>Registration</span></a></li>
            </ul>
        </li>
        <li><a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a></li>
        <li><a id="records" href="index.php?page=records" title="records"><span>Records</span></a></li>
        <li><a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a></li>
        <li><a id="racerprofile" href="index.php?page=racerprofile" title="racerprofile"><span>Racer Profile</span></a></li>
    </ul>
     
    </body>
    </html>

  21. #21
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your test works in IE6 but not 5, which you said 6.. is it not possible to do something like this in 5? Thanks for the help!


    edit: Ah, this worked for me, 5 & 6. There are a few menu styling issues between the two, but those can be fixed in the conditional. Thanks again


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
  •