non-programmer needs help with CSS in HTML

General Questions
#1

I have very little experience doing html (i cheat with Dreamweaver) and even less experience with css. What i’m trying to do is make a hover menu pop up when the mouse goes over a word in a table. I was checking a bunch of webpages about css how-to and i’ve put together most of it i think. But it won’t work and the websites say that IE is stubborn with css but it can be done. Anyway, here is what i have:



<html>
<head>
<style type="text/css"><!---></style>
<!--[if gte IE 5]>
<style type="text/css">
ul.makeMenu li { behavior: url( IEmen.htc ); }
ul.makeMenu ul { display: none; position: absolute; top: 2px; left: 78px; }

ul.makeMenu2 li { behavior: url( IEmen2.htc ); }
ul.makeMenu2 ul { display: none; position: absolute; top: 2px; left: -160px; background-color: #aac; }
</style>
<![endif]-->
</head>

<body bgcolor="#aaaacc" text="#000000" link="#000077" alink="#000077" vlink="#000077">
<h2 style="margin-right: 165px;"> </h2>
<ul class="makeMenu">
	<li>>Shutdown>
		<ul>
			<li><a href="server1.html">server1</a>
			<li><a href="server2.html">server2</a>
			<li><a href="server3.html">server3</a>
		</ul>
</ul>
<h3> </h3>
</body>
</html>

What i’m going for is to have the menu appear on the right to select the html document that describes how to shut down these servers. When Dreamweaver compiles it, Shutdown has a bullet in front and my menu doesn’t do anything on hover.

#2

Can you show us the contents of IEmen.htc?

#3

Ummm, i guess i can’t since i didn’t make a file called IEmen.htc. I guess on 1 of the dozen or so pages i was checking out that line was in there and i just copied it. What should it have in it?

#4

It appears that the reason it doesn’t work as nicely for IE 5.0 and higher is that those browsers don’t support the “hover” feature (of CSS) for li tags, according to a cite I found. The extra file mentioned – IEmen.htc – should have a Javascript routine in it to simulate that behavior.

Looks like This page has a nice tutorial describing all the things you need to do to make it work, even with Internet Explorer (and the contents of that file).

My guess is that yours isn’t working because you don’t have that file, which your CSS is trying to call upon to get the job done.

#5

Monstre is exactly right. Your CSS style calls an external file (IEmen.htc) for its behavior. Without the external file, your menu has no idea how to act.

The page Monstre links to is probably the page you used in the first place. Down on the page is the contents of your missing IEmen.htc file.

My suggestion, entering into this venture as a newbie, would be to copy and paste the given code EXACTLY, save it to your own files, and see if you can make it work unmodified. After that, cut away some of the crap you don’t think you’ll need and try again. If it still works, cut out some more of the crap you think you don’t need. When you cut out too much or mess something up, just undo it and try again. This isn’t the easiest thing in the world to do, but its certainly doable. Good luck.

#6

Yup, exactly. It worked pretty cool and i was able use the menu in an html table i already had. Thanks folks

#7

Working around the CSS bugs in Internet Explorer can be a hair-tearing exercise – I spent two days last week just trying to get a table-free two-column layout that worked fine in every other browser but IE6.

Here are a few handy references to keep around:

IE CSS bugs and workarounds
Explorer exposed!
Floats, Margins, and IE

#8

Actually, working with CSS is difficult with IE if you’re used to working with it for non-IE browsers, and difficult with non-IE browsers if you’re used to IE. It basically comes down to what you’re used to and what you’re not used to.

#9

In response to the OP: Did you know about Dreamweaver’s “behaviors”? They’re little tools/scripts that let you add things like popup menus without any handcoding. Pretty convenient.

#10

Not sure what you mean by that. The controls in the menus don’t have a whole lot from which to choose. How do i get those tools/scripts that let me add popup menus? I’m using Dreamweaver MX 2004 if that matters.

#11

Maybe this Flash slideshow will help?

Or try a tutorial… you can probably find more on Google if neither one is good enough :slight_smile:

#12

That is great. I’ve ventured into those tabs on the right but never understood what i was looking at there. Thanks mate.

#13

Oh, no, not at all. Standards for HTML and CSS and similar things have been set forth by the W3C, in order to ensure that all browsers behave properly, as marking up a document should be something that doesn’t depend on browser quirks or careful workarounds to function. The fact is that IE is simply not very compliant with those standards, while most other browsers are far more compliant (granted, I don’t think any browser is perfect.)

If IE isn’t compliant with those standards, it’s not a matter of “being used to it” - it’s a matter of a poor product that doesn’t fulfill its intended function. After all, if you’re competent, you don’t design pages “for” a browser at all - if you create something that doesn’t work outside of IE, it means that you’re not competent at what you’re doing. There should be no “getting used to” anything; if you’re “not used” to working with a major browser, then you’re not competent at web design (but, as I mentioned, if IE were not quite so poorly written, you wouldn’t have to develop that competence in the first place.)

#14

What Excalibre said. There are standards, and then there’s Microsoft.

To be fair, other browsers have their share of bugs as well, but IE is the most egregious offender, both in number and severity.