7 replies [Last post]
teachingking
Offline
newbie
Last seen: 6 years 2 days ago
Joined: 2008-11-24
Posts: 3
Points: 0

Hello,
I could sure use some help. I had someone design a 3rd level flyout for my CSS Menu. When viewed in IE6, the 3rd level doesn't open properly, but rather overlaps the 2nd level. You can see this by opening www.healing-with-probiotics.com/test-menu.html in IE6. I am not skilled with CSS and would appreciate any help. I have include the CSS and Menu code below.
Thanks,
Aaron

CSS

div.full-width-box2 {text-align:left;}
td.contentbg {text-align:left;}
 
#css-menu {background:#333; height:21px; padding:0; margin:0; list-style:none; border:1px solid #333;}
#css-menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px;}
#css-menu table {border-collapse:collapse: padding:0; position:absolute; left:0; top:0; width:0; height:0; font-size:1em;}
#css-menu li {float:left;}
#css-menu li a {color:#fff; text-decoration:none; padding:0 25px 0 4px; height:21px; line-height:21px; display:block; float:left; font-family:verdana, sans-serif; font-size:11px;}
 
#css-menu li a.first {padding-left:18px; padding-right:20px;}
#css-menu li a.second {padding-right:20px;}
 
#css-menu li:hover {position:relative;}
#css-menu li a:hover {background:#936d55; position:relative;}
#css-menu li:hover > a {background:#936d55;}
 
#css-menu :hover ul {left:-1px; top:21px; width:150px; border-bottom:1px solid #491b1b;}
#css-menu :hover ul.wide {width:200px;}
 
#css-menu ul li {border:1px solid #491b1b; width:149px; margin-bottom:-1px;}
#css-menu ul.wide li {width:198px;}
#css-menu ul li.line {height:1px; background:#000; overflow:hidden;}
#css-menu :hover ul li a {width:145px; background:#9eb277; text-align:left; padding-right:0;}
#css-menu :hover ul.wide li a {width:194px;}
#css-menu ul li a:hover {background:#869666;}
 
#css-menu ul li ul.wide2 {padding:0; margin:0; list-style:none; left:-9999px; top: -9999px;}
#css-menu ul li:hover ul.wide2 {width:200px;left:199px;top:0px;}
 
#css-menu :hover ul li a.triangle {background-image: url(<a href="http://www.healing-with-probiotics.com/image-files/w-arrow.png" rel="nofollow">http://www.healing-with-probiotics.com/image-files/w-arrow.png</a>); background-position: right; background-repeat: no-repeat;}
 
#css-menu :hover ul li ul li a {background-color:#d79655;} /* normal background */
#css-menu ul li ul li a:hover {background-color:#9c6e41;} /* hover background */

<ul id="css-menu">
	<li><a class="first" href="index.html">Home</a></li>
	<li><a class="second" href="contact-us.html">Contact Us</a></li>
	<li>
		<a href="#url.html">Probiotics Guide<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="wide">
			<li>
				<a href="probiotics.html" class="triangle">Probiotics 101<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="wide2">
					<li><a href="pr1.html">PR 1</a></li>
					<li><a href="pr2.html">PR 2</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="history-of-probiotics.html">History of Probiotics</a></li>
			<li><a href="probiotic-strains.html">Probiotic Strains</a></li>
			<li><a href="probiotic-buyers-guide.html">Probiotic Buyers Guide</a></li>
			<li>
				<a href="probiotic-supplements.html" class="triangle">Recommended Supplements<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="wide2">
					<li><a href="pr1.html">PR 1</a></li>
					<li><a href="pr2.html">PR 2</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li class="line"></li>
			<li><a href="cultured-dairy.html">Cultured Dairy</a></li>
			<li><a href="kefir.html">Milk Kefir</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#url">Digestive Health<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="inner-ecosystem.html">Inner Ecosystem</a></li>
			<li><a href="natures-inoculation.html">Nature's Inoculation</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#url">Disorders<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="wide">
			<li><a href="autism.html">Autism</a></li>
			<li><a href="irritable-bowel-syndrome-100708.html">Irritable Bowel System (IBS)</a></li>
			<li><a href="necrotizing-enterocolitis-100108.html">Necrotizing Enterocolitis (NEC)</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#url">Audio/Video<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="wide">
			<li><a href="autistic-diet.html">Autism Diet: 6-Part Series</a></li>
			<li><a href="coconut-kefir-video.html">How to Make Coconut Kefir</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 24 weeks 15 hours ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

IE 6 ?

Whats IE6? I've only ever heard of an IE7. i thought IE7 was microsofts first web browser...I could be wrong.

teachingking
Offline
newbie
Last seen: 6 years 2 days ago
Joined: 2008-11-24
Posts: 3
Points: 0

CupidsToejam, C'mon man.

CupidsToejam, C'mon man. Help out a brother.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 24 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Since you are abusing tables

Since you are abusing tables for layout, you might find us rather unhelpful as we frown on that sort of thing.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

He's not abusing tables for

He's not abusing tables for layout, he's abusing tables for IE6 bugs. I hate scripting, but I'd rather script those suckers than clump up my HTML like used cat litter for a single, retarded browser, and since IE6 isn't the only one who has trouble making those dropdowns drop down (keyboards have issues too), I make the mains actually go to a page where a user can still select the same options as are in the dropdown. It's just better, and more accessible.

