UL LI style not been applied


http://www.ukpegasus.co.uk/

this is a demo tree menu, im using for our company intranet.

if you click on the folder, the tree expands, displaying the contains of that folder.

the problem im having is, some file names are very long and they are aligned with the folder inside of the other filenames that gets displayed?

how do i fix this?

here is  my css use:

body{overflow-x:auto;overflow-y:auto;white-space: nowrap;padding:0px;background-color:#ffffff;color: #666666;font-size:11px;font-family:verdana;text-decoration:none;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#1D4799;scrollbar-base-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-face-color:#eeeeee;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#D1D7DC;}
     .tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;padding: 0;}
     .tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
     .tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
     .tree a,.tree a:visited,.tree a:active {margin-left: 20px;margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap;}
     .tree a:hover {margin-left: 20px;color: #888888;text-decoration: underline;white-space: nowrap;}
     .section {background-image: url("files/media/folder.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
     .section-open {background-image: url("files/media/folderopen.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
     .box {background-image: url("files/media/file.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
     p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}


heres my php used to display tree contains...:


function folderView($array, $baseUrl)
{
     if (!is_array($array))
          return 'not-an-array';

     $r = '';
     $r .= '<ul class="tree">';

     foreach ($array as $name => $value)
     {
          if (is_array($value))
          {
               if (count($value) > 0 | true)
               {
                    $divid = md5($baseUrl.$name);
                    $dirname = htmlspecialchars(substr($name, 0, strpos($name, '/')));
                    $dirtxt = $baseUrl.$name.'/description.txt';
                    $r .= "<li class='section' id='liid$divid'>";
                    $r .= '<a href="javascript:void(0);" onClick="return swapDisplay(\''.$divid.'\');" title="Browse Directory">'.$dirname.'</a>';
                    $r .= '<div id="'.$divid.'" style="display:none;">';
                    $r .= folderView($value, $baseUrl.$name);
                    $r .= '</div>';
                    $r .= '</li>';
               }
          }
          else
          {
               $file = $baseUrl.$value;
               substr($file, 0, strpos($file, '/'));
               $txt = $baseUrl.preg_replace('/\.(pdf|vsd)$/i', '.txt', $value);
               $title = substr($value, 0, strrpos($value, '.'));
               $onclick = "loadFile('".jsSafeString($file)."', "."'".jsSafeString($txt)."', "."'".jsSafeString($title)."');";
               $r .= '<li class="box">';
               $r .= '<a href="javascript:void(0);" onClick="" title="Browse Directory">'.htmlspecialchars($title).'</a>';
               $r .= '</li>';
          }
     }
     $r .= '</ul>';
     return $r;
}
LVL 16
ellandrdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TimYatesCommented:
Works in firefox...

Oh...hang on, I see what you mean...it doesn't work with ie...

Tim
ellandrdAuthor Commented:
Hi Tim,

Yes, i havent tried FF yet, was concentrating on IE first...

any luck yet?
TimYatesCommented:
>> any luck yet?

No :-(  It looks like IE

1) tries to fit the text in, discovers it can't,
2) so it shifts the text left as far as it can,
3) then the frame resizes to let all the text fit in...

Wheras the order should be 1, 3 (skipping 2)...

Hmmmm...  Would showing the tree all opened when the page loads, THEN compressing it up (in the onload event?) fix this?  then the frame might start the correct size required for all the elements?

I'm not sure though...  this is right on the outskirts of my knowledge :-(

I'm sure someone more knowledgable than me will be along in a bit with a complete solution though ;-)

Tim
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

ellandrdAuthor Commented:
OK thank you for looking and your comments.

Ellandrd
ellandrdAuthor Commented:
is anybody got any comments on this?
dbrittCommented:
load the page, view source, paste it in here along with the rendered source of every related stylesheet/js file/etc
ellandrdAuthor Commented:
can you not do this?

would making the source downloadable be better?

http://www.seandelaney.co.uk/directory_viewer.zip

if not then, i'll paste 'view source' code and stylesheet code in this thread..

ellandrd
dbrittCommented:
The link doesn't seem to be working. Have you posted the file yet?
dbrittCommented:
Nevermind, just got it
ellandrdAuthor Commented:
yes i was taking its time to upload... sorry!
dbrittCommented:
Those are still the PHP files. I don't have a server available to run PHP files. Is that where the webpage is hosted as well? Do you have a direct link to the page in question?
ellandrdAuthor Commented:
no the pages are hosted on the companies internal servers, but we also have this domain : http://www.ukpegasus.co.uk/ for displaying scripts outside our company.

the scripts are running at this location for now so Experts can view it.

>>Do you have a direct link to the page in question?

im not too sure what you mean?
dbrittCommented:
I meant exactly what you provided :)
dbrittCommented:
I thought that the link you initially posted was one you were mimicking rather than YOURS :)
ellandrdAuthor Commented:
oh ok, sorry...

p.s did you not see that link at the top of the page? its the first thing i posted...
dbrittCommented:
If you'd be so kind as to re-enable right clicking temporarily, that'd be fantastic :)
ellandrdAuthor Commented:
no the both scripts are the same, the scripts uploaded the ukpegasus domain is a complete copy of what we run on the internal servers, except for a few other js scripts within the js file... same for stylesheet, i removed any styles/js scripts to reduce the size of these files for the ukpegasus domain...after that the script that are available for download, are the scripts thats on our internal server this minute!
ellandrdAuthor Commented:
ok, sorry, we have an young engineer within the office who likes to be a "webmaster" now and again, and goes noiseying in our scripts...
dbrittCommented:
Also, something you may consider in your PHP is to put new lines "\n" after you print HTML to the page so that it's easier to debug in the future.
ellandrdAuthor Commented:
your commented improvements are noted! and they are all welcome...

the system im building is just a prototype for now, and im just playing around, and trying different ideas in reading directorys on our servers.  the company still isnt sure how they want it to work and look etc etc, but i have to keep myself busy...
ellandrdAuthor Commented:
p.s bear in mind we have offices all over the globe, and my fellow colleagues use Firefox over in the states so it has to be cross browser!

here in the UK offices, we use both IE and FF and in Kuala Lumpa, i think they use IE!
dbrittCommented:
Would you please implement the "\n" after each printed HTML tag in the PHP so that after you update the file again with any changes I suggest that I wont have to re-format all of this code to debug it? Thanks :)
ellandrdAuthor Commented:
ok give me a few moments to do it and upload it...
ellandrdAuthor Commented:
would it be better if i just removed some the test folders?

