...

View Full Version : Aligning <li> Vertically in IE vs. Firefox



Race
01-30-2007, 12:59 AM
Apologies if this has been addressed before, I missed it. I'll try to make this as straightforward as possible:

This is correct:
http://img.photobucket.com/albums/v241/BrotherCaptainRace/SPF_01.jpg

This is wrong:
http://img.photobucket.com/albums/v241/BrotherCaptainRace/SPF_02.jpg

This Javascript is utilized in the template:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>

Here is the CSS for the navigation:

/*** Dropdown Menu ***/
ul.nav{
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}

li.nav {
float: left;
position: relative;
padding-right:25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
display: block;
color: #FFFFFF;
}

li ul.nav {
display: none;
position: absolute;
top: 100%;
font-weight: normal;
list-style: none;
padding: 0;
margin: 0;
}

li li.nav {
display: block;
background-color: #9999CC;
border:1px #336699 solid;
color:#FFFFFF;
font-weight:bold;
width:70px;
}

li li.nav a{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
color:#ffffff;
}

ul li.nav:hover{
color:#ffcc99;
background-color:#336699;
}

li li.nav a:hover{
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
background-color:#336699;
}

li:hover ul.nav, li.over ul.nav{
display: block;
left: auto;
}

Where did I mess up?
Any help is greatly appreciated.

Race
01-31-2007, 07:34 PM
If this particular problem has already been addressed on here, I would appreciate a link to it.

Thanks.

Excavator
01-31-2007, 09:31 PM
Hello Race,
I don't think this particular problem has been addressed before.
The reason your not getting any help is that debugging someone elses dropdown menu code is so horribly complicated that nobody really wants to invest the time.
If you didn't have the js in there, I would take a look. Since you do, there's no point.

One thing I can tell you, anyone that does look at it will want to have a live link. The bit of code you supplied may or may not be the entire problem.

There are some members here that could fix that for you, it's just a matter of finding someone looking for a project.

Race
02-01-2007, 03:07 PM
Fair enough. Here's the link to the site:
schoolpsychologistfiles.com (http://schoolpsychologistfiles.com/)

I originally based it around the Suckerfish dropdown (http://alistapart.com/articles/dropdowns/), but tweaked things here and there in an attempt to fix it.

If there is a reliable way to do this without the JS, I am more than willing to drop the code and go strictly CSS.

Race
02-10-2007, 08:11 PM
OK, I ditched the JS, went to CSSplay.co.uk (http://CSSplay.co.uk) and tried to use the CSS-only Basic Drop-Down Menu. (http://cssplay.co.uk/menus/basic_dd.html)

But it's not working in IE 6. In fact, it was a step backwards as it was showing up in IE 6 before. :mad:

Here is my CSS file after copying it from CSSplay and tweaking it (to match style). Look towards the bottom (with the big copyright/disclaimer) to see what I used:

/* CSS Document */
/* Layout */
#pageNav{
float:right;
border-left:3px dotted #FFCC66;
margin-left:8px;
padding-left:-10px;
}

#top{
float:right;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#img{
float:right;
padding-left:10px;
}


#banner{background: #EAEAFD url(../images/topBannerBG.jpg);
background-repeat:no-repeat; }

/* Formatting */
body {
background-color: #EAEAFD;
}

.pageHeader{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#666666;
}

.pageText{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}

.pageTextSM{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}

.pageFooter{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-top:5px;
}

.secondaryHeader{
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#666666;
}

.siteTitle{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
margin-right:-8px;
z-index:1000;
}

.siteTitleTail{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
float:right;
margin-right:-8px;
margin-top:-15px;
z-index:1000;
}

ol.page ul{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

ol.page ul ul{
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-weight:normal;
font-size:10px;
}

/* LINKS - Regular */
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}

/* LINKS - Footer */
a.footer:link {
color:#6699CC;
text-decoration: none;
}
a.footer:visited {
text-decoration: none;
}
a.footer:hover {
color:#FFFFFF;
text-decoration: underline;
}
a.footer:active {
text-decoration: none;
}

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at <a href="http://www.cssplay.co.uk/menus/basic_dd.html" target="_blank" class="m1">http://www.cssplay.co.uk/menus/basic_dd.html</a>
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.nav ul{
list-style-type:none;
padding:0;
margin:0;
}

