SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu problem in Safari

    No Idea why but only part of the "blue" section in my menu shows when the page loads. Any ideas what might be going on here?

    Here is a screen shot



    And link to the site

    http://vismarkgroup.com/dev/vision/index.php

    Thanks!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, have you managed to fix it? Opera isn't showing that
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    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)
    Hi,
    Your jQuery script is injecting an empty span right before the anchor in each list item.
    Code:
    <script type="text/javascript">
    //<![CDATA[
            $(document).ready(function() {
            
                    $("#topnav li").prepend("<span><\/span>"); //Throws an empty span tag right before the a tag
            
                    $("#topnav li").each(function() { //For each list item...
                            var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
                            $(this).find("span").show().html(linkText); //Add the text in the <span> tag
                    }); 
            
                    $("#topnav li").hover(function() {      //On hover...
                            $(this).find("span").stop().animate({
                                    marginTop: "-50" //Find the <span> tag and move it up 50 pixels
                            }, 250);
                    } , function() { //On hover out...
                            $(this).find("span").stop().animate({
                                    marginTop: "0"  //Move the <span> back to its original state (0px)
                            }, 250);
                    });
            
            });
    //]]>
    </script><!--  initialize the slideshow when the DOM is ready -->
    That span has had a float set on it but there is nothing setting a width or height on the span to allow the BG image to show.

    Code:
    ul#topnav li{
        font: 14px/1.5 Helvetica, Palatino, "Palatino Linotype", serif;
        margin: 0;
        padding: 0;
        overflow: hidden;  /*--Important - Masking out the hover state by default--*/
        float: left;
        height:50px;
        text-shadow: #222222 1px 1px 1px;    
        letter-spacing: .5px;        
    }
    ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
        padding: 15px 20px;
        float: left;
        text-decoration: none;
        color: #f0e8d8;
        background: url(../images/a_bg.gif) repeat-x;
        text-transform: uppercase;
        clear: both;
        line-height: 20px; /*--Vertical alignment of text--*/
    }
    ul#topnav span{ /*--Default state of navigation--*/
        background-position: left top;
    }
    If you will set width:100&#37;; on it then it will force it to find the parent LI's width. That gets it working in Safari for me.
    Code:
    ul#topnav span{ /*--Default state of navigation--*/
        background-position: left top;
        width:100%;/*find the parent (LI) width*/
    }
    Hope that helps! (and makes sense)


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
  •