cos in view source, its hard to read as there are lots of folders...
dbrittCommented:
No no, the quantity is fine. It just gets jumbled up after the page renders because there are no line breaks.
ellandrdAuthor Commented:
try now...
dbrittCommented:
The "\n" should not literally be printed to the page. Are you double escaping them in the PHP? (shouldn't be) Maybe there's a different way to print newlines in PHP, but I thought "\n" works.
ellandrdAuthor Commented:
i have replaced them with <br> but dont make any difference
dbrittCommented:
<br> wouldn't change how it looks when I do view source, it needs to be a line break in the file, not on the page. Show me how you're printing the line breaks to the page?
dbrittCommented:
(in PHP)
ellandrdAuthor Commented:
$r .= '<ul class="tree">\n';
dbrittCommented:
Don't use apostrophes to quote escaped characters. If it works like PERL, and I think it does, then apostrophes get their contents interpreted literally. A quick way to do fix this would be:

1. Do a "replace all" on the quotes (") with escaped quotes (\")
2. Do a "replace all" on the apostrophes (') with quotes (")

dbrittCommented:
I have to go home, but I'll be able to help you again with this first thing in the morning. Make sure that the code works and don't replace any apostrophes that you need to keep (like in words like: "Derek's test sentence"). Good luck, talk to you tomorrow.
ellandrdAuthor Commented:
OK
ellandrdAuthor Commented:
speak tommorrow morning...
ellandrdAuthor Commented:
ok getting errors all over place. it dont like me now!

i changed all 'hello world' to "hello world"

and

i changed all "hello world" to \"hello world\"
dbrittCommented:
I have a few minutes to work... (like 20), so let's see what we can do. I put the replace items in a specific order for a reason:


1. Do a "replace all" on the quotes (") with escaped quotes (\")
2. Do a "replace all" on the apostrophes (') with quotes (")


means...

     'There are "quotes" somewhere in here'

after the first step becomes

     'There are \"quotes\" somewhere in here'

after the second step becomes

     "There are \"quotes\" somewhere in here"


Take a fresh copy of your code and try that and publish it to the test page that you linked us to.
ellandrdAuthor Commented:
here is my modified copy of the page:

<html>
<head>
      <style type="text/css">
      <!--
      body{overflow-x:auto;overflow-y:auto;white-space: nowrap;padding:0px;background-color:#ffffff;color: #666666;font-size:11px;font-family:verdana;text-decoration:none;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#1D4799;scrollbar-base-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-face-color:#eeeeee;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#D1D7DC;}
      .tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;padding: 0;}
      .tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree a,.tree a:visited,.tree a:active {margin-left: 20px;margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap;}
      .tree a:hover {margin-left: 20px;color: #888888;text-decoration: underline;white-space: nowrap;}
      .section {background-image: url("files/media/folder.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
      .section-open {background-image: url("files/media/folderopen.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
      .box {background-image: url("files/media/file.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
      p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}
      //-->
</style>
<script type="text/javascript">
<!--
function swapDisplay(elemId,title,txt)
{
      if (!txt)
      {
            txt = "";
      }

      if (!title)
      {
            title = "";
      }

      d = document.getElementById(elemId);
      liid1 = document.getElementById("liid" + elemId);

      if (!d)
            return false;

      if (d.style.display == "none")
      {

            d.style.display = "";
            liid1.className = "section-open";
      }
      else
      {
            d.style.display = 'none';
            liid1.className = "section";
      }
      return false;
}

//-->
</script>
</head>
<body name="directory" style="margin:5px 0px 0px 5px;">
<p>Folder Directory</p>
<div style="float:left;width:100%;">
<?php
define('FOLDER', 'e:\\domains\\u\\ukpegasus.co.uk\\user\\htdocs\\intranet');

function jsSafeString($string, $nl2br = false)
{
      $string = htmlspecialchars($string);
      $string = addslashes($string);

      if (substr_count($string, ".txt") > 0)
      {
            if(is_file(FOLDER.$string))
            {
                  $string = file_get_contents(FOLDER.$string);
            }
            else
            {
            }
      }

      if ($nl2br)
            $string = nl2br($string);

      $string = str_replace(array("\n","\r","\t"), array('\n','\r','\t'), $string);

      return $string;
}

function getFilesInDirTree($dir, $recursive = false, $filter = '', $subdir = '')
{
      if (!is_dir($dir))
            return false;

      $handle = opendir($dir);

      if (!is_resource($handle))
            return false;

      $files = array();

      while (false !== ($file = readdir($handle)))
      {
            if ($file != '.' && $file != '..')
            {
                  $fullpath = $dir.'/'.$file;

                  if (is_dir($fullpath) && $recursive)
                  {
                        $files[$file.'/'] = getFilesInDirTree($fullpath, true, $filter, $subdir.$file.'/');
                  }
                  elseif (is_file($fullpath))
                  {
                        if (is_callable($filter))
                              $filter($file);

                        if (!empty($file))
                        {
                              $files[] = $file;
                        }
                  }
            }
      }
      return $files;
}

function filterFiles(&$filename)
{
      if (preg_match('/\.(pdf|vsd)$/i', $filename))
            $show = true;
      else
            $show = false;

      if (!$show)
            $filename = '';
}

function folderView($array, $baseUrl)
{
      if (!is_array($array))
            return 'not-an-array';

      $r = "";
      $r .= "<ul class=\"tree\">\n";

      foreach ($array as $name => $value)
      {
            if (is_array($value))
            {
                  if (count($value) > 0 | true)
                  {
                        $divid = md5($baseUrl.$name);
                        $dirname = htmlspecialchars(substr($name, 0, strpos($name, '/')));
                        $dirtxt = $baseUrl.$name.'/description.txt';
                        $r .= "<li class=\"section\" id=\"liid$divid\">\n";
                        $r .= "<a href=\"javascript:void(0);\" onClick=\"return swapDisplay('$divid');\" title=\"Browse Directory\">".$dirname."</a>\n";
                        $r .= "<div id=\"$divid\" style=\"display:none;\">\n";
                        $r .= folderView($value, $baseUrl.$name);
                        $r .= "</div>\n";
                        $r .= "</li>\n";
                  }
            }
            else
            {
                  $file = $baseUrl.$value;
                  substr($file, 0, strpos($file, '/'));
                  $txt = $baseUrl.preg_replace('/\.(pdf|vsd)$/i', '.txt', $value);
                  $title = substr($value, 0, strrpos($value, '.'));
                  $onclick = "loadFile('".jsSafeString($file)."', "."'".jsSafeString($txt)."', "."'".jsSafeString($title)."');";
                  $r .= "<li class=\"box\">\n";
                  $r .= "<a href=\"javascript:void(0);\" onClick=\"\" title=\"Browse Directory\">".htmlspecialchars($title)."</a>\n";
                  $r .= "</li>\n";
            }
      }
      $r .= "</ul>\n";
      return $r;
}

$dir = FOLDER;
$url = dirname($_SERVER['PHP_SELF']).'/';
$fileTree = getFilesInDirTree($dir, true, 'filterFiles');
echo folderView($fileTree, $url);
?>
</div>
</body>
</html>
dbrittCommented:
OK, use this stylesheet:

      <style type="text/css">
      <!--
      body{overflow-x:auto;overflow-y:auto;white-space: nowrap;padding:0px;background-color:#ffffff;color: #666666;font-size:11px;font-family:verdana;text-decoration:none;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#1D4799;scrollbar-base-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-face-color:#eeeeee;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#D1D7DC;}
      .tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;padding: 0;}
      .tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree a,.tree a:visited,.tree a:active {margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap; vertical-align:middle;}
      .tree a:hover {color: #888888;text-decoration: underline;white-space: nowrap;}
      .section {list-style-image: url("files/media/folder.png");padding-top: 1px;padding-bottom: 1px;}
      .section-open {list-style-image: url("files/media/folderopen.png");padding-top: 1px;padding-bottom: 1px;}
      .box {background-image: url("files/media/file.png");background-repeat: no-repeat;background-position: top left;padding-top: 1px;padding-bottom: 1px;}
      p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}
      //-->
      </style>


I saw that you were trying to put a background image in and shift your text over with margins. I changed it so that the bullets were now the image, removed the margin, and aligned your text vertically in the middle. If you'd still like the 20px margin, just put it in your main tree div. :)
dbrittCommented:
Whoops...Doc is a little quirky, one sec and I'll fix it.
dbrittCommented:
Here ya go:

====================


      <style type="text/css">
      <!--
      body{overflow-x:auto;overflow-y:auto;white-space: nowrap;padding:0px;background-color:#ffffff;color: #666666;font-size:11px;font-family:verdana;text-decoration:none;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#1D4799;scrollbar-base-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-face-color:#eeeeee;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#D1D7DC;}
      .tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;padding: 0;}
      .tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
      .tree a,.tree a:visited,.tree a:active {margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap; vertical-align:middle;}
      .tree a:hover {color: #888888;text-decoration: underline;white-space: nowrap;}
      .section {list-style-image: url("files/media/folder.png");padding-top: 1px;padding-bottom: 1px;}
      .section-open {list-style-image: url("files/media/folderopen.png");padding-top: 1px;padding-bottom: 1px;}
      .box {list-style-image: url("files/media/file.png");padding-top: 1px;padding-bottom: 1px;}
      p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}
      //-->
      </style>
ellandrdAuthor Commented:
ok you solved the problem for IE but now view it in FF... it no longer working like it did...
dbrittCommented:
Who uses Firefox anyway... *sigh*

I'll take a look
ellandrdAuthor Commented:
>>Who uses Firefox anyway

please dont tell me your 1 of these guys that dont use Firefox?
dbrittCommented:
I'm an IE intranet developer (see my profile). I have Fx installed for testing when people need it done. But no, I don't use Firefox for web browsing, ever. Please don't tell me you're one of these guys that hate MS :-P
ellandrdAuthor Commented:
>>Please don't tell me you're one of these guys that hate MS

dont worry im not! i only hate MS for their large update patches that they issue. after that MS dont bother me, but i like to be a tester - use the following browsers:

Netscape
Opera
Flock
Firefox
IE
and on my girlfriends laptop, I use Safari... plus im a web developer so i like all my site ot be cross-browser compatiable only my css is poor when things get tricky and dont work for me...

You say you are an intranet developer, what im building at the moment is an intranet for our company. all the offices across the globe want to be able to access it by either remote connection or using a Citrix server....

Have you developed any intranet sites for clients in UK?
dbrittCommented:
>> Have you developed any intranet sites for clients in UK?

No, I work in the US for a private company (not small by any means, just private...as in...not in the stock exchange). Since the intranet is owned by the company, we can force our users to only use IE which lends itself to intranet development INCREDIBLY well. Not having to make things be cross browser compatible opens up so many doors for awesome features and since everything we use is from MS, they all work nicely together.
ellandrdAuthor Commented:
Yes, but in my case, we have 7 offices in the US, 2 in the UK, & 2 Asia. outta them 11 office, i'd say all of the US and the london office uses Firefox. our office here in Aberdeen, using IE as we force them too like you do, but in Asian offices, im not too sure and it could be a mixture so me and my boss and the developers in the US have to take all that into account...
dbrittCommented:
It appears that your original version does not work with Fx either. It also appears that PNG images do not show up in Fx because when I added a simple <img> element with the folder image, it failed to render. Even when I used your folder.gif instead of folder.png it would not render in Fx as a background image. I will look into how to do that for Fx.
ellandrdAuthor Commented:
eh? the version that is on our internal server works fine in FF, but not in IE, as i have not updated it with your code yet...

but OK...
TimYatesCommented:
>>  It appears that your original version does not work with Fx either.

The original version worked fine in Firefox :-)
dbrittCommented:
Now it works, it wasn't liking it when I linked to your site...weird. :-/

*keeps looking*
ellandrdAuthor Commented:
dbritt

so are you saying the problem was been caused by the background image? so changing it to use list-style:url... it fixes alignment problem...?
dbrittCommented:
Yes. I've got it working in Firefox now, but the vertical align is being stubborn and preloading images in Firefox is (according to one site I saw) impossible if the image has "display:none;"
dbrittCommented:
Looks like preload just got fixed with my last change...on to vertical-align fix.
dbrittCommented:
When you said that last posted version didn't work in Fx, what didn't work exactly?
ellandrdAuthor Commented:
there was too much off a margin between the image and text vertically and horizontally
dbrittCommented:
OK, I had initially thought NONE of it was working (because Fx wasn't letting me use the images). I've been looking around for vertically aligning in Fx, no luck so far. The actual vertical-align style is an inline style, so it's not SUPPOSED to be on block elements...but it works in IE. Just got to find an alternative for Fx.
ellandrdAuthor Commented:
what code have you got so far?
dbrittCommented:
Back from lunch now. I'm going back to square 2 (after using the list-style-image) because the changes I thought were making a difference in Fx were actually not.
dbrittCommented:
Add this:

.tree li a { vertical-align:top; }
dbrittCommented:
OK, now I've got it completely fixed for Fx and IE except the preloading isn't working consistently. I'll see if there's a workaround for Fx, but if there's not, I'll just post the code.
dbrittCommented:
OK, here it is. Preloads the 3 images (folder, folderopen, and file) and removes the extra space that Fx puts between the bullet and the content. Now your users can use Fx or IE :)

I also changed your main div's opening tag to look like this:
     <div id="treeContainer" style="float:left;width:100%; margin-left:20px; display:none;">


Enjoy! ^^

=======================================================

<head>

<style type="text/css">
<!--

body{overflow-x:auto;overflow-y:auto;white-space: nowrap;padding:0px;background-color:#ffffff;color: #666666;font-size:11px;font-family:verdana;text-decoration:none;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#1D4799;scrollbar-base-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-face-color:#eeeeee;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#D1D7DC;}
.tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;padding: 0;}
.tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
.tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
.tree a,.tree a:visited,.tree a:active {margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap;}
.tree a:hover {color: #888888;text-decoration: underline;white-space: nowrap;}
.section {list-style-image: url("files/media/folder.png");padding-top: 1px;padding-bottom: 1px; margin:0; padding-left:0;}
.section-open {list-style-image: url("files/media/folderopen.png");padding-top: 1px;padding-bottom: 1px;}
.box {list-style-image: url("files/media/file.png");padding-top: 1px;padding-bottom: 1px;}
.tree li a { vertical-align:top;}
p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}

-->
</style>

<script type="text/javascript">
<!--

var intervalId;

var imgFolder = new Image();
var imgFolderOpen = new Image();
var imgFile = new Image();

imgFolder.src = "files/media/folder.png";
imgFolderOpen.src = "files/media/folderopen.png";
imgFile.src = "files/media/file.png";

var startPreloadTime, maxPreloadWait = 2000;

window.onload = function(){ startPreloadTime = new Date(); intervalId = setInterval(checkPreload, 10); };

function checkPreload()
{
      if((imgFolder.complete && imgFolderOpen.complete && imgFile.complete) || ((startPreloadTime + maxPreloadWait) > new Date()))
      {
            document.getElementById("treeContainer").style.display = "block";
            clearInterval(intervalId);
      }
}

if(document.styleSheets)
{
      var fxRules = document.styleSheets[0].cssRules; // Firefox rules object (assumes first style sheet)
      
      if(fxRules)
      {
            for(var i = 0; i < fxRules.length; i++)
            {
                  if(fxRules[i].selectorText.toLowerCase() == ".tree li a")
                  {
                        fxRules[i].style.position = "relative";
                        fxRules[i].style.left = "-7px";
                        break;
                  }
            }
      }
}

function swapDisplay(elemId,title,txt)
{
      if (!txt)
      {
            txt = "";
      }

      if (!title)
      {
            title = "";
      }

      d = document.getElementById(elemId);
      liid1 = document.getElementById("liid" + elemId);

      if (!d)
            return false;

      if (d.style.display == "none")
      {

            d.style.display = "";
            liid1.className = "section-open";
      }
      else
      {
            d.style.display = 'none';
            liid1.className = "section";
      }
      return false;
}

//-->
</script>
</head>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ellandrdAuthor Commented:
ah thank you soooo much! that code works 'perfect'!!!

i owe you one!

Ellandrd

p.s thanks again for all the time and effort you put into this...
dbrittCommented:
You're welcome. :)

Thanks for the grading and good luck with your project! ^^
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.