/* make the top level links horizontal and position relative so that we can position the
sub level */
.nav li{
float:left;
position:relative;
z-index:100;
top:-2px;
}

/* use the table to position the dropdown list */
.nav table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.nav a, :visited {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
width:120px;
padding:5px;
color:#ffffff;
text-decoration:none;
text-align:center;
}

/* style the links hover */
.nav :hover{
color:#FFCC00;
background:#336699;
}

/* style the links W/O sub-menus */
.nav2 :hover{
color:#FFCC00;
display:none;
width:100px;
}

/* hide the sub level links */
.nav ul ul {
visibility:hidden;
position:absolute;
width:120px;
height:0;
background-color:#99CCFF;
}

/* style the sub level list elements */
.nav ul ul li a{
color:#FFFFFF;
background-color:#6699CC;
border-color:#336699;
}

.nav ul ul li a:hover{
color:#FFCC00;
}

/* make the sub level visible on hover list or link */
.nav ul li:hover ul,
.nav ul a:hover ul{
visibility:visible;
}

And here is my template HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
@import url("schoolpsych.css");
-->
</style>
</head>

<body TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<a name="Top"></a>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="21" rowspan="2"><img src="../images/topLeftEndBanner.jpg" width="21" height="78"></td>
<td width="407" height="49" id="banner">&nbsp;</td>
<td width="251" height="49" valign="bottom" background="../images/topBanner_O.gif"><div align="right" class="siteTitle">School Psychologist Files</div>
</div></td>
<td rowspan="2" background="../images/topRightEnd.gif">&nbsp;</td>
</tr>
<tr>
<td height="29" colspan="2" background="../images/topFill.gif">
<div class="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a>Disabilities<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ADHD.html">ADHD</a></li>
<li><a href="../Aspergers.html">Aspergers</a></li>
<li><a href="../Autism.html">Autism</a></li>
<li><a href="../DevDelay.html">Developmental Disability</a></li>
<li><a href="../EmDisability.html">Emotional Disability</a></li>
<li><a href="../notDone.html">Hearing Impaired</a></li>
<li><a href="../notDone.html" target="_blank">Learning Disability</a></li>
<li><a href="../notDone.html" target="_blank">Mental Retardation</a></li>
<li><a href="../notDone.html" target="_blank">Orthopedic Impairment</a></li>
<li><a href="../notDone.html" target="_blank">Traumatic Brain Injury</a></li>
<li><a href="../notDone.html" target="_blank">Vision Impairment</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a>Special Education<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../categories.html" target="_blank">Categories</a></li>
<li><a href="../laws.html" target="_blank">Laws</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../schoolPsychology.html" target="_blank">School Psychology</a></li>
<li><a href="../notDone.html" target="_blank">Contact Us</a></li>
</ul>
</div>
<div class="siteTitleTail">.com</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="2" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="body" -->body<!-- TemplateEndEditable --></td>
<td width="21" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td><img src="../images/bottomLeftEnd.gif" width="21" height="28"></td>
<td valign="middle" background="../images/bottomFill.gif">
<div align="left" class="pageFooter"><span class="pageFooter"><a href="http://www.kingworks.net" class="footer" target="_blank">site design: Paul M. King</a></span></div>
</td>
<td valign="middle" background="../images/bottomFill.gif"><div align="right" class="pageFooter">Copyright 2006-2007</div></td>
<td><img src="../images/bottomRightEnd.gif" width="21" height="28"></td>
</tr>
</table>

</body>
</html>


Live link to the site is here (http://schoolpsychologistfiles.com).

This is driving me insane. I really need some help.

felgall
02-10-2007, 08:25 PM
IE6 doesn't understand HOVER on anything except links and so you need a small piece of javascript to simulate the effect in IE6 that more modern browsers handle automatically. The suckerfish menu scripts that are around usually come with a piece of Javascript specifically for that purpose.

Race
02-14-2007, 02:33 AM
Thanks for the advice so far.

OK, I have tried examples found on other sites, and have not been successful - I did manage to combine a couple of methods into something that works when I preview it in IE6 through Dreamweaver. :) But when I upload it and look at it "live" in IE6, the dropdown submenus don't appear! :mad:

Here's where I'm at:

CSS (navigation is towards the bottom):

