CSS - Ie And Konqueror Css Drop Downs A La Suckerfish Problems

Hi there,

I have this css to display some drop downs, but the drop downs are not showing in IE, but they are in FF.

any ideas why?
Code:

#navt,
#navt ul {
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}
#navt a {
  display: block;
  z-index: 1000;
  width: 10em;
}
#navt li {
  float: left;
  z-index: 1000;
  width: 10em;
}
#navt li ul {
  z-index: 1000;
  position: absolute;
  width: 10em;
  left: -999em;
}
#navt li:hover ul {
  z-index: 1000;
  left: auto;
}
#navt li:hover ul,
#navt li.sfhover ul {
  z-index: 1000;
  left: auto;
}

Hello All,

I'm working on this site at the moment:
http://www.whitecapgraphics.com/APP

Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why?

(No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.)

CSS:
Code:

* {margin:0; padding:0;}
body {
	background-image:url(images/background.gif);
	color:#450109;
}
a {
	color:#450109;
	text-decoration:none;
	font-weight:bold;
	font-variant:small-caps;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:.9em;
}
a:hover {
	color:#D6970C;
	text-decoration:overline underline;
}

div#main {
	background-color: #FFFFFF;
	margin: auto;
	width: 95%;
	border-width: 0px 5px 0px 5px;
	border-style: solid;
	border-right-color: #450109;
	border-left-color: #D6970C;
	border-bottom:15px solid #450109;
}
#main #logo {
	background-image:url(images/logo.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#71001E;
}
#main #leftflourish {
	float:left;
}
#main #rightflourish {
	float:right;
}
div#navigation {
	background-color:#400000;
	float: right;
	margin: 0;
	width: 100%;
	min-height: 24px;
}
div#navigation ul {
	margin-left: 193px;
	padding-left: 5px;
	padding-right: 5px;
}
div#navigation ul li {
	background-color: #400000;
	float: left;
	list-style-type:none;
	width: 25%;
	position: relative;
	z-index:99;
}
div#navigation a {
	text-decoration:none;
	font-variant:normal;
	color: #DFCDB6;
	text-align:center;
	display: block;
	width: 100%;
	line-height: 25px;
	font-family: serif;
	font-size:1.1em;
	font-weight:normal;
}
div#navigation a:hover {
	color: #FFCC00;
}
div#navigation ul li ul {
	width: 90%;
	padding: 0;
	margin:0;
	margin-left:5%;
	margin-right: 5%;
	position:absolute;
	display: none;
}
div#navigation ul li ul li {
	width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}

div#lcolumn {
	width: 190px;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	top: -66px;
	z-index:999;
}
div#lcolumn ul li {
	list-style-type:none;
	text-align:center;
	width: 167px;
	padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
	background-image: url(images/yapdropback.jpg);
	display: block;
	background-repeat: no-repeat;
	min-height: 24px;
	color:#DFCDB6;
	text-decoration:none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:.9em;
	line-height: 24px;
	letter-spacing: -.02em;
	font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
	color: #ffcc00;
}
#main #body #lcolumn #featureContent {
	padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
	padding-right: 30px;
	padding-top: 60px;
	background-image: url(images/featuresback.jpg);
	background-repeat: no-repeat;
}
#main #body {
	background-image:url(images/chaser.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	position: relative;
	margin-bottom:3em; /*1.25 + 1.75*/
	clear:both;
}
#main #body #content {
	padding-left: 200px; /*fix for IE - it's including from side of L Column*/
	position: absolute;
	top: 48px;
	z-index:1;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	line-height:1.1em;
	text-transform: uppercase;
	color: #350000;
	width: 50%;
}
#main #body #content div ul li {
	float: right;
	list-style-type:none;
	padding-left: 2%;
	top: .4em;
	line-height:2.2em;
	display:block;
	font-weight:bold;
}
h2 {
	position:relative;
	width: 98%;
	background-image:url(images/navback.jpg);
	background-repeat:repeat-x;
	padding-top:1%;
	font-family: "Times New Roman", Times, serif;
	font-size: 1.2em;
	text-indent: 2em;
}
#main #body #content div ul {
	width: 46%;
	position: absolute;
	top: .4em;
	right:0;
	padding-right:4%;
}
h1:first-letter {
	font-size: 1.7em;
}

