Forum Moderators: not2easy
I am having a problem with my drop down menus (generated from php) and was hoping there is a lurking expert who can help me get them looking good. I am using DT tags as top level menu items in a popup window. The actual menus are a bit rough still, but my biggest problem is that if I don't set the width attribute on the DT tag, under IE the DT fills entire window.
If I do specify a fixed format size (width 90px), then it wraps words etc... and makes it look fairly ordinary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Thats my document type and here is css
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #0099de;
margin: 1px;
padding: 5px 5px 5px 5px;
z-index:50;
/* width: 90px; fix the expainded width size in I.E. */
}
Not sure if I am meant to post in a url, but it is the easiest way to explain. The launch button will run the popup (and you can see how the dt has spreadout accross the popup window in IE, but no problems in FF)
Does anyone have any suggestions of how to get the DT to only be as big as they need be? (without wrapping any text)
Cheers
Scott
[edited by: SuzyUK at 8:25 am (utc) on May 4, 2008]
[edit reason] please no URI's [/edit]
sorry, still no URI's allowed here either, they change, get fixed etc.. so become meaningless later.
it's Sunday help day, and I'm waiting for help on another forum so... here's the relevant code (only I've added in a CSS fix to replace the JS for demo purposes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background-color: #edf2df;
font: arial, sans-serif;
}dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:50;
width: 100%; /* precision for Opera */
}#menu dl {
float: left;
z-index: 50;
}#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #0099de;
margin: 0 1px;
padding: 5px 5px 5px 5px;
z-index:50;
/* width: 90px; fix the expainded width size in I.E. */
}#menu dd {
display: none; /* this bit is repeated below in my CSS/js workaround */
position: absolute;
border: 0;
z-index:100;
}#menu li {
text-align: center;
background: #aacd42;
padding: 3px;
}#menu li a, #menu dt a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
display: block;
/* height: 100%; */ /* remove hasLayout triggering property from the child - height is not doing anything here anyway */
border: 0 none;
}#menu dt a:hover, #menu dt a:focus {background: #4ba5e7;}
#menu li a:hover, #menu li a:focus {background: #bfdd67;}
/** me added to mimic javascript */
#menu dl dd {display: none;}
#menu dl:hover dd, #menu dl.hover dd {display: block;}</style>
<!--[if IE]>
<style type="text/css" media="screen">
* html dl {
behavior: expression(
this.onmouseover = new Function("this.className += ' hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
this.style.behavior = null
);
}
</style>
<![endif]-->
</head>
<body>
<div id=menu>
<dl>
<dt onmouseover="javascript:"><a href='#' class="jjbtn1">Layouts</a></dt>
<dd id="smenu1" onmouseover="javascript:" onmouseout="javascript:">
<ul>
<li><a href='#' onclick="window.opener.location.href='http://www.myspacemaster.net/'; addtext2(11);" class=jjbtn1>Layout Master</a></li>
<li><a href='#' onclick="window.opener.location.href='http://www.#*$!-my-profile.com/'; addtext2(21);" class=jjbtn1>#*$! My Profile</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:"><a href='#' class="jjbtn1">Free Backgrounds</a></dt>
<dd id="smenu2" onmouseover="javascript:" onmouseout="javascript:">
<ul>
<li><a href='#' onclick="window.opener.location.href='http://www.example.com'; addtext2(11);" class=jjbtn1>Layout Master</a></li>
<li><a href='#' onclick="window.opener.location.href='http://www.example.com/'; addtext2(21);" class=jjbtn1>#*$! My Profile</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
and as it's help day, the fix is also in there, it's IE's hasLayout again, it will not shrinkwrap properly if the elemet that should be shrink-wrapping (i.e. your dl and dd) contain a child element which has hasLayout (i.e. your <a>)
hth still fixes it for you with your js, it should do, but let us know
Oh and don't mind the bit below my comment /* me added */ you shouldn't need that, it's for this copy/pastable sample only.
-Suzy
examplified urls in code, ooops
[edited by: SuzyUK at 6:52 am (utc) on May 7, 2008]
Thanks for that. I have implemented the fix for the hasLayout part of the problem, and I have also had to move to your css version of the solution. (there was still another quirk in IE)
Even though it all works so well, can I ask for an explanation. You have used a loose document type along with that !IE stuff. I am not an evangalist, but is it easier to use a loose document over the strict version?
Also the !IE, is this somehow parsed by IE web browsers? I really do not understand this piece of coding at all. Do you have some information on this stuff?
Scott
Even though it all works so well, can I ask for an explanation. You have used a loose document type along with that !IE stuff. I am not an evangalist, but is it easier to use a loose document over the strict version?
no easier, in fact no difference, just me pressing the wrong button on my editor ;) both the 'loose'; and 'strict' Doctypes will work as well as each other as long as they're valid doctypes.
The 'strict' HTML 4 doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Doctypes which invoke IE's "Strict Rendering Mode" as opposed to BackCompat or Quirks Mode, are not reliant on the word strict or loose in the actual doctype, but rather whether they're well formed, sorry there's too many nuances to explain, see this post and links for more [webmasterworld.com] - but in general a well formed Doctype complete with the URI, and without anything before it, is enough to invoke IE's strict(ist) rendering mode. The Doctype itself whether loose or strict is just the benchmark for validating per the W3C validator, this is more to do with semantics and accessibility and not the actual rendering mode.
Also the !IE, is this somehow parsed by IE web browsers? I really do not understand this piece of coding at all. Do you have some information on this stuff?
Yes and Yes.. it is an IE conditional comment [webmasterworld.com] and is a way to feed code (not just CSS) to IE/Win Browsers alone and even incorporates version sniffing/targetting. Again I was bad.. in my haste and while testing the comment should read:
<!--[if lt IE 7]>
because what I'm actually doing is feeding a little bit of javascript to IE6 and below to enable it to deal with :hover on a non <a> element ([lt IE 7] = IE versions less than IE7).
Your Javascript is effecting an action onmouseover (:hover), CSS can cope with this using the :hover pseudo class, except for IE6 and below, so the javascript snippet above is purely for IE5/6.
I shouldn't have made the comment target all of IE.. sorry, my bad, but not that it will do any harm ad IE7/8 will work with the :hover on the dl anyway - but still.
Information is on the conditional comment link above, that post also has links to the official Microsoft documentation for them too.
Thanks for that. They are very handy threads to keep bookmarked.
Thanks Scott