/* CSS Document */
/* Layout */
#pageNav{
float:right;
border-left:3px dotted #FFCC66;
margin-left:8px;
padding-left:-10px;
}

#top{
float:right;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#img{
float:right;
padding-left:10px;
}


#banner{background: #EAEAFD url(../images/topBannerBG.jpg);
background-repeat:no-repeat; }

/* Formatting */
body {
background-color: #EAEAFD;
}

.pageHeader{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#666666;
}

.pageText{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}

.pageTextSM{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}

.pageFooter{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-top:5px;
}

.secondaryHeader{
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#666666;
}

.siteTitle{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
z-index:900;
float:right;
}

.siteTitleTail{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
float:right;
z-index:1000;
}

ol.page ul{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

ol.page ul ul{
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-weight:normal;
font-size:10px;
}

/* LINKS - Regular */
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}

/* LINKS - Footer */
a.footer:link {
color:#6699CC;
text-decoration: none;
}
a.footer:visited {
color:#6699CC;
text-decoration: none;
}
a.footer:hover {
color:#FFFFFF;
text-decoration: none;
}
a.footer:active {
text-decoration: none;
}

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.nav ul{
list-style-type:none;
padding:0;
margin:0;
z-index:100;
}

/* make the top level links horizontal and position relative so that we can position the
sub level */
.nav li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.nav table{
position:absolute;
border-collapse:collapse;
z-index:100;
left:-1px;
top:20px;
}

/* style all the links */
.nav a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
width:90px;
padding:4px 4px 5px 4px;
color:#ffffff;
background:#336699;
text-decoration:none;
text-align:center;
z-index:100;
}

.nav2 a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
width:50px;
padding:4px 4px 5px 4px;
color:#ffffff;
background:#336699;
text-decoration:none;
text-align:center;
z-index:100;
}

.nav3 a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
width:110px;
padding:4px 4px 5px 4px;
color:#ffffff;
background:#336699;
text-decoration:none;
text-align:right;
z-index:100;
}

.nav4 a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
width:80px;
padding:4px 4px 5px 4px;
color:#ffffff;
background:#336699;
text-decoration:none;
text-align:right;
z-index:100;
}


/* style the links hover */
.nav :hover{
color:#FFCC00;
background:#336699;
z-index:100;
}

/* hide the sub level links */
.nav ul ul {
visibility:hidden;
position:absolute;
height:0;
z-index:100;
}


/* style the sub level list elements */
.nav ul ul li a{
color:#FFFFFF;
background-color:#6699CC;
border-color:#336699;
z-index:100;
}

.nav ul ul li a:hover{
color:#FFCC00;
z-index:100;
}

/* make the sub level visible on hover list or link */
.nav ul li:hover ul,
.nav ul a:hover ul{
visibility:visible;
z-index:100;
}


HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url("Templates/csshover.htc"); font-size:100%;}
</style>
<![endif]-->

<style type="text/css">
<!--
@import url("schoolpsych.css");
-->
</style>
</head>

<body TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<a name="Top"></a>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="21" rowspan="2"><img src="../images/topLeftEndBanner.jpg" width="21" height="78"></td>
<td width="425" height="49" id="banner">&nbsp;</td>
<td width="342" height="49" valign="bottom" background="../images/topBanner_O.gif"><div class="siteTitle">
<div align="right">School Psychologist Files</div>
</div>
<div align="right">
</div>
</div></td>
<td rowspan="2" background="../images/topRightEnd.gif">&nbsp;</td>
</tr>
<tr>
<td height="29" colspan="2" valign="top" background="../images/topFill.gif">
<div class="nav">
<ul>
<li class="nav2"><a href="index.html" >Home</a></li>

<li><a href="#">Disabilities<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="ADHD.html" >ADHD</a></li>
<li><a href="Aspergers.html">Aspergers</a></li>
<li><a href="Autism.html">Autism</a></li>

<li><a href="DevDelay.html">Developmental Disability</a></li>
<li><a href="EmDisability.html">Emotional Disability</a></li>
<li><a href="notDone.html">Hearing Impaired</a></li>
<li><a href="notDone.html">Learning Disability</a></li>
<li><a href="notDone.html">Mental Retardation</a></li>