#content p {
	padding: 2em;
}

#main #footer {
	text-align: center;
	position:relative;
	top: -1em;
}

/* Aslett Clearing Method */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */

drlinklove.com/drew/index4.html

Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options.

Anyone have a guess to how I can make it more stable?

Hi everyone,

So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details.

The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is.

Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible?

I'll be anxious for your feedback, this has been driving me crazy all day.

Here's the code.

XHTML:
Code:

<div id="nav">
<ul>
<li class="one"><a href="#"><img src="images/home.gif" /></a></li>
<li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a>
<ul>

<li><a href="#">sublink 1</li></a>
<li><a href="#">sublink 2</li></a>
</ul>
</li>
</ul>
</div>

CSS
Code:

#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}

#nav ul li.one img {
border: 0;
}

#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}

#nav ul li.two img {
border: 0;
}

/* - begin level 2 - */

#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 116px;
}

#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 113px;

}

#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}

#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}

JavaScript
Code:

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);

It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu.

I look forward to your insight!

Thanks!

-Brian

I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6:

1. The menu is sitting lower in IE than in FF.

2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere.

Here's the url: menu

Please help. Thanks.

Brad

http://www.describe.org/homework/esdcar
http://www.describe.org/homework/esdcar/esdcar.css

Three things: One is that in FF, etc, the dropdown for the single level labels (about, events) as opposed to the doubledecker ones (buyers) start too high -- not at the bottom of the box. I've tried playing with padding, height, margins...I must not have hit on the right combo yet, but I can't get it right.

The second, though minor, is why there's a tiny crack that appears between one set of boxes (which set changes). I tried bumping up the width on one box by a tenth but that just caused the whole menubar to wrap down to a second line.

The third is that the javascript doesn't work on IE. I copied it straight from the suckerfish/html dog tutorial and substituted the appropriate div name, but it's not working. (I haven't tried fixing anything else in IE yet, so it all looks bad...but the js should work.)

late edit: I forgot to say that if I could, I'd like the single-level labels to be centered vertically, too, instead of up at the top...

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

Here's a selection of my code where I think the problem is happening:

Code:

<div id="nav">
   	<ul id="dd">
       	<li id="hm"><a href="menu.html">Menu</a></li>
        <li id="au"><a href="about_us.html">About Us</a></li>
        <li id="oc"><a href="#">Our Coffee</a>
        	<ul>
            	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
            	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
            	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
            </ul>
        </li>
        <li id="os"><a href="os_hy.html">Our Stores</a></li>
        <li id="ols"><a href="online_store.html">Online Store</a></li>
        <li id="oct"><a href="our_culture.html">Our Culture</a></li>
    </ul>
</div>  

Code:

#nav ul li ul li a {
	display: block;
	height: 0px;
	overflow: hidden;
}

#dd li#oc a {
	display: block;
	width: 95px;
}

#dd li#oc {
	float: left;
	width: 95px;
}

#dd li#oc ul {
	position: absolute;
	width: 95px;
	left: -9999px;
}

#dd li#oc:hover ul {
	left: auto;
}


#dd li#oc:hover ul, #dd li.sfhover ul {
	left: auto;
}

li#oc ul li a {
	height: 0px;
	display: block;
	overflow: hidden;
}

