Forum Moderators: not2easy
One, I have text in a table to make a breadcrumb area. Without links, it displays properly, but as soon as a link is added, the text drops as if contained to 97px (the width of nav bar in td above it). I've tried using background images to force the width, but no change. Can you see what I'm missing here? (See below)
Problem #2 - I use css with mouseover and onclick to automatically drop down expanded text in a page. I could use javascript, but it is so cool to do in css. However, in IE the mouse-over drop-downs appear perfectly. In FF they don't work at all. Can you direct me to where I can find info for why and/or a workaround? (see below #2)
PROBLEM ONE
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" id="nav">
<tr>
<td colspan="8"><img src="images/311904.gif" alt="colorbar" width="100%" height="8" /></td>
</tr>
<tr>
<td id="home" colspan="2" rowspan="2" bgcolor="#a89d90"><img src="images/InfoTlogo.gif" alt="logo" width="230" height="80" border="0" /></td>
<td colspan="4" rowspan="3"><img src="images/topbar/topbar_point.jpg" alt="top photo" width="388" height="110" border="0" align="top" /></td>
<td width="1" rowspan="4" bgcolor="ad832f"><img src="images/ad832f.gif" alt="colorbar" width="1" height="1" /></td>
<td width="161" bgcolor="#a89d90"> </td>
</tr>
<tr>
<td id="contact" bgcolor="#cd9f3d"><a href="#">contact</a></td>
</tr>
<tr>
<td width="133" height="30"> </td>
<td width="97" height="30" bgcolor="c1a15b"> </td>
<td id="gear" rowspan="3"> </td>
</tr>
<tr>
<td colspan="6"><img src="images/e3d8bf.gif" alt="colorbar" width="100%" height="1" /></td>
</tr>
<tr>
<td width="133" height="24"> </td>
<td width="97" valign="top" id="solutions"><a href="solutions/solutions.html">solutions</a> </td>
<td width="97" valign="top" id="services"><a href="services/services.html">services</a></td>
<td width="97" valign="top" id="alliance"><a href="alliance/alliance.html">
partners</a></td>
<td width="97" valign="top" id="newslink"><a href="news/news.html">news</a></td>
<td width="97" valign="top" id="about"><a href="about/about.html">about</a></td>
</tr>
<tr>
<td> </td>
<td height="24" colspan="5" id="crumb">
<p><a href="#">HOME</a> > <a href="#">solutions</a> > product management</p></td>
</tr>
</table>
#nav td a {
font-weight: normal;
text-decoration: none;
display: block;
margin: 0;
padding: 0;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
#nav td a:link, #nav td a:visited {
background: url(nav1.gif) repeat center;
display: block;
width: 97px;
height: 24px;
margin: 0px;
padding: 0px;
line-height: 24px;
}
#nav td a:hover {
background: url(nav2.gif) repeat center;
width: 97px;
margin: 0px;
padding: 0px;
height: 24px;
line-height: 24px;
}
td#home a:link, td#home a:visited {
background: #a89d90;
height: 80px;
width: 230px;
}
td#home a:hover {
background: #c1a15b;
height: 80px;
width: 230px;
}
td#contact a:link, td#contact a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-image: none;
padding-left: 4px;
}
td#contact a:hover {
text-decoration: underline;
color: 2a403e;
}
td#crumb p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
font-weight: normal;
text-align: left;
background-color: #FFFFFF;
line-height: 24px;
}
td#crumb a:link, td#crumb a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
font-weight: normal;
background-color: #FFFFFF;
line-height: 24px;
background-image: none;
text-align: left;
}
td#crumb a:hover {
text-decoration: underline;
color: #ad832f;
height: 24px;
}PROBLEM TWO
Here is the drop down list that doesn't work in firefox:
<p><span class="droplist"; onmouseover="document.all.bio.style.display='block';"><font color="#ad832f">Biometrics</font></span></p>
<div id="bio" style="display: none;">
<p class="subnav_noline">InfoTronics offers secure, accurate and efficient data collection
technology which eliminates potential time-card fraud and controls
security access. </p>
<p class="subnav_noline">The RSI HandPunch™ eliminates time card fraud ("buddy punching")
using field-proven hand geometry biometric technology. The HandPunch uses
the size and shape of each employee's hand to verify their identity each
time they punch. </p>
<p class="subnav_noline">InfoTronics finger reader technology saves time and money by eliminating lost cards and preventing buddy punching. The finger reader option on
our Intelligent Terminal 900 and 2100 positively identifies each employee
using a unique digital finger template. </p>
<p class="subnav" style="cursor: hand;"><span onclick="document.all.bio.style.display='none';">hide</span></p>
</div>Thanks in advance for any assistance you have.
<p class="droplist" onMouseOver="document.getElementById('bio').style.display='block';">Biometrics</p>
<div id="bio" style="display: none;">
<p class="subnav_noline">InfoTronics offers secure, accurate and efficient data collection
technology which eliminates potential time-card fraud and controls
security access. </p>
<p class="subnav_noline">The RSI HandPunch™ eliminates time card fraud ("buddy punching")
using field-proven hand geometry biometric technology. The HandPunch uses
the size and shape of each employee's hand to verify their identity each
time they punch. </p>
<p class="subnav_noline">InfoTronics finger reader technology saves time and money by eliminating lost cards and preventing buddy punching. The finger reader option on
our Intelligent Terminal 900 and 2100 positively identifies each employee
using a unique digital finger template.</p>
<p class="subnav" style="cursor: hand;" onMouseOver="document.getElementById('bio').style.display='none';">hide</p></div>
for problem 1
try removing the display:block; from you link declarations
#nav td a {
font-weight: normal;
text-decoration: none;
/*display: block;*/
margin: 0;
padding: 0;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
#nav td a:link, #nav td a:visited {
background: url(nav1.gif) repeat center;
/*display: block;*/
width: 97px;
height: 24px;
margin: 0px;
padding: 0px;
line-height: 24px;
}
at a glance it seemed to work.. you crumbs are taking on the properties of previously declared styles.
I could use javascript, but it is so cool to do in css.
Actually, the code you've used (and Smad's improvement) is using javaScript.
There's nothing wrong with using javaScript (in fact, to get a cross-browser drop-anything you have to use a little JS), but if you're interested in a "more pure" css solution...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Drop</title>
<style type="text/css">
.drop_div{
color:#fff;
background:#123;
width:200px;
}
.drop_div:hover p{
display:block;
}
.solid{
background: #789;
}
.fleeting{
display:none;
}
</style>
</head>
<body>
<div class="drop_div">
<p class="solid">Hover here to drop text.</p>
<p class="fleeting">Lorem ipsum dolor sit amet.</p>
<p class="fleeting">Lorem ipsum dolor sit amet.</p>
<p class="fleeting">Lorem ipsum dolor sit amet.</p>
<p class="fleeting">Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
There are probably much better solutions than this basic one. You might want to check out Eric Meyer's informative page on it here [meyerweb.com]. (He uses NO javascript by putting his drop text in a <span> nested in an <a>nchor. This is fine for a line or two of text, but multiple paragraphs can't be cleanly accomplished in this way.)
Anyway, in FF, hovering over the .solid paragraph in the above code makes the .fleeting paragraphs drop down. Sadly, in IE this doesn't work at all, because IE stubbornly refuses to apply the :hover pseudoclass to anything other than <a>nchors, and we can't go nesting block-level <p>aragraphs inside of inline <a>nchors.
The cross-browser solution is to utilize a little bit of javascript to swap out class names in IE, and add an extra style to hook onto that swapped class. Rather than explain it myself, I'll just point you to the original source (where I learned about it)...run a search for an article titled "Suckerfish Dropdowns" from ALA. The bottom of the article explains the little bit of JS needed to make things copacetic on IE.
cEM
