CSS drop-down menu problem

[Enrika]

Greetings! I'm working on a CSS drop-down menu, which, to my surprise,
is actually working, more-or-less, in both IE *and* Firefox (and
Netscape). But there are two changes that I want to make that I just
can't figure out how to do.

The first is to make the submenu wider than the top menu. Currently, if
the text of the submenu doesn't fit within the width of the menu item,
the submenu item height increases to accomodate the entire text. (The
IE menu does this automatically, and I have hardcoded the non-IE menu
to do it manually by changing the "height" property appropriately for
the longer lines.) I've tried changing the "width" property, but that
just results in it writing the text to the submenu as though the width
is longer, but still displaying the submenu item at the width of the
top menu item, thereby cutting off even more of the text. Does anyone
know how to make a submenu item appear wider than the top menu item?

Here's my current non-IE submenu definition (for just one line of menu
text):

#noniemenu a.inner, #noniemenu a.inner:visited {
display:block;
width:104px;
height:18px;
line-height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
background:#008080;
text-align:center;
font-size:10px;
}

Here's my current IE submenu definition (again, for just one line of
menu text):

..menu a.inner, .menu a.inner:visited {
display:block;
width:104px;
height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
font-family: verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}

Here's what I have working at this time:

http://www.webopinions.org/enrika/test/queryweb.htm

And here's the old version, which is Javascript and only works in IE,
but which shows (basically) what I'm trying to do (if you're running
IE):

www.analyticalgroup.com/queryweb.htm

The second thing I haven't figured out yet is how to make the submenu
item text left-justified instead of centered, but I really haven't done
much digging on that. If anyone knows how to do this off the top of
their head, I'd much appreciate it, but it hasn't caused me agony yet
(unlike the first problem).

Fingers crossed, and thanks in advance!

 

[petermichaux]

Hi Enrika,

Here's what I have working at this time:
http://www.webopinions.org/enrika/test/queryweb.htm

looks pretty good on my computer already.

Without being a jerk, you might want to ask this question on css
discuss mailing list. www.css-discuss.org it is a great list. In fact
if you search the archives there you will find a lot on this subject.

I'm a little surprised to see tables in your mark up. The gold standard
seems to be an unordered list. I think this makes the mark up much
easier.

text-align:center;

this could be causing the centred text.

Peter

 

[Thomas 'PointedEars' Lahn]

looks pretty good on my computer already.

Same here (Firefox 1.5.0.1/Linux). Some helping remarks on it, though:

- Don't use XHTML, and don't serve it as text/html. You don't need it and
it causes more problems than it solves here. Use HTML 4.01 Transitional
or Strict, and serve it as text/html.

<URL:http://hixie.ch/advocacy/xhtml>

- Your markup is not Valid, XHTML or not. With XHTML, it is even more
critical, because your markup is also not well-formed. An XML parser,
a validating one or not, may display only error messages because of this.
(Try serving that properly as application/xhtml+xml and you see what I
mean.)


<URL:http://validator.w3.org/check?uri=http://www.webopinions.org/enrika/test/queryweb.htm&ss=1;verbose=1>

- Your stylesheet may not be not fully Valid CSS. You can check that with


<URL:http://jigsaw.w3.org/css-validator/...s.org/enrika/test/queryweb.htm&ss=1;verbose=1>

after you have fixed your markup.

- Some of the colors you are using cannot be considered Web-safe.

Without being a jerk, you might want to ask this question on css
discuss mailing list. www.css-discuss.org it is a great list.

CSS is on-topic in the Usenet newsgroup
comp.infosystems.www.authoring.stylesheets.

(X)HTML is on-topic in the Usenet newsgroup
comp.infosystems.www.authoring.html.

There is also comp.infosystems.www.authoring.misc
for more general discussions.


PointedEars

 

[RobG]

Greetings! I'm working on a CSS drop-down menu, which, to my surprise,
is actually working, more-or-less, in both IE *and* Firefox (and
Netscape). But there are two changes that I want to make that I just
can't figure out how to do.

The first is to make the submenu wider than the top menu. Currently, if
the text of the submenu doesn't fit within the width of the menu item,
the submenu item height increases to accomodate the entire text. (The
IE menu does this automatically, and I have hardcoded the non-IE menu
to do it manually by changing the "height" property appropriately for
the longer lines.) I've tried changing the "width" property, but that
just results in it writing the text to the submenu as though the width
is longer, but still displaying the submenu item at the width of the
top menu item, thereby cutting off even more of the text. Does anyone
know how to make a submenu item appear wider than the top menu item?

Here's my current non-IE submenu definition (for just one line of menu
text):

#noniemenu a.inner, #noniemenu a.inner:visited {
display:block;
width:104px;
height:18px;
line-height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
background:#008080;
text-align:center;
font-size:10px;
}

Here's my current IE submenu definition (again, for just one line of
menu text):

.menu a.inner, .menu a.inner:visited {
display:block;
width:104px;
height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
font-family: verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}

Here's what I have working at this time:

http://www.webopinions.org/enrika/test/queryweb.htm

"Working" is subjective. It likely does some of what you want, but
there are a number of issues that show your code is from an era about 10
years ago:

<script LANGUAGE="JavaScript">

