HTML and JavaScript [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 12 months ago.

Improve this question

Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.

Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.

<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title>HOME</title>  
    <link rel="stylesheet" href="dropdown.css" type="text/css" />  
    <script type="text/javascript" src="dropdown.js"></script>  
    <!-- /* below javascript function is to handle the "Enter" key form submission */ -->  
    <script language="javascript">  
    </script>  
    <script type="text/javascript">  
      function change1(){  
        document.getElementById('id1').style.display='block'  
        document.getElementById('id2').style.display='none'  
        document.getElementById('id3').style.display='block'  
        document.getElementById('id4').style.display='none'  
        document.getElementById('body1').style.display='block'  
        document.getElementById('body2').style.display='none'  
        document.home_page.reg_id.focus();  
      }  
      function change2(){  
        document.getElementById('id1').style.display='none'  
        document.getElementById('id2').style.display='block'  
        document.getElementById('id3').style.display='none'    
        document.getElementById('id4').style.display='block'    
        document.getElementById('body1').style.display='none'    
        document.getElementById('body2').style.display='block'    
        document.home_page.uname.focus();  
      }  
    </script>  
    <!-- end of "enter" key handling functions. -->  
  </head>  


<form method="POST" action="home_page.php" name="home_page">  
  <table width="320" height="200" border="1">  
    <tr style="width:315px;" align="center">  
    <td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>  
    <td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>  
    <td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>  
    <td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>  
    </tr>  
    <tr>  
    <td colspan="2" id="body1">  
    <table width="318" height="44" border="0">  
    <tr>  
    <td width="318" height="40" align="center">  
    <span class="loginstyle3">Registration Status</span>  
    </td>  
    </tr>  
    </table></td>  
    <td colspan="2" id="body2" style="display:none;">  
    <table width="318" height="45" border="0">  
    <tr>  
    <td width="107" height="41" align="center" background="images/glossy1grey.gif">  
    <span class="loginstyle3">Login Entry </span>  
    </td>  
    </tr>  
    </table>  
    </td>  
    </tr>  
  </table>  
<!-- below block of code is to set login page after login attempt and failed -->  
<script type="text/javascript">change2()</script>  
</form>  
</body>  
</html>

I fixed your formatting...but where's your opening <body> tag? — Nick Craver
– Nick Craver, Commented Jun 30, 2010 at 14:17
What is the problem exactly? Have you tried using Firebug? ( getfirebug.com ) — Jean Hominal
– Jean Hominal, Commented Jun 30, 2010 at 14:19
I'm not sure, but I think you divided by zero somewhere... oh sh-- Seriously, what's the problem? Where's the question? — Matteo Mosca
– Matteo Mosca, Commented Jun 30, 2010 at 14:20
What the hell is document.home_page.uname.focus(); ?? Btw you should learn proper xHTML and CSS, your page looks like a 1997 website ;) — Michael Lumbroso
– Michael Lumbroso, Commented Jun 30, 2010 at 14:24

Pointy · Accepted Answer · 2010-06-30 15:18:07Z

2

I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".

Try using "display: table-cell" instead of "block".

edit — I've tried this and it's definitely what the problem is.

edited Jun 30, 2010 at 15:18

answered Jun 30, 2010 at 14:51

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anup Prakash Over a year ago

Great! Thanx a lot. Superb answer. Solve all my problem. But ready to get some more question. YOu would must have to attend that. Thanx again. :-)

Redlab · Accepted Answer · 2010-06-30 14:28:54Z

1

Your problem in FF

document.home_page.uname is undefined
Line 27

answered Jun 30, 2010 at 14:28

Redlab

3,10322 silver badges18 bronze badges

3 Comments

Redlab Over a year ago

actually, IE 8 gives the same problem :D

Anup Prakash Over a year ago

@Nick Craver: Sorry! I missed the body tag. but it is present in my html file. @Salil and @Jhominal: My problem is in mozilla is that. Its formatting is not like i want to see(Which is visible in Internet Explorer8). It is going totally out of controll. The size of colored tab become full strenth in Mozilla, while in IE8, it is ok. @Michael Lumbroso: Yes, i missed the uname(uname.text). I used that in my project. Becoz of space of complexity, i removed it. It will just throw an javascript error. Just remove that line. @all:Just copy and paste all the code and then try that with mozilla & IE8

Pointy Over a year ago

Your problem, @Anup Prakash, is with your script that's setting table cell elements to be "display: block". You are explicitly telling the browser not to display those like table cells.

dumbass · Accepted Answer · 2024-12-05 11:04:06Z

-1

The problems you have are

your <TD> is inheriting the height=200 from the <TABLE>
your <TD> has display: block which forces it onto a new line

Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!

edited Dec 5, 2024 at 11:04

dumbass

27.1k4 gold badges42 silver badges77 bronze badges

answered Jul 5, 2010 at 13:27

Gareth Midwood

293 bronze badges

Comments

FK82 · Accepted Answer · 2010-06-30 21:22:51Z

-2

The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>HOME</title>  
<link rel="stylesheet" href="dropdown.css" type="text/css" >

instead.

IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.

answered Jun 30, 2010 at 21:22

FK82

5,0754 gold badges34 silver badges44 bronze badges

2 Comments

ceejayoz Over a year ago

Closed LINK and META tags are entirely valid in normal HTML. You just don't have to do it.

FK82 Over a year ago

@ ceejayoz: read more closely. I said Firefox does not like it. It's a fact, try it.

Collectives™ on Stack Overflow

HTML and JavaScript [closed]

4 Answers 4

1 Comment

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

2 Comments

Linked

Related