SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish2 Dropdown Help - Safari 2.0

    I've been using the HTML Dog's Son of Suckerfish Dropdowns article to set up my own site's multi-level dropdowns.

    I started out with a bare-bones structure, tested it in all browsers, and had satisfactory results.

    However, now that I've started to tweak things, somewhere along the line Safari has started to render extra margins around the dropdowns, which makes it near impossible to get the cursor on the dropdown before it disappears... It works on all other browsers I've tested (though on a PC, IE6 and IE7 sit a little too high, it's acceptable).

    I have two attached files that show the issue. "firefox-capture.png" shows what it should be, and "safari2-capture.png" shows how the menu sits too low.

    Here's the code I'm using for the HTML:

    Code:
      <div id="page-container">
      	
      	<div id="navbar">
      	<form>
      		<ul id="navlist">
      				<li><nobr><a href="#">Applications</a></nobr>
      					<ul>
      						<li><a href="#" class="expand">Apps #1 &gt;</a>
      							<ul>
      								<li><a href="#" class="expand">Aps #1a &gt;</a>
      									<ul>
      										<li><a href="#">App #1a.1</a></li>
      										<li><a href="#">App #1a.2</a></li>
      									</ul>
      								</li>
      								<li><a href="#">App #1b</a></li>
      							</ul>
      						</li>
      						<li><a href="#">App #2</a></li>
      						<li><a href="#">App #3</a></li>
      					</ul>
      				</li>
      				<li><nobr><a href="#">Departments</a></nobr>
      					<ul>
      						<li><a href="#">Dept #1</a></li>
      						<li><a href="#">Dept #2</a></li>
      						<li><a href="#" class="expand">Depts #3 &gt;</a>
      							<ul>
      								<li><a href="#">Dept #3a</a></li>
      								<li><a href="#" class="expand">Depts #3b &gt;</a>
      									<ul>
      										<li><a href="#">Dept #3b.1</a></li>
      										<li><a href="#">Dept #3b.2</a></li>
      									</ul>
      								</li>
      							</ul>
      						</li>
      					</ul>
      				</li>
      				<li><nobr><a href="#">Forms</a></nobr>
      					<ul>
      						<li><a href="#" class="word">Form #1</a></li>
      						<li><a href="#" class="expand">Forms #2 &gt;</a>
      							<ul>
      								<li><a href="#" class="pdf">Form #2a</a></li>
      								<li><a href="#" class="excel">Form #2b</a></li>
      							</ul>
      						</li>
      						<li><a href="#" class="ppt">Form #3</a></li>
      						<li><a href="#" class="newin">Form #4</a></li>
      						<li><a href="#" class="generic">Form #5</a></li>
      					</ul>
      				</li>
      				<li><nobr><a href="#">Events</a></nobr>
      					<ul>
      						<li><a href="#">Upcoming Events</a></li>
      						<li><a href="#">Event Archives</a></li>
      					</ul>
      				</li>
      				<li><nobr><a href="#">Presentations</a></nobr>
      					<ul>
      						<li><a href="#">Presentation #1</a></li>
      						<li><a href="#">Presentation #2</a></li>
      						<li><a href="#">Presentation #3</a></li>
      					</ul>
      				</li>
      			</ul>
      		</form>
      		<div class="clearall"></div>
      	</div>
      	<div id="announcements">
      		<div id="urgent-msgs">
      			<div id="urgent-header"><b><i>Urgent Messages!</i></b> <span class="small">(**#** posts)</span></div>
      			<div id="urgent-open">
      				<div id="urgent-text"></div>
      				<div id="urgent-footer"></div>
      			</div>
      		</div>
      		<div id="bulletin-msgs">
      			<div id="bulletin-header"><b><i>Bulletins</i></b> <span class="small">(**#** posts)</span></div>
      			<div id="bulletin-open">
      				<div id="bulletin-text"></div>
      				<div id="bulletin-footer"></div>
      			</div>
      		</div>
      	</div>
      	<div id="content">
      	
      	</div>
      	<div id="footer">
      				
      	</div>
      </div>
    Here's the code I'm using for CSS on the main Navbar:
    Code:
      #navbar {
      	background: #D6E9F2 url(../images/navbar-bg.gif) repeat;
      	text-align: left;
      	vertical-align: middle;
      	display: block;
      	padding: 3px 5px;
      	clear: both;
      	border-top: 1px solid #94BCD5;
      	border-bottom: 1px solid #94BCD5;
      }
      
      /* ----------------------------------------------- */
      /*				  first level nav				*/
      /* ----------------------------------------------- */
      #navlist, #navlist ul {
      	display: inline;
      	padding: 0px;
      	margin: 4px 0px;
      	list-style: none;
      	line-height: 1em; /* needed for third level nav, might be wrong for Internet Explorer and-or Safari */
      }
      
      #navlist li {
      	display: inline;
      	float: left;
      	margin: 0px 4px;
      }
      #navlist li:hover {
      	color: #000;
      	background-color: #FC3;
      }
      #navlist li.divider{
      	border-top: 1px solid #5880C1;
      }
      
      /* ----------------------------------------------- */
      /*				 second level nav				*/
      /* ----------------------------------------------- */
      #navlist ul {
      	position: absolute;
      	padding: 0px;
      	margin: 1em 0px 0px -7em;
      	width: 10em;
      	left: -999em;
      	background: #D6E9F2;
      	border: 1px solid #5880C1;
      }
      
      #navlist ul li {
      	background: transparent;
      	padding: 0px;
      	margin: 0px;
      	float: left;
      	width: 10em;
      	border-top: 1px solid #D6E9F2; /* border should appear non existent */
      	border-bottom: 1px solid #D6E9F2; /* border should appear non existent */
      }
      #navlist ul li:hover{
      	color: #5880C1;
      	background: #EBF4F9; 
      	border-color: #5880C1;
      }
      
      
      #navlist li:hover ul, #navlist li.sfhover ul {
      	left: auto;
      }
      
      
      /* ----------------------------------------------- */
      /*				 third level nav				 */
      /* ----------------------------------------------- */
      #navlist li ul ul {
      	margin: -1.4em 0 0 10em;
      	background: #B2D6EE;
      }
      
      #navlist li:hover ul ul, #navlist li.sfhover ul ul {
      	left: -999em;
      }
      
      #navlist li li:hover ul, #navlist li li.sfhover ul {
      	left: auto;
      }
      #navlist ul ul li{
      	border-top: 1px solid #B2D6EE; /* border should appear non existent */
      	border-bottom: 1px solid #B2D6EE; /* border should appear non existent */
      }
      #navlist ul ul li:hover{
      	background: #D6E9F2;
      	border-color: #5880C1;
      }
      
      
      /* ----------------------------------------------- */
      /*				 fourth level nav				*/
      /* ----------------------------------------------- */
      #navlist li ul ul ul {
      	background: #88B9D9;
      }
      
      #navlist li:hover ul ul ul, #navlist li.sfhover ul ul ul {
      	left: -999em;
      }
      
      #navlist li li li:hover ul, #navlist li li li.sfhover ul {
      	left: auto;
      }
      #navlist ul ul ul li{
      	border-top: 1px solid #88B9D9; /* border should appear non existent */
      	border-bottom: 1px solid #88B9D9; /* border should appear non existent */
      }
      #navlist ul ul ul li:hover{
      	background: #B2D6EE;
      	border-color: #5880C1;
      }
      
      
      
      /* ----------------------------------------------- */
      /*			 Main Navbar Link Styles			 */
      /* ----------------------------------------------- */
      #navlist a, #navlist a:link {
      	font-size: 1.1em;
      	font-weight: bold;
      	color: #333;
      	text-decoration: none;
      	padding: 2px 4px 2px 4px;
      	margin: 0px;
      	background: transparent; 
      	}	
      
      #navlist ul a, #navlist ul a:link{
      	font-size: .85em;
      	font-weight: normal;
      	color: #333;
      	text-decoration: none;
      	display: block;
      	margin: 0px;
      	padding: 2px 5px;
      }
      
      /* ----------- Special Link Styles ------------ */
      #navlist ul a.expand{
      	background: url(../images/nav-arrow.gif) center right no-repeat;
      	font-weight: bold;
      }
      #navlist ul a.pdf, #navlist ul a.word, #navlist ul a.excel, #navlist ul a.ppt, #navlist ul a.newin, #navlist ul a.generic{
      	padding-left: 20px;
      }
      #navlist ul a.pdf{
      	background: url(../images/nav-pdf.gif) center left no-repeat;
      }
      #navlist ul a.word{
      	background: url(../images/nav-word.gif) center left no-repeat;
      }
      #navlist ul a.excel{
      	background: url(../images/nav-excel.gif) center left no-repeat;
      }
      #navlist ul a.ppt{
      	background: url(../images/nav-ppt.gif) center left no-repeat;
      }
      #navlist ul a.newin{
      	background: url(../images/nav-newin.gif) center left no-repeat;
      }
      #navlist ul a.generic{
      	background: url(../images/nav-generic.gif) center left no-repeat;
      }
    And here's the CSS I'm using for the main page elements:
    Code:
      body, table, td {
      	font: .85em Arial, Helvetica, Geneva, Verdana, sans-serif;
      	color: #666;
      	background: transparent;
      	}
      body { background: #FFF; }
      form {
      	margin: 0px;
      	padding: 0px;
      	}
      ul, ol, li {
      	margin: 0px 0px 0px 10px;
      	padding: 0px 0px 4px 0px;
      	border: 0px;
      	 }
      ul, ol { 
      	margin-bottom: 8px; 
      	}
      input, select, textarea {
      	font: .85em Arial, Helvetica, Geneva, Verdana, sans-serif;
      	vertical-align: middle;
      	font-size: 11px;
      	}
      
      /***********************************************/
      /*				Link Styles				  */
      /***********************************************/
      a:link {
      	color: #5880C1;
      	text-decoration: none;
      	background: transparent; 
      	}
      a:visited, a:active {
      	color: #369;
      	text-decoration: none;
      	background: transparent; 
      	}
      a:hover {
      	color: #5880C1;
      	text-decoration: underline;
      	background: transparent; 
      	}
      
      /***********************************************/
      /*			 General CSS Classes			 */
      /***********************************************/
      
      .lalign {
      	float: left;
      	width: 49.5%;
      	text-align: left;
      }
      .ralign {
      	float: right;
      	width: 49.5%;
      	text-align: right;
      }
      
      .clearall { 
      	clear: both; 
      	height: 0px;
      }
      
      /***********************************************/
      /*		   CSS Positioning Elements		  */
      /***********************************************/
      
      html, body, #page-container, #topbar, #header, #navbar, #announcements, #content, #footer {
      	margin: 0px;
      	padding: 0px;
      	border: 0px;
      	}
      #page-container {
      	/* Liquid layouts need to allow room for error */
      	/* browsers will round percentage widths causing errrors */
      	width: 99%;
      	/* but we don't want line lengths to get TOO long */
      	max-width: 1200px;
      }
      #announcements {
      	display: block;
      }
      #urgent-msgs {
      	width: 49.5%;
      	float: left;
      }
      #bulletin-msgs {
      	width: 49.5%;
      	float: right;
      }
      #urgent-header, #urgent-footer, #bulletin-header, #bulletin-footer {
      	color: white;
      	font-size: .9em;
      	padding: 2px 5px;
      	vertical-align: middle;
      }
      #urgent-header, #urgent-footer {
      	background-color: #C03;
      }
      #bulletin-header, #bulletin-footer {
      	background-color: #009CDC;
      }

    Thanks to anyone and everyone who might have time to look at this!

    Brandon Luhring
    Attached Images Attached Images

  2. #2
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've also just noticed another problem. Hopefully someone else has dealt with it here.

    The Suckerfish dropdowns in question, will be overlapping two <iframe>'s that site side by side. I know, I know... It appears that <iframe>'s will work best with what we're trying to achieve though...

    Regardless, in FireFox 1.5 on a Mac (haven't tested PC yet), the scrollbars for the <iframe> sit ON TOP OF the dropdown menus... See attached image for an example. Only the scrollbars, the content of the <iframe> sits below the menus, as expected. And other browsers like Safari and Opera don't have the issue.

    I've tried position:relative, with a z-index set to -1 for the <iframe> and a z-index of 10 set for the navbar <div>. Didn't change anything...

    Has anyone else dealt with this?

    Thanks,
    B
    Attached Images Attached Images


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
  •