The language attribute is deprecated, type is required:

<script type="text/javascript">


<!--Hide from JS-Impaired Browsers

You aren't hiding JS from anyone except those with strict XML parsers
(and you are pretending that this is XHTML, so you're in trouble here).

The content of a script element inside a head element should never have
been displayed by any browser. And every browser since Netscape
Navigator 2 has understood script elements well enough to know not to
display the content even if it didn't know what to do with it otherwise.

...
browser=navigator.appName
version=navigator.appVersion
test1=((browser =='Netscape') && (version.charAt(0)>=5 ))
...
alert ("You must use Microsoft Internet Explorer 5.0 or greater,
Netscape 6.0 in order to take part in this survey.")


Browser sniffing has been bad practice for many years, use feature
detection. Search the archives for posts on the topic.

function makePopUpWin(...){
...
popUpWin = eval("window.open('http://...','newWin','"+...);


As nearly always, the use of eval here is completely unnecessary.


Within file 'menu.js' you have:

function document.onmouseover()
{
...
}

You can't assign a function to an object property by using the property
as an identifier in a function declaration. To get what you want,
assign a function expression to the property:

document.onmouseover = function()
{
...
}


Similarly for the onmouseout function. You have also coded explicitly
for the IE event model:

var eSrc = window.event.srcElement;


Read about event models here to learn how to allow for IE and W3C event
models (it's not too hard):

<URL:http://www.quirksmode.org/js/introevents.html>


You also use document.all, which is another IE-ism that is not well
supported in other browsers:

var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];


Use getElementById and fall back to document.all for old browsers if
needed. There are a number of strategies for that (read the FAQ and
search the archives).

There are likely many other issues (e.g. there is no element in the page
with id=tdMenuBarItem), the script should probably be re-written with
standards compliance in mind.

[...]

 

[Enrika]

Wow, you guys are all fantastic! Thank you all so much.

Enrika

Greetings! I'm working on a CSS drop-down menu, which, to my surprise,
is actually working, more-or-less, in both IE *and* Firefox (and
Netscape). But there are two changes that I want to make that I just
can't figure out how to do.

The first is to make the submenu wider than the top menu. Currently, if
the text of the submenu doesn't fit within the width of the menu item,
the submenu item height increases to accomodate the entire text. (The
IE menu does this automatically, and I have hardcoded the non-IE menu
to do it manually by changing the "height" property appropriately for
the longer lines.) I've tried changing the "width" property, but that
just results in it writing the text to the submenu as though the width
is longer, but still displaying the submenu item at the width of the
top menu item, thereby cutting off even more of the text. Does anyone
know how to make a submenu item appear wider than the top menu item?

Here's my current non-IE submenu definition (for just one line of menu
text):

#noniemenu a.inner, #noniemenu a.inner:visited {
display:block;
width:104px;
height:18px;
line-height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
background:#008080;
text-align:center;
font-size:10px;
}

Here's my current IE submenu definition (again, for just one line of
menu text):

.menu a.inner, .menu a.inner:visited {
display:block;
width:104px;
height:18px;
border-bottom:1px solid #fff;
text-decoration:none;
color:#fff;
font-family: verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}

Here's what I have working at this time:

http://www.webopinions.org/enrika/test/queryweb.htm

"Working" is subjective. It likely does some of what you want, but
there are a number of issues that show your code is from an era about 10
years ago:

<script LANGUAGE="JavaScript">

The language attribute is deprecated, type is required:

<script type="text/javascript">


<!--Hide from JS-Impaired Browsers

You aren't hiding JS from anyone except those with strict XML parsers
(and you are pretending that this is XHTML, so you're in trouble here).

The content of a script element inside a head element should never have
been displayed by any browser. And every browser since Netscape
Navigator 2 has understood script elements well enough to know not to
display the content even if it didn't know what to do with it otherwise.

...
browser=navigator.appName
version=navigator.appVersion
test1=((browser =='Netscape') && (version.charAt(0)>=5 ))
...
alert ("You must use Microsoft Internet Explorer 5.0 or greater,
Netscape 6.0 in order to take part in this survey.")


Browser sniffing has been bad practice for many years, use feature
detection. Search the archives for posts on the topic.

function makePopUpWin(...){
...
popUpWin = eval("window.open('http://...','newWin','"+...);


As nearly always, the use of eval here is completely unnecessary.


Within file 'menu.js' you have:

function document.onmouseover()
{
...
}

You can't assign a function to an object property by using the property
as an identifier in a function declaration. To get what you want,
assign a function expression to the property:

document.onmouseover = function()
{
...
}


Similarly for the onmouseout function. You have also coded explicitly
for the IE event model:

var eSrc = window.event.srcElement;


Read about event models here to learn how to allow for IE and W3C event
models (it's not too hard):

<URL:http://www.quirksmode.org/js/introevents.html>


You also use document.all, which is another IE-ism that is not well
supported in other browsers:

var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];


Use getElementById and fall back to document.all for old browsers if
needed. There are a number of strategies for that (read the FAQ and
search the archives).

There are likely many other issues (e.g. there is no element in the page
with id=tdMenuBarItem), the script should probably be re-written with
standards compliance in mind.

[...]