#oc_dd_ko a {
	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ko a:hover {
	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ma a {
	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ma a:hover {
	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ka a {
	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#oc_dd_ka a:hover {
	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#dd, #dd ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

Any suggestions would be appreciated.

hey guys,

im not the greatest with css and html but i do it for fun to try and teach myself.

Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down.

The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc)

and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating.

What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big.

Here is my CSS for the drop.

Code:

#nav li ul {
	background: #FCDFFF;
	background-image: url('images/background.png');
	border-style: ridge;
	border-width: 5px;
	border-color: #000000;
        margin-top: 0px;
	position: absolute;
	font-size: 95%;
	width: 11em;
	left: -999em;
	line-height: 2;
	z-index: 999;
}

anybody know how I can do what Im looking for?

Thanks in advance!

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out.

First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset.

Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ...

Thanks for any comments / thoughts.

Tom

========================================================

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
	margin-left: 1em;
}

.mainlist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mainitem {
	float: left;
	position: relative;
	width: 120px;
	text-align: center;
	cursor: hand;
	padding: 0;
	border-top: 1px solid green;
	border-left: 1px solid green;
	border-bottom: 1px solid green;
}

.mainitem a {
	font-weight: bold;
	color: green;
	text-decoration: none;
}

.mainitemlast {
	border-right: 1px solid green;
}

.mainlist li:hover ul {
	display: block;
	left: 0;
}

li.over ul {
	display: block;
	left: 0;
}


.sublist {
	display: none;
	position: absolute;
	float: left;
	top: auto;
	font-weight: normal;
	background-color: #CCCCFF;
	width: 150px;
	padding: 0;
}

.subitem {
	display: block;
	float: left;
	position: relative;
	left: 0;
	width: 100%;
	border-top: 1px solid blue;
	border-left: 1px solid blue;
	border-right: 1px solid blue;
}

.subitemlast {
	border-bottom: 1px solid blue;
}

.subitem a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 5px;
}

.subitem a:hover {
	background-color: #EEEEFF;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">
<br>

<ul class="mainlist" id="nav">
	<li class="mainitem">
		<div><a href="">Option 1</a></div>
		<ul class="sublist">
			<li class="subitem"><a href="">Subitem 1</a></li>
			<li class="subitem"><a href="">Subitem 2</a></li>
			<li class="subitem"><a href="">Subitem 3 is longer</a></li>
			<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
		</ul>
	</li>

	<li class="mainitem">
		<div><a href="">Option 2</a></div>
		<ul class="sublist">
			<li class="subitem"><a href="">Subitem 1</a></li>
			<li class="subitem"><a href="">Subitem 2</a></li>
			<li class="subitem"><a href="">Subitem 3 is longer</a></li>
			<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
		</ul>
	</li>

	<li class="mainitem mainitemlast">
		<div><a href="">Option 3</a></div>
		<ul class="sublist">
			<li class="subitem"><a href="">Subitem 1</a></li>
			<li class="subitem"><a href="">Subitem 2</a></li>
			<li class="subitem"><a href="">Subitem 3 is longer</a></li>
			<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
		</ul>
	</li>
</ul>
</div>
</body>
</html>

shades under konqueror?
look at this page:
http://planet.ubuntulinux.org/
there're shades under news titles...

Hi, I'm using a floated division for my menu; and using relative positioning to move this slightly to the left and up - you can see it here.
It works in all browsers I've tried except Konqueror - the positioning simply has no effect . Also: the content of the main division (to the right) becomes completely distorted when scrolling - again: only when using Konqueror . Could this be due to the fact that they are floated divs?

The code is valid HTML and CSS. Is Konqueror non-compliant with W3 Standards? Should I bother trying to accommodate it?

Anyone have any ideas?

Could someone explain me how to get rid of the gap at the bottom of this page?

This works on Opera while still working on IE and Firefox. Does it work on Konqueror? html4strict Code:
Original - html4strict Code <style type="text/css"> wbr { display: inline-block; width: 0; overflow: hidden; } .test { width: 150px; } </style> <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div>

  

 <style type="text/css">


 wbr


 {


  display: inline-block;


  width: 0;


  overflow: hidden;


 }


 .test


 {


  width: 150px;


 }


 </style>


 <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div>