Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

works in IE, but not in Mozilla :(

Status
Not open for further replies.

jamesp0tter

Programmer
Feb 20, 2003
119
PT
i have the following webpage:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style>

table, td { font-family: Tahoma; font-size: 12px; color: #404040; border-collapse: collapse }

.sechover { cursor: pointer }

.procurar { font-size: 10pt; text-align: center; border: 1px solid #7C95BE; background-color: #E7ECF5; height: 20px }

.catprincipal { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; text-align: right; width: 100%; height: 22px; cursor: pointer }

.catsecundari { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; text-align: right; width: 100%; border-top: 1px solid #A1ADC6; height: 25px; display: block }
.catsekundari { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; text-align: right; width: 100%; border-top: 1px solid #A1ADC6; height: 25px; display: none }

.caterceira { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; text-align: right; width: 100%; border-top: 1px solid #A4A4A4; border-bottom: 1px solid #A4A4A4; height: 25px; display: block }
.catterceira { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; text-align: right; width: 100%; border-top: 1px solid #A4A4A4; border-bottom: 1px solid #A4A4A4; height: 25px; display: none }




</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="javascript">

function showhidelayer(layername)
{

  var divObjEx = (document.all) ? document.all['ex' + layername] : document.getElementById('ex' + layername)
  var divObjMax = (document.all) ? document.all['max' + layername] : document.getElementById('max' + layername)

  if (divObjEx.className == 'catsekundari')
  {
    divObjMax.src="./images/cat-set-bai.gif"
    divObjEx.className = "catsecundari"
  }
  else
  {
    divObjEx.className = "catsekundari"
    divObjMax.src="./images/cat-set-esq.gif"
  }
}

function showhidelayerr(layername)
{

  var divObjEx = (document.all) ? document.all['ex' + layername] : document.getElementById('ex' + layername)
  var divObjMax = (document.all) ? document.all['max' + layername] : document.getElementById('max' + layername)

  if (divObjEx.className == 'catterceira')
  {
    divObjMax.src="./images/cat-set-bai.gif"
    divObjEx.className = "caterceira"
  }
  else
  {
    divObjEx.className = "catterceira"
    divObjMax.src="./images/cat-set-esq.gif"
  }
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
         <table class="catprincipal" onClick="showhidelayer('1');">
		  <tr><td>Memórias <img border="0" id="max1" src="images/cat-set-esq.gif" width="8" height="8">
		  </td></tr></table>

			<table class="catsekundari" id="ex1">
			<tr><td>
			<a onClick="javascript:window.location='teste.php?cat=35';" class="sechover">Acessórios OverClock para Memórias DDR <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=30';" class="sechover">Memórias DDR <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=33';" class="sechover">Memórias DDR 2 <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=31';" class="sechover">Memórias DDR Especiais <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=34';" class="sechover">Memórias DDR SoDimm Portáteis <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=32';" class="sechover">Memórias Rimm <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=29';" class="sechover">Memórias SDram <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			</td></tr></table>
			
			<table class="catprincipal" onClick="javascript:window.location='teste.php?cat=16';">
			<tr><td>Motherboards <img border="0" src="images/cat-bol.gif" width="8" height="8">
			</td></tr></table>
			
			<table class="catprincipal" onClick="showhidelayer('3');">
			<tr><td>Processadores <img border="0" id="max3" src="images/cat-set-esq.gif" width="8" height="8">
			</td></tr></table>
			
			<table class="catsekundari" id="ex3">
			<tr><td>
			<a onClick="showhidelayerr('4');" class="sechover">AMD <img border="0" id="max4" src="images/cat-set-esq.gif" width="8" height="8"></a><br>

			<table class="catterceira" id="ex4">
			<tr><td>
			<a onClick="javascript:window.location='teste.php?cat=25';" class="sechover">Athlon 64bits <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=22';" class="sechover">Athlon FX <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=23';" class="sechover">Athlon MP <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=21';" class="sechover">Athlon XP <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=27';" class="sechover">Athlon XP Mobile <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=26';" class="sechover">Duron <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=24';" class="sechover">Opteron <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			<a onClick="javascript:window.location='teste.php?cat=28';" class="sechover">Sempron <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			</td></tr></table>
			<a onClick="javascript:window.location='teste.php?cat=19';" class="sechover">Intel <img border="0" src="images/cat-bol.gif" width="8" height="8"><br>
			</td></tr></table>
</body>
</html>

this works as expected in Internet Explorer, but not in Mozilla (normal or FireFox) :\

i've been looking at it and can't think of any reason this happens... could someone please guide me in the right direction?

thanks in advance :)

jamesp0tter,
mr.jamespotter@gmail.com

p.s.: sorry for my (sometimes) bad english :p
 
I can see what's "not working" in Firefox. The problem appears to be improved by using inline instead of block in your style definitions, but that alters the horizontal line I see.

If you could verbally describe how an expanded menu SHOULD appear, it will be easier to solve the problem all together.

--Dave
 
Aha! Ready for this oddity? Just take out the display:block (or :inline if you've already changed it) from the catsecundari and caterceira styles all together!

Now it seems to work!

--Dave
 
thank you very much, i got it solved thanks to you :)

the correct display to use is "table" because (dah!) i'm showing/hiding tables.

Now it works as i want it ^^

Thanks again !

jamesp0tter,
mr.jamespotter@gmail.com

p.s.: sorry for my (sometimes) bad english :p
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top