CSS based dropped down menu works in all browsers but darn IE :(

HTML & CSS
1

Hello,

The drop down menu design that we have works fine in ALL web browsers but that darn IE :frowning:

Can you please suggest what to do to get it to work also under darn IE.

You can see a sample of the navigation menu with drop down effect here:

And here are the CSS used for this purpose:

http://www.anoox.com/css/dropdown.css
http://www.anoox.com/css/dropdown_theme.css
http://www.anoox.com/css/dropdown.vertical.rtl.css
http://www.anoox.com/css/dropdown.vertical.css

Regards,

2

Hi,

1st, thax for all your tips and advise.
To be sure I know that the HTML/CSS of this Web site can be vastly improved, but due to lack of resources we are putting our available resources on what counts most which is on Php & MySQL development to deliver a service that delivers ever more value to to those who want to advertise their goods/services and to those who want to find information and communicate via a wiki type news sources. And that was of course a very brief description of what we do.

So yes the HTML/CSS can be definitely updated and that is what I am doing now and want to do more ASAP resources allow.
On that note, we are always looking for good people either under contract basis or volunteer basis if you are interested.

With the above said, in the HTML you have provided, where is
screen.css
being obtained from?

Regards,
Dean.

3

Hi,

Yes, it works OK now under the stupid IE after replacing the doctype with what you have listed below. 1st, ThanX :slight_smile:

2nd, what is the real value and meaning of this DOCTYPE entry in an HTML page? I mean I checked for example in detail here:
http://www.w3.org/TR/html401/struct/global.html

and I am just wondering:
Do other browsers really care for this entry? It seems they do not since after removing it from a web page other Web browsers act just as before.

Regards,

4

Very good question. Unfortunately, it’s really difficult to de-bug, because your code is such a mess. (Sorry, but it’s true…)

You’re linking to 6 different stylesheets - that’s crazy, and it makes it hard to see if there are any conflicts. Try combining them into a single sheet, and double check carefully to make sure you haven’t defined the same thing twice.

Your HTML is all over the place. Tables for layout, empty elements galore, and I can’t work out what half of it is. You’ve also got a few errors. While I don’t think any of those will be causing the problem, the first thing you should do when you get a problem you don’t understand is to make sure the page is valid, and fix any errors that are there.

Try deleting other sections of the code and leave just the menu, and see if that works in IE. If it does then your code for that bit is working, but you’ve got a problem somewhere else. Gradually build up the rest of the page, and see at what point it stops working.

5

All browsers behave differently depending on the doctype but most of the changes are subtle things and in fact some browsers have 3 rendering modes depending on doctype.

If you have a strict doctype and you have invalid styles such as leavng the px of units then browser may ignore them.

IE however reverts to quirks mode and uses the broken box model among other bad things when you use the original doctype you had. It renders more like IE5 than any browsers built in this century.

Read the following for the full rundown.

http://www.ericmeyeroncss.com/bonus/render-mode.html
http://reference.sitepoint.com/css/doctypesniffing

6

BTW, what is interesting, is that this CSS based drop down menu works just fine under IE too from the Web site that I got it from, here:

But somehow, this same CSS code, on our pages is not working under IE!
What gives?

7

<link> elements are only allowed in the <head>, but you’ve got a handful of them in the <body>. My guess would be that IE is not applying those styles. Put them back in the <head> where they belong, and see how it goes.

(And what on earth is going on with all those <b class=“spiffy…”> elements? :confused: Some of them are nested inside others, some of them are just empty, but they’re all effectively empty)

8

Problems run deeper than just the doctype though – that’s just the tip of the iceberg. Tables for layout, multiple nested tables for nothing even if you were using tables for layout, hordes of nested god only knows what elements, and in general a bunch of broken methodologies that are more 1998 than 2010.

This is evident in that you don’t even have content yet, and only 629 bytes of plaintext – with a whopping 8k of markup… and for WHAT?

I mean, BGCOLOR, ALIGN, VALIGN, BORDER, CENTER, TARGET, FONT - those have no place in your markup anymore (for about eight years now real-world deployment!).

… and forget Spanky corners, as someone who has his own technique for imageless rounded corners it’s really not worth the effort or the markup headaches… especially the kindred B method which is absurdly class-heavy. Suck it up, use a 1k image. (oh noes, not 1k!!! :smiley: )

If I was writing the same layout, it would probably end up with something like this for markup (+/- 5%, wasn’t 100% sure about exactly where you were putting the spanky’s).

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

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Blog feature overview - part of AnooX Social Networking service
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<span>Anoo<span></span></span>
		<small>
			Information, News & Social Network - Powered by <b>You</b>
		</small>
	</h1>

	<ul id="topMenu">
		<li class="homePage">
			<a href="http://www.anoox.com/">
				<span></span>Homepage
			</a>
		</li>
		<li class="sendToFriend">
			<a href="https://www.anoox.com/news/tell_a_friend.php?url=/news/overvview-anoox-blog-test.php">
				<span></span>Send To Friend
			</a>
		</li>
	</ul><hr />

	<div class="fauxColumns">

		<div class="content">
			Overview of the AnooX FREE Blog service
		<!-- .content --></div><hr />

		<div class="sideBar">

			<div class="borderTop"><div></div></div>
			<ul id="sideBarMenu">

				<li class="standOut">
					<a href="/news/YouCommunity_about.php">YouCommunity Overview</a>
				</li>

				<li class="half">
					<a href="/news/login_news.php">Sign-in</a>
				</li>

				<li class="half last">
					<a href="/news/sign_up.php">Sign-up</a>
				</li>

				<li class="hasKids">
					Discussion Blogs
					<ul>
						<li><a href="/news/overvview-anoox-blog-news.php" target="new">Over View</a></li>
						<li><a href="/news/anoox-blog-features.php" target="new">Features</a></li>
						<li><a href="/news/faq-free-blog.php" target="new">FAQ</a></li>
					</ul>
				</li>

				<li class="hasKids">
					Chat (aka Meeting) Rooms
					<ul>
						<li><a href="/sss_free/sss_overwiev.jsp">Over View</a></li>
						<li><a href="/sss_free/sss_features.jsp">Fatures</a></li>
						<li><a href="/sss_free/sss-faq.jsp">FAQ</a></li>
					</ul>
				</li>

				<li class="hasKids">
					Mailing Lists
					<ul>
						<li><a href="/news/mail_overview.php" target="new">Over View</a></li>
						<li><a href="/news/mail_overview_add.php" target="new">How to add emails</a></li>
						<li><a href="/news/mail_overview_add.php" target="new">How emails sent</a></li>
					</ul>
				</li>

				<li class="hasKids">
					Polls
					<ul>
						<li><a href="/poll/index.php" target="new">Over View</a></li>
						<li><a href="/poll/anoox-poll-features.php" target="new">Features</a></li>
						<li><a href="/poll/faq-free-poll.php" target="new">FAQ</a></li>
					</ul>
				</li>

				<li><hr /></li>

				<li><a href="/free-traffic-new.php">Get Free Traffic</a></li>

				<li><a href="/affiliate_overwiev.php">Earn Money from AnooX</a></li>

			</ul><hr />
			<div class="borderBottom"><div></div></div>

			<div class="borderTop"><div></div></div>
			<img src="/people/img14.jpg" alt="Some People Standing Around" />
			<div class="borderBottom"><div></div></div>

		<!-- .sideBar --></div><hr />

	<!-- .fauxColumns --></div>

	<div id="footer">

		<div class="poweredBy">
			Search Engine, Social Networking service & News - Powered by <b>You</b>
		</div>

		<ul>
			<li><a href="http://www.anoox.com/">Home</a></li>
			<li><a href="http://www.anoox.com/add_for_indexing_free_1st.php">Site Submit</a></li>
			<li><a href="http://www.anoox.com/voting_overview.jsp" class="current">People Powered</a></li>
			<li><a href="https://www.anoox.com/uc/advman_login.php">Advertisers</a></li>
			<li><a href="http://www.anoox.com/adp_overwiev.jsp">Affiliates</a></li>
			<li><a href="http://www.anoox.com/about_us.jsp">About Us</a></li>
			<li class="last"><a href="http://www.anoox.com/legal_notice.jsp">Legal notices</a></li>
		</ul>

		<b>&copy; AnooX 2005 - 2010 - All rights reserved<b><br />
		AnooX and AnooX logo are Registered Trademarks of AnooX Inc., all other trademarks belong to their respective owners.

	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Which is about HALF the code. Everything else you were doing would either be in the markup, be done using a sliding-doors type image, done via image replacement, or in the case of TARGET - not done at all.

Something just plunked it’s rounded backside down on my desk and I have to attend to it first, but if I have time late tonight I’ll toss together the CSS that would make that work, with the cascading menu implemented. (Likely using PeterNed’s “csshover3.htc” for legacy IE support)

9

What I came up with:

http://www.cutcodedown.com/for_others/worldNews/template.html

Had to remaster a couple images, added some simple effects so you can see where those would go, etc, etc. As with all my examples the directory:

http://www.cutcodedown.com/for_others/worldNews

is unlocked for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple -moz workarounds and the inclusion of a behavior file for ‘hover anywhere’ to work. Tested working perfect IE 6, 7 & 8. Opera 10.6, FF 2 and 3.5, and the latest flavors each of Safari and Chrome… and it works after a fashion in IE 5.5 excepting a few minor width deviations due to the broken box model. (big deal)

I have time later I’ll toss together a breakdown explaining all that, but no guarantees in that department since I think I’ve got three people in line ahead of you :wink:

I know I took some stylistic liberties, but I wanted you to be able to see how to apply all those different hover effects so I ran with it. Likewise the rounded corners were a total guess, and I went with subtractive since I THINK that’s what you were trying to do with spanky. (though not sure on that).

10

The menu isn’t working in IE7 or 8 because you have an old doctype that is triggering quirks mode and in quirks mode IE doesn’t understand hover on any elements except anchors. (IE6 doesn’t understand hover on anything but anchors anyway and would need some js to make the menu work.)

Use a full doctype with uri to put the page into standards mode.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

These days you should be using a strict doctype anyway and not using the presentational attributes that you are using (deprecated in strict).

11

as mentioned the directory:
http://www.cutcodedown.com/for_others/worldNews/

is unlocked so you can grab all the bits and pieces, including the

http://www.cutcodedown.com/for_others/worldNews/screen.css

12

Hi,

I moved the link elements to the <head> area as you suggested and IE still does not handle the drop down menu. Here:

And ALL other browsers do.
Darn this Microsoft IE :frowning: