SOLVED: Safari not displaying menu but others are..

[jeffmc21]

SOLVED
The link to my temporary page I'm working on is "www.fortymarketing.net/temp1.html".

If you view the page in IE or FF, the dropdown menu in the top right appears just fine, but in Safari its totally missing. I have no idea why this is, and I've looked at everything I can think of that might cause the problem.

Granted, it's not the best menu solution AT ALL, but it worked, allowed me to style it as I wanted, and looked ok.


Any ideas why it's not displaying in Safari? If I go to the demo page where I got the menu, they display fine, just mine isn't displaying.

[jcdevelopment]

this may cause others to break but this snippent here


#mainmenu {standard.css (line 31)
display:inline;
float:right;
margin-top:-50px;
padding-right:45px;
text-align:left;
}


try this instead

#mainmenu {standard.css (line 31)
display:inline;
float:right;
margin-top:50px;
padding-right:45px;
text-align:left;
}

[jeffmc21]

That did make it become visible in Safari, however, now, in FF and IE, the menu displays 50px down the page, which puts over the blue part of the bg image. In Safari it displays properly (except for being too far to the right, but that's a different issue). Any suggestions on how to get it back up into position at the top in the browsers other than Safari.

I left the change to the CSS on the server, so that you could see what I'm talking about.

[jcdevelopment]

try this, take off the top-margin first off. like so


#mainmenu {
text-align:left;
display:inline;
float:right;
margin-right:45px;

width:50%;
}


then add this to your HTML in the proper spot shown


<div id="logo">
<img src="images/logo.gif" alt="Forty Logo" width="290" height="93"></div>
<div style="clear:both;></div>
<div id="mainmenu">
<div class="chromestyle" id="chromemenu">


Let me know if that works, cant tell in safari

[jeffmc21]

That worked well, and allowed the page to render "readably" in all browsers.

However, I chose to go with (at least for the time being) a hack I found that allows me to set some Safari-specific CSS. I don't always like hacks, but I understand the need for them occasionally. The hack is:


#mainmenu {
display:inline;
float:right;
margin-top:-50px;
padding-right:45px;
text-align:left;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#mainmenu { margin-top:50px; }
}

[jcdevelopment]

ok, yeah, either one works. Sometimes you need to use hacks for IE6 and IE5 mac. So whatever works i suppose.