|
CSS - Menu Not Working Properly In Safari
Hi,
While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> Similar TutorialsHi there, I have just made a website using css to pop-out my menus, and they dont seem to work in safari, yet work fine in ie and firefox. The website is overload.net.nz, and the two pop-out tabs are the 'newsletter' tab, and the 'tips' tab. I have used css layers, and is wondering is that is the problem? And I dont have safari to test any changes in, does anyone know of a successful safari pc version yet? I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top. Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7: http://www.groundedgroup.com/clients/NWR/ Here's the respective CSS: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Any ideas on how to make this work properly when used on the side? Thanks in advance. Hi folks Hoping a CSS expert out there might be able to assist. I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768. The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator. In Opera, it is fine at 800x600, but does not render properly at 1024x768 Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari. I am guessing it is something to do with #text ? Do I need to clear: or something like that? If you can help, I would be grateful. Thanks in advance Sol www. waihekemagicmassage.com And: /magic.css I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />
This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code:
@charset "UTF-8";
@media all {
insert css here
}
The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth Hi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! Hi, I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!! Code:
<html>
<head>
<style>
div.box{
float: left;
margin-left: 10px;
margin-bottom:10px;
clear:left;
border: 1px solid black;
width:100px;
}
div.row {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
Hello One
</div>
<div class="box">
Hello Three
</div>
</div>
<div class="row">
<div class="box">
Hello Two
</div>
</div>
</body>
</html>
Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly? regards, sim085 Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work? CSS Code:
#header {
position:relative;
z-index:-1;
float:left;
width:100%;
clear:both;
}
#links {
border:1px solid black;
position:absolute;
z-index:100;
top:10px;
right:20px;
}
HTML Code:
<div id="header">
<object width="550" height="400">
<param name="movie" value="/resourcebank/images/Final_banner.swf">
<embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
</embed>
</object>
<span id="links">
random links
</span>
</div>
This code for my horizontal drop down menu works great in Chrome & Firefox but is shifted to the right in IE. I would like it to line up properly, like it does in Firefox & Chrome. Anyone have any ideas on how to make it IE compatible? Thanks! Here is the test webpage to see it live: artevaggio.com/test/slideshow_sample.html Here is the CSS source: artevaggio.com/test/artevaggio_style.css There also a snippet of CSS when you view the page source code. Thanks! I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us. The link is The problem link Thanks Please look at the menu on this page, http://www.dougswansonre.com/ In IE7 it looks perfect, in FF it looks terrible??? Hi, I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line: <style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style> Now sometimes it works and sometimes it doesn't. I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump. Does anyone know why this is possibly happening? Mike I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block. Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? Hello. I am building a site (perelachaisecemetery dot com)for a friend of my bosses. And I'm having problems with Safari on Mac Zoom Feature. When I zoom out my Nav Menu at the top (as well as my copyright at the bottom) get broken up into two lines. A windows safari user said this is not happening in his browser. It does not happen in Firefox. But it is happening in Chrome. Can anyone recommend anything? Is it something I can code not to happen or is it a individual browser preference thing. Please help. Thanks, Colin Safari 1.2.3 (or so) will display my multi-level CSS-driven menus/ The third-level is set to display with a background color over a text area with a different background. When the user clicks or mouses-off the third-level menu, there is about a 3px vertical remnant of that menu left on screen. What can I do to prevent this? Hi there, I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box. It works correctly on a PC, all browsers. I replaced NAME with ID. Thanks for any help or suggestions! http://www.cofc.edu/~finchj/timeline_not_template.html http://www.cofc.edu/~finchj/style_timeline.css Jannette I have a map on an html page. If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.) You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS. I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything. I thought it was a problem with the z-index, but nothing happens when I change the numbers. What am I doing wrong? Gayle CSS code: PHP Code: #imap { display: block; width: 801px; height: 677px; background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; position: relative; /*margin : 0 auto 2em auto; */ margin: 0 0; background-image: url(Images/RiverBasinMap_DENR.jpg); } #imap a { color: #000; font-family: arial, sans-serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; } a#title, a#title:visited { display: block; width: 801px; height: 0; padding-top : 260px; position : absolute; left: 0; top: 0; cursor: default; text-decoration: none; } * html a#title { height: 677px; height: 0; } #imap a#title:hover { background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; overflow: visible; color: #c00; z-index: 10; } /*BROAD*/ a#broad { display:block; width:141px; height:159px; /*padding-top : 120px;*/ overflow:hidden; position: absolute; left: 285px; top: 295px; overflow: hidden; } * html a#broad { height: 159px; height: 0; } a#broad:hover { background: transparent url(images/Broad_Over.gif) no-repeat 0 0; overflow: visible; z-index: 21; } /*SAVANNAH*/ a#savannah { display: block; width: 181px; height: 313px; /*<!-- padding-top : 120px;-->*/ overflow: hidden; position: absolute; left: 226px; top: 318px; overflow: hidden; } * html a#savannah { height: 313px; height: 0; } a#savannah:hover { background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; overflow: visible; z-index: 20; } HTML code: PHP Code: <body> <dl id="imap" name="imap"> <dt><a id="map" href="#nogo">Test Map</a></dt> <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd> <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd> </dl> </body> Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo hi there, I have a website design which is all fine and I'm happy with although when I view the website in ie6 the menu becomes unusable. Any advice on how to hack at the markup etc will be greatly appreciated :-D The domain name is psweb.co.uk also any feedback on the website is welcome :-) Thanks, Paul |
|||||||