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[c ounter]].v isibility = 'hide';
document.layers[ImgArray[c ounter2]]. visibility = 'show';
...
}
else
{
document.all[ImgArray[coun ter]].styl e.visibili ty = 'hidden';
document.all[ImgArray[coun ter2]].sty le.visibil ity = '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.
if (navigator.appName == 'Netscape'){
document.layers[ImgArray[c
document.layers[ImgArray[c
...
}
else
{
document.all[ImgArray[coun
document.all[ImgArray[coun
...
}
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.
you'll need to provide a link for us to really provide much help...
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.
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.
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.
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
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
ASKER
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.
ASKER
Thanks - I will later this evening...getting a little hectic today.
ASKER
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("o ut",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("o ut",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:hidde n">
<table width=934 height=447>
<tr>
<td>
<a href="javascript:switchDiv (3,0);"onm ouseover=' switchiIma ge("over", 3);'
onmouseout='switchImage("o ut",3);'>
<img name="Func1App1" src="/<%= webApp %>/images/Aimg1.jpg
height=30 width=200>
</td>
<td>
<a href="javascript:switchDiv (4,0);"onm ouseover=' switchiIma ge("over", 4);'
onmouseout='switchImage("o ut",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" />
<table border=0 cellspacing=0 cellpadding=0 width=950>
<tr>
<td>
<a href="javascript:switch(0,
onmouseover='switchImage("
onmouseout='switchImage("o
<img name="tabFunc1" border=0 src="/<%= webApp %>/images/img1.jpg
height=26 width=200>
</a>
</td>
<td>
<a href="javascript:switch(1,
onmouseover='switchImage("
onmouseout='switchImage("o
<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:hidde
<table width=934 height=447>
<tr>
<td>
<a href="javascript:switchDiv
onmouseout='switchImage("o
<img name="Func1App1" src="/<%= webApp %>/images/Aimg1.jpg
height=30 width=200>
</td>
<td>
<a href="javascript:switchDiv
onmouseout='switchImage("o
<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
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 :-)
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... :-)
ASKER
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[cu rrentImage ]].style.v isibility = 'hidden';
document.all[imageArray[ne xtImage]]. style.visi bility = '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.
The switchDiv function from above is what will not work. Here is a piece of it, formatted for IE 5.5:
document.all[imageArray[cu
document.all[imageArray[ne
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
I've posted a pointer Q for you in the javascript section to get some further comments on this...
Thanks,
Sean
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
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!
ASKER
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.
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
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(Im gArray[cou nter]).sty le.visibil ity = 'hidden';
document.getElementById(Im gArray[cou nter2]).st yle.visibi lity='visi bile';
} else {
if(isAll){
document.all[ImgArray[coun ter]].styl e.visibili ty = 'hidden';
document.all[ImgArray[coun ter2]].sty le.visibil ity = 'visible';
} else {
if(isLayers){
document.layers[ImgArray[c ounter]].v isibility = 'hide';
document.layers[ImgArray[c ounter2]]. 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(Im gArray[cou nter]).sty le.display = 'none';
document.getElementById(Im gArray[cou nter2]).st yle.displa y=''; // or inline or block
} else {
alert("You are not using a modern browser please upgrade to a newer version");
}
}
// -->
</script>
<!--
var isID = (document.getElementById)?
var isAll = (document.all && !document.getElementById)?
var isLayers = (document.layers)?true: false;
function someName(){
if (isID){
document.getElementById(Im
document.getElementById(Im
} else {
if(isAll){
document.all[ImgArray[coun
document.all[ImgArray[coun
} else {
if(isLayers){
document.layers[ImgArray[c
document.layers[ImgArray[c
}
}
}
}
// -->
</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)?
function someName(){
if (isID){
document.getElementById(Im
document.getElementById(Im
} 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.dis play = '';
} else {
document.all[id].style.dis play = 'none';
}
} else if (document.getElementById){
if(document.getElementById (id).style .display == 'none'){
document.getElementById(id ).style.di splay = 'block';
} else {
document.getElementById(id ).style.di splay = 'none';
}
}
}
if (document.all){
if(toggleme.style.display == 'none'){
document.all[id].style.dis
} else {
document.all[id].style.dis
}
} else if (document.getElementById){
if(document.getElementById
document.getElementById(id
} else {
document.getElementById(id
}
}
}
ASKER
thanks jaysolomon and jaspworld. I will try those now and post the results.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the help people. I split the points, but pufball was the first with the answer I needed. Thanks again.