Teachingking, that looks rather Stu-ish. My first drop-down menu was one of his. What I learned? Don't use his menus. They work, with his code, but trying to edit anything was a nightmare, and trying to pick through your code is just as hard (I'd have to build it, play with it). Instead, I switched to the Suckerfish-style menus because the CSS and HTML are so clean, you could eat off them, which makes debugging a LOT easier. Not saying it can't be done, Stu's menus are working fine in IE6 (and below), but it's just unnecessarily hard.

All that said, if a submenu is misplaced only in IE6, then you always have the ability to change the positioning of the subs using the * html hack (which only gets seen by IE6 and below). I mean, you could manually change the position of them just for IE6, in the CSS. Change the top or left values, or if you mean z-index, that. So long as they overlap by 1px they should continue to remain dropping down.

I'm no expert, but I fake one on teh Internets

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 38 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

CupidsToejam wrote:Whats

CupidsToejam wrote:

Whats IE6? I've only ever heard of an IE7. i thought IE7 was microsofts first web browser...I could be wrong.

Lol are you joking Tongue

There has been 7 if not more :thumbsup:

teachingking
Offline
newbie
Last seen: 6 years 2 days ago
Joined: 2008-11-24
Posts: 3
Points: 0

Stomme Poes

Yes, Stu did the original menu for me and it works fine. I then paid someone on scriptlance.com to add a 3rd level flyout. It's the 3rd level that is overlapping in IE6. I'm sorry to be such a newbie, but you mentioned changing the positioning for IE6 in the CSS. Currently all IE6 hacks are situated in the HTML, right?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Um, currently the HTML has a

Um, currently the HTML has a single IE6 hack-- the tables. The tables don't actually have anything to do with positioning though. What they do is make your valid HTML invalid, by making the submenus children of the Anchors instead of children of the LI's (what all the other browsers are getting, incl. IE7). Now because this invalid code is sent only to IE, the validator won't complain. And anyway even my InnerNazi doesn't have a problem per se with sending invAlid code to an Invalid (pronounced the other way) browser, but I'd rather my hacks sat in the CSS myself.

But anyway, in that steaming pile of unintelligible Stu code, you've got positions listed for each sub, right? Either a left: whatever or a top: whatever. Leave that for the smarter browsers. You could, for IE6 and below only, do something like

ul li ul li ul {
left: whatever the normal number is;
other styles;
}
* html ul li ul li ul {
left: something that positions correctly in IE6 and below only;
}

*edit ok I actually didn't see anything this deep, and the positioning seems to be on the :hovers themselves but ok...

Know of course that IE6 doesn't know what this is: #css-menu li:hover > a {background:#936d55;}(the >, guess there's no bold version of that character in this font) and likely isn't sure what #css-menu :hover means either (with the space, which I guess is against the specs or something but most browsers know that means "if anything in #css-menu is hovered"... that or they're interpreting it the same as #css-menu:hover which almost means the same thing)

The thing that's wrong with this approach (even though it would work fine) is that it's covering up another problem. I can't think of any reason outta my a** for why IE6 would do this-- it could be any of its usual bugs, like Haslayout or something, but if I need to reposition something absolutely positioned in the first place for IE6, then likely a bug in the code is causing the problem in the first place.

Second, I think Stu's even got a down-to-4-levels menu somewhere. Certainly the Suckerfish does. So even though you paid for the third level, you may benefit more from just taking a deeper menu from Stu.

Again, though, mutilated code is just Ugly and generally not a Good Thing, and it has only a single advantage-- in IE6 when Javascript is blocked or not enabled, and the user has a mouse, the menu will drop down.

I don't like using scripts to emulate behaviour (yeah, I said it, behaviour) native to HTML or possible in CSS in the first place. Making up for the retardedness of browsers can be one exception.

Then again, instead of using a script, I did indeed send to IE6-only some spans with title text in them, hidden outside tags... that sure was ugly, and made my file bigger (even for the browsers who will ignore that text, I think), but by god it doesn't have a single script, lawlz.

What I prefer to use in getting IE6 to :hover is Peterned's whatever:hover, as explained a bit here. It's an .htc file (which is I guess an IE-only thing anyway) which then uses a Javascript to tell IE6 not only to :hover over almost ANYTHING on your page you set :hover to, but also I believe :focus which is freaking important (can't believe IE7 didn't get that one implemented).

This causes the HTMLdog suckerfish to fail in IE7, and I guess there's some issue still with Opera, and one can only hope that they READ FORUMS as several have pointed this out and maybe they'll do an super-updated-suckerfish or something. Because there are easy fixes.

*Edit, oh, none of us have linked to Sons of Suckerfish. Well, here it is and all IE7 would need if you didn't use their Javascript is a "trigger" on the hover, usually something like
ul li:hover {
visibility: visible; (or whatever you want to stick here, so long as it doesn't change the way anything actually looks)
}
ul li:hover {
normal hover styles and stuff;
}

Just keep the "trigger" :hover declaration separate from the regular :hover declaration. You could use font-weight: bold there or set a background colour but visibility visible doesn't change the appearance... I think in my Suckerfish I used position: relative instead, but whatever. The trigger can't be something you've already declared in the code though. Dumb, but true.

The line about Opera needing a width is kinda true (if you don't list a width at all it'll get the shakes) but you can always say width: auto and Opera's fine.

I'm no expert, but I fake one on teh Internets