...

View Full Version : Suggestions for changing code to work in both mozilla and IE



melissat08
08-29-2007, 05:11 AM
long story short - i want to have a way to hover over pictures (thumbnails) to show a larger image in another area. The code I have works great but not in IE. But I also know its because the <span> code doesn't work in IE.

Really all I need is suggestions on something I can use. I can look up the code and figure it out on my own (its the way i learn =]) but anything will help.

heres my code I have right now. its perfect and exactly how I want it its just frustrating that IE doesn't support the code.


<html><head>
<style type="text/css">

table {visibility:hidden;}
div table tbody tr td a.navbar,
table tr td script {visibility:visible !important}
table tbody tr td a.navbar, table tbody tr td input, table tbody tr td font {visibility:visible;}
body table td {background-color: transparent;}
table tbody table tbody td {visibility:hidden;}
table tr td div div{display:none;}
div table tbody tr td form input, div table tbody tr td a img, div table tbody tr td div a, div table tbody tr td {visibility: visible !important;}
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink,
td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
.friends table {background-color:transparent;}
.hidethem {visibility:hidden; display:none;}
a span{display:none;}

a:hover span
{display: block; position: absolute; top: 70px; left: 425px; width: 220px; padding: 5px; margin: 10px; z-index: 5;
color:FFFFFF;font-family:georgia;font-size:16px;text-decoration:none; cursor: crosshair; border-width:0px}

.friends {
background-color:000000;
font-family:georgia;
font-size: 10pt;
font-weight:normal;
text-align:left;
line-height:12pt;
position:left;
left:1%;
top:50px;
margin-left:0px;
width:615px;
height:550px;
overflow:auto;
z-index:0;
visibility:visible !important;
border-style:solid;
border-width:0px;
border-color: 000000;
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
body,td,th {
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>
<p>&nbsp;</p>
<div class="friends"><FONT style="font-weight: bold; font-size:16pt; color: #000000; letter-spacing:-2; font-family: georgia; line-height: 16px; display:block; text-align: left;">[ CHILDREN ]</font><br>


<a href=" ">
<img src=".../TNchildren01.jpg" border="0">
<span><img src=".../children01.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren02.jpg" border="0">
<span><img src=".../children02.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren03.jpg" border="0">
<span><img src=".../children03.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren04.jpg" border="0">
<span><img src=".../children04.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren05.jpg" border="0">
<span><img src=".../children05.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren06.jpg" border="0">
<span><img src=".../children06.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren07.jpg" border="0">
<span><img src=".../children07.jpg" border="0"></span></a>

<a href=" ">
<img src=".../TNchildren08.jpg" border="0">
<span><img src=".../children08.jpg" border="0"></span></a>



</div>
</body>
</html>

thanks for any help!

amitthechosen1
08-29-2007, 06:25 AM
hi,
There is a general method that can be applied.
You can do the following :-

if ("Microsoft Internet Explorer" == browser_name)
{
..
Do something
..
}
else if ("Netscape" == browser_name)
{
..
Do something...
..
}
else if("Mozilla" == browser_name)
{
..
Do something....
}

This code should be added within the script tag.
I hope it solves your problem.

Regards
Amit

melissat08
09-03-2007, 03:41 AM
I like that idea except im really just looking for another way to do what I want in internet explorer because I haven't found anything that will let me hover over the images and show them over larger to the right or below, etc.

any other ideas out there??



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum