CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

IE and Konqueror CSS drop downs a la suckerfish problems

Discuss IE and Konqueror CSS drop downs a la suckerfish problems in the CSS Help forum on Dev Shed.
IE and Konqueror CSS drop downs a la suckerfish problems Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 30th, 2004, 05:46 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
IE and Konqueror CSS drop downs a la suckerfish problems
Hi all,

The following CSS and HTML work fine in Mozilla, Netscape and Firefox.

It can be viewed in action at:
http://www.sirfragalot.com/wikindx2/

(choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.)

I have two questions:

1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix?

2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix?

HTML CODE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">

<ul id="nav">
  <li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
          <ul>
            <li><a class="menu" href="index.php">Home</a></li>
            <li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>

          <ul>
            <li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
            <li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
            <li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>

          <ul>
            <li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
            <li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
            <li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>

          <ul>
            <li><a class="menu" href="index.php?action=listDisplay">List</a></li>
            <li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
            <li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
            <li><a class="menu" href="index.php?action=resourceNew">New</a></li>
          </ul>
  </li>

  <li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
          <ul>
            <li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
            <li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
            <li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
            <li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>

            <li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
            <li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
          <ul>
            <li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>

          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
          <ul>
            <li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
            <li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
          </ul>

  </li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>


CSS CODE:
Code:
body {
   background   :   #74664a;
   font-family   :   sans-serif;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

#nav a {
   display: block;
   width: 7em;
}

#nav li {
   float: left;
   width: 7em;
   background   :   red;
}
#nav li ul {
   position: absolute;
   width:  7em;
   left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}
/* End Suckerfish Style */


/* Standard links such as top menu links */
A:visited, A:link, A:active {
   text-decoration   :   none;
   color      :   #74664a;
   background   :   #efd197;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
A:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
   text-decoration   :   none;
   color      :   #74664a;
   display      :   block;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   background   :   #efd197;
   font-size   :   0.9em;
   text-align   :   left;
}
A.menu:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   display    :   block;
   color      :   #74664a;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   font-size   :   0.9em;
   text-align   :   left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
   text-decoration   :   none;
   color      :   red;
   background   :   transparent;
   border      :   none;
}
A.link:hover, A.page:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
   text-decoration   :   none;
   background   :   transparent;
   color      :   #f6eedf;
   border      :   none;
}
A.rLink:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
A.imgLink:hover {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
/*****
*  .titleTable:  the table containing the title bar
*****/
.titleTable {
   width      :   90%;
}
/*****
*  .menuTable:  the table containing the drop-down menus
*****/
.menuTable {
   margin      :   0 0 0 5%;
}
/*****
*  .menuLi:  text-color in list items of the drop-down menus
*****/
.menuLi {
   color      :   black;
}
/*****
*  .mainTable:  the table containing the main content of WIKINDX
*****/
.mainTable {
   border      :   none;
   width      :   90%;
   padding      :   0.2em;
   clear      :   both;
}
/*****
*  redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4   {
   color      :   #f6eedf;
   margin      :   0 0 1em 0;
}
/*****
*  .footerFooter:  footer information at end of script - part of a table
*****/
.footerTable  {
        font-size   :   0.6em;
   color      :   #f6eedf;
   width      :   90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
   background   :   red;
   color      :   black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
   background   :   #33ff00;
   color      :   black;
}
/*****
*   .small: small text
*****/
.small, .hint {
   font-size   :   0.8em;
}
/*****
*   .hint: text hints given to provide further information usually on form input.  Often used in conjunction
*      with .small and usually the class of <span>....</span>
*****/
.hint   {
   color      :   #f6eedf;
}
/*****
*   alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/*   background   :   #efd197; */
/*   background   :   #f8efdf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
.alternate2 {
/*   background   :   #ede5d8; */
/*   background   :   #f6eedf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/*****
*   .highlight:   highlight <span>search terms</span> in text
*****/
.highlight {
   color      :   #583b04;
   background   :   yellow;
}
/*****
*   .required:   highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
   color      :   red;
}
Reply With Quote
  #2  
Old July 3rd, 2004, 05:47 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
no-one?
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > IE and Konqueror CSS drop downs a la suckerfish problems

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway. 
Stay green...Green IT