<li><a href="notDone.html">Orthopedic Impairment</a></li>
<li><a href="notDone.html">Traumatic Brain Injury</a></li>
<li><a href="notDone.html">Vision Impairment</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#">Special Education<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="laws.html">Laws</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="nav3"><a href="schoolPsychology.html" >School Psychology</a></li>
<li class="nav4"><a href="mailto:schoolpsychologistfiles@gmail.com" >Contact Us</a></li>
</ul>
</div>
<div class="siteTitleTail">.com</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="2" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="body" -->body<!-- TemplateEndEditable --></td>
<td width="21" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td><img src="../images/bottomLeftEnd.gif" width="21" height="28"></td>
<td valign="middle" background="../images/bottomFill.gif">
<div align="left" class="pageFooter"><span class="pageFooter"><a href="http://www.kingworks.net" class="footer" target="_blank">site design: Paul M. King</a></span></div>
</td>
<td valign="middle" background="../images/bottomFill.gif"><div align="right" class="pageFooter">Copyright 2006-2007</div></td>
<td><img src="../images/bottomRightEnd.gif" width="21" height="28"></td>
</tr>
</table>

</body>
</html>


OTHER:
Live link (http://schoolpsychologistfiles.com) to the site.
cssHover.htc is being used - no changes to file available from sperling.com (and other sites).

jlhaslip
02-14-2007, 05:29 AM
Check this link with your IE6 Browser. I have confirmed it works in Opera 9.1, Firefox 2.0.1 and IE6. Don't have IE7, yet.
Also, ran it throiugh the w3c (x)html validator and the jigsaw CSS validator, too.

http://www.jlhaslip.trap17.com/menu/drop_down.html

Race
02-26-2007, 06:31 PM
I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

I think.

At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

Thanks to all who helped.

jobeard
08-25-2008, 11:23 PM
Check this link with your IE6 Browser. I have confirmed it works in Opera 9.1, Firefox 2.0.1 and IE6. Don't have IE7, yet.

it's not just the hover issue, it's also the DOM mods made by IE :(


1- capture the UserAgent and save it
2- access the DOM based upon the User Agent
3- avoid the hover and use onMouseOver and onMoueOut instead

get this to run using onLoad
1-

var Layer; // = new String();
var Style; // = new String();
UAid; // = new String();
function checkBrowserId() {
if (navigator.userAgent.indexOf('MSIE') != -1) {
Layer = '.all';
Style = '.style';
UAid = 'IE';
} else if(navigator.userAgent.indexOf('Nav') != -1) {
Layer = '.layers';
Style = "";
UAid = 'Nav';
} else if(navigator.userAgent.indexOf('Gecko') != -1) {
Layer = '.layer';
Style = '.style';
UAid = 'FF';
} else {
// alert('UserAgent: ' + navigator.userAgent);
UAid = 'FF'; // emulate
}
}


2-

function showMe(name) {
thisObject = document.getElementById(name);
if (UAid == "FF") {
eval(thisObject.setAttribute('class','jsfok'));
} else {
thisObject.className = 'jsfok';
}
return true;
}
function hideMe(name) {
thisObject = document.getElementById(name);

if (UAid == "FF") {
eval(thisObject.setAttribute('class','jsfdiv'));
} else {
thisObject.className = 'jsfdiv';
}
return true;
}


3-

<some object id="xx" onMouseOver="showMe(xx);" onMouseOut="hideMe(xx);" >

your JS and CSS will then work everywhere :)

jerry62704
08-26-2008, 04:40 PM
I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

I think.

At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

Thanks to all who helped.

I use CCSPlay's menu and Dreamweaver. But I always hand code is so I never had the problem you are describing. I go three levels deep and the only problem I had was a missing closing for tables in IE6. It's the one in my signature if you want to see it in action.

effpeetee
08-26-2008, 06:52 PM
I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

I think.

At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

Thanks to all who helped.
This program (http://www.my-debugbar.com/wiki/IETester/HomePage)may help you. You can view with several browsers.

Frank

jobeard
08-28-2008, 04:46 PM
in post #7 above, I should have added

.jsfdiv { background-color:#90f0f0;
visibility:hidden;
display:none;
position:relative;
left:0px;
top:0px;
}
.jsfok { visibility:visible;
display:table-cell;
position:relative;
left:0px;
top:0px;
}
.jsfalt { background-color:yellow;
color:#ff0000;
visibility:visible;
display:table-cell;
position:relative;
left:0px;
top:0px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum