Link to home
Start Free TrialLog in
Avatar of boothweiser
boothweiser

asked on

Upgrading our site's CSS to work with newer browsers (mozilla 1.6/netscape 7/etc) - we use NS4.7/IE5.5 now

I was just assigned to upgrade our site so that it will work with newer broswers.  The developer before me, who made the entire site, was assigned to make it comply with NS 4.7 and IE 5.5.  He extensively used CSS, jsp, and java and there are many examples of code that look similar to this:

if (navigator.appName == 'Netscape'){
   document.layers[ImgArray[counter]].visibility = 'hide';
   document.layers[ImgArray[counter2]].visibility = 'show';
   ...
}
else
{
   document.all[ImgArray[counter]].style.visibility = 'hidden';
   document.all[ImgArray[counter2]].style.visibility = 'visible';
   ...
}

I believe when he designed the site to begin with he started with Netscape 4.7 and then adapted the site to work with IE.  

I have been doing much trial and error with no success.  When any CSS page is accessed nothing is shown at all..it is blank.  It looks fine in the older browsers.
Avatar of bruno
bruno
Flag of United States of America image

you'll need to provide a link for us to really provide much help...
Avatar of seanpowell
Well - unfortunately, that's to be expected.

There may likely be no quick fix here, because I have no idea where, how often and why those scripts appear in your site. Although your example appears to be some sort of dhtml style menu or similar, that kind of code could be any number of places.

Basically, todays' sites are fundamentally different from those of even 5 years ago. The main difference is that through CSS, modern browsers and proper coding, we are able to pretty much completely separate form and function. In your case, content from style. The days of having to change cell widths on nested tables on every single page are, thankfully, over.

However - none of this rant does much to solve your initial problem. It's very much going to depend on the site - how large it is, and how badly the presentation of its content has been embedded in the structure of its content.

It's certainly not impossible - indeed, I make a very good living just with those clients that had sites created like that in the first place.

So, the bad side is that it could be a lot of work for to. The good side - this may be the last time it ever needs to happen.

Avatar of boothweiser
boothweiser

ASKER

I can't put a link up, sorry.  The pages are not public nor are they allowed to be.  

It is a very large site that accesses a database, but I counted only 5-10 files that have the IE/Nav fork.  There are a lot of tables in the site.  Once I can get CSS to show up, the tables will most likely all need to be tweaked.  

I assume that IE5.5 is a little closer to the standards than NS4.7 was, I suppose I will start from there.  Any other tips or fixes will be appreciated bigtime.
One big one:

Use the right doctype in your documents:

This - if you will be removing all legacy tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

This, is you still need to have some in there:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

This will make sure that the browsers all behave in the same fashion.

And one other big one :-)

IE5's CSS box model works differently than other browsers, so you need to be careful. Here's something to read through:
http://accessat.c-net.us/articles/hide-css_p3.html
Thanks.  I looked into the doctype stuff already.  I think my problem lies in <div> tags - The server says they all load fine, but nothing is displayed.  I think when javascript tries to get them there is an error.  I will post more as I trace it out.
If you can post one of the problem sections - removing the content as necessary for security, it may help us debug it with you.
Thanks - I will later this evening...getting a little hectic today.
Here is a big part of the offending code.  Sorry about the delay.


<table border=0 cellspacing=0 cellpadding=0 width=950>
 <tr>
  <td>
    <a href="javascript:switch(0,-1);"
onmouseover='switchImage("over",0);'
      onmouseout='switchImage("out",0);'>
      <img name="tabFunc1" border=0 src="/<%= webApp %>/images/img1.jpg
height=26 width=200>
    </a>
  </td>
  <td>
    <a href="javascript:switch(1,-1);"
onmouseover='switchImage("over",1);'
      onmouseout='switchImage("out",1);'>
      <img name="tabFunc2" border=0 src="/<%= webApp %>/images/img2.jpg
height=26 width=200>
    </a>
  </td>
 </tr>
 <tr><td>
  <h1>
    <img height=50 src="/<%= webApp %>/images/loading.jpg height=60>
    LOADING PAGE...
  </h1>
 </tr></td>

</table>

<div id='Func1' style="position:absolute; left=<%= levelOneLeft
%>;top:<%= levelOneTop %>;
   width:934; height:447; z-index:2;visibility:hidden">
  <table width=934 height=447>
    <tr>
     <td>
      <a href="javascript:switchDiv(3,0);"onmouseover='switchiImage("over",3);'
           onmouseout='switchImage("out",3);'>
         <img name="Func1App1" src="/<%= webApp %>/images/Aimg1.jpg
height=30 width=200>
     </td>
     <td>
      <a href="javascript:switchDiv(4,0);"onmouseover='switchiImage("over",4);'
           onmouseout='switchImage("out",4);'>
         <img name="Func1App2" src="/<%= webApp %>/images/Aimg2.jpg
height=30 width=200>

     </td>
    </tr>
   </table>
</div>
<div id='Func1App1' style="position:absolute; left:<%= levelTwoLeft %>;
    top:<%= levelTwoTop %>; width:900; height: 400; z-index:3; visibility:hidden">
  <jsp:include page="Func1App1.jsp" flush="true" />
</div>
<div id='Func1App2' style="position:absolute; left:<%= levelTwoLeft %>;
    top:<%= levelTwoTop %>; width:900; height: 400; z-index:3; visibility:hidden">
  <jsp:include page="Func1App21.jsp" flush="true" />
Experts,

Are you giving up on this?  There has been not response to boothweiser's last post.

COBOLdinosaur
Page Editor Web Development
My apologies - somehow I missed your last comment to this question. The date of the comment blends quite nicely with a CSS cleanup day - so that may be why.
I'll review in the morning to see what's going on.

Cd& - tone down the reminder a little, okay :-)
or at least proofread it...   :-)
ok, thanks for taking renewed interest in this...

The switchDiv function from above is what will not work.  Here is a piece of it, formatted for IE 5.5:

document.all[imageArray[currentImage]].style.visibility = 'hidden';
document.all[imageArray[nextImage]].style.visibility = 'visible';

I basically have not been able to grasp how standards-compliant browsers navigate through all of the structures.  I know that I need to use .getElementById() instead of .all, but it is not a straight switch.  

Thanks a bunch.
Hi boothweiser,

I've posted a pointer Q for you in the javascript section to get some further comments on this...
Thanks,
Sean
ASKER CERTIFIED SOLUTION
Avatar of lil_puffball
lil_puffball
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
hi boothweiser,

I seem to remember having a similar problem with css and ie6.

Can you post the css relevant information that is between the <head> tags in your page? I have an idea!
thanks for the responses.

pufball - style.visibility = 'visible' has been working fine for me in testing.  changing it to style.display did not help.

gam3r - I was unable to copy and paste.  I had to retype everything.  I did not test it before posting.  I apologize.  My missing quotes or spaces was not the issue.  thanks anyway.  
ok, i see. well, where's the problem anyways? how about telling us your goal and we'll set it up for you...?

gam3r
<script type="text/javascript">
<!--
var isID = (document.getElementById)?true:false;
var isAll = (document.all && !document.getElementById)?true:false;
var isLayers = (document.layers)?true: false;
function someName(){
      if (isID){
            document.getElementById(ImgArray[counter]).style.visibility = 'hidden';
            document.getElementById(ImgArray[counter2]).style.visibility='visibile';
      } else {
            if(isAll){
                  document.all[ImgArray[counter]].style.visibility = 'hidden';
                    document.all[ImgArray[counter2]].style.visibility = 'visible';
             } else {
                  if(isLayers){
                        document.layers[ImgArray[counter]].visibility = 'hide';
                        document.layers[ImgArray[counter2]].visibility = 'show';
                   }
            }
      }
}
// -->
</script>

different from lil.... and still allows you to code for NS4 if you really want to.

You will have to use absolute positioning for div's if you want to support it still if not, then change your css to

.SoMECLASSNAME{ display: none; }

or
 #SOMEIDNAME{ display: none; }

and then just use

<script type="text/javascript">
<!--
var isID = (document.getElementById)?true:false;
function someName(){
      if (isID){
            document.getElementById(ImgArray[counter]).style.display = 'none';
            document.getElementById(ImgArray[counter2]).style.display=''; // or inline or block
      } else {
            alert("You are not using a modern browser please upgrade to a newer version");
      }
}
// -->
</script>
Try something similar to this. Chane toggleme to object name.

 if (document.all){
    if(toggleme.style.display == 'none'){
      document.all[id].style.display = '';
    } else {
      document.all[id].style.display = 'none';
    }
  } else if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    } else {
      document.getElementById(id).style.display = 'none';
    }
  }
}
thanks jaysolomon  and jaspworld.  I will try those now and post the results.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for the help people.  I split the points, but pufball was the first with the answer I needed.  Thanks again.