Menu problem in Safari

HTML & CSS
1

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

Hi, have you managed to fix it? Opera isn’t showing that :slight_smile:

3

Hi,
Your jQuery script is injecting an empty span right before the anchor in each list item.

<script type="text/javascript">
//<![CDATA[
        $(document).ready(function() {
        
                $("#topnav li").prepend("[COLOR=Blue]<span><\\/span>[/COLOR]"); [B][COLOR=Blue]//Throws an empty span tag right before the a tag[/COLOR][/B]
        
                $("#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.


ul#topnav [B]li[/B]{
    font: 14px/1.5 Helvetica, Palatino, "Palatino Linotype", serif;
    margin: 0;
    padding: 0;
    overflow: hidden;  /*--Important - Masking out the hover state by default--*/
[COLOR=Blue]    float: left;
    height:50px;[/COLOR]
    text-shadow: #222222 1px 1px 1px;    
    letter-spacing: .5px;        
}
ul#topnav a, ul#topnav [B]span[/B] { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
    padding: 15px 20px;
    [COLOR=Blue]float: left;[/COLOR]
    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 [B]span[/B]{ /*--Default state of navigation--*/
    background-position: left top;
}

If you will set width:100%; on it then it will force it to find the parent LI’s width. That gets it working in Safari for me.

ul#topnav [B]span[/B]{ /*--Default state of navigation--*/
    background-position: left top;[COLOR=Blue]
    width:100%;/*find the parent (LI) width*/[/COLOR]
}

Hope that helps! (and makes sense) :wink: