div distortion in IE and Firefox

[sbettadpur]

hello,

i have created one website using div i.e total layout is designed using div only.
if i saw that pages in Internet Explorer vesion 6, its showing very fine,
but if i open same pages in Mozila firefox the entire layout get changed.
i.e the width and height of boxes get increased. what is the problem? how to overcome from this issue. how to get identical displays on both browsers?

the dynamic drop down menus are working very fine in IE(6.0) where as in Firefox
all elements are getting merged. so, what is the problem
any one knows solutions for this reply me

thank u

below i am sending the source code

#menu {
    MARGIN-TOP: 0px; 
    Z-INDEX: 100; 
    WIDTH: 120px; 
    MARGIN-RIGHT: 0px; 
    FONT-FAMILY: Arial,Verdana,  Helvetica, sans-serif; 
    POSITION: relative
}
#menu UL {
    BORDER-RIGHT: #4D42D8 0px solid; 
    PADDING-RIGHT: 0px; 
    BORDER-TOP: #4D42D8 0px solid; 
    PADDING-BOTTOM:0px; 
    MARGIN: 0px 0px 0px 0px; 
    BORDER-LEFT: #4D42D8 0px solid; 
    PADDING-TOP: 0px; 
    BORDER-BOTTOM: #4D42D8 0px solid; 
    LIST-STYLE-TYPE: none
}
#menu UL LI UL {
    LEFT: 110px; 
    VISIBILITY: hidden; 
    OVERFLOW: hidden; 
    WIDTH: 116px; 
    POSITION: absolute; 
    TOP: 0px; 
    HEIGHT: 0px
}
#menu .admissions UL {
    MARGIN-TOP: 0px; 
    VISIBILITY: hidden; 
    OVERFLOW: hidden; 
    POSITION: absolute; 
    TOP: 0px; 
    HEIGHT: 0px
}
#menu .RD UL {
    MARGIN-TOP:  0px; 
    VISIBILITY: hidden; 
    OVERFLOW: hidden; 
    POSITION: absolute; 
    TOP: 0px; 
    HEIGHT: 0px
}
#menu .students UL {
    MARGIN-TOP: 0px; 
    VISIBILITY: hidden; 
    OVERFLOW: hidden; 
    POSITION: absolute; 
    TOP: 0px; 
    HEIGHT: 0px
}
#menu .about UL {
    MARGIN-TOP: 0px; 
    VISIBILITY: hidden; 
    OVERFLOW: hidden; 
    POSITION: absolute; 
    TOP: 0px; 
    HEIGHT: 0px
}
#menu UL LI UL {
    FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=95); moz-opacity: 0.95; opacity: 0.95
}
#menu UL LI {
    FLOAT: left; 
    POSITION: relative; 
    height: 0px;
}
#menu UL LI A {
    DISPLAY: block; 
    PADDING-LEFT: 10px; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 10px; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    FLOAT: left; 
    WIDTH: 106px; 
    COLOR: #100E5F; 
    LINE-HEIGHT:15px; 
    PADDING-TOP: 5px; 
    HEIGHT: 21px; 
    TEXT-DECORATION: none;
}
#menu UL LI A:visited {
    DISPLAY: block; 
    PADDING-LEFT: 10px; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 10px; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    FLOAT: left; 
    WIDTH: 106px; 
    COLOR: #100E5F; 
    LINE-HEIGHT:15px; 
    PADDING-TOP: 5px; 
    HEIGHT:21px; 
    TEXT-DECORATION: none
}
 HTML #menu UL LI A {
    WIDTH: 120px
}
 HTML #menu UL LI A:visited {
    WIDTH: 120px
}
#menu TABLE {
    BORDER-TOP-WIDTH: 0px; 
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    BORDER-LEFT-WIDTH: 0px; 
    BORDER-BOTTOM-WIDTH: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: -1px; 
    PADDING-TOP: 0px; 
    BORDER-COLLAPSE: collapse; 
    BORDER-RIGHT-WIDTH: 0px
}
#menu UL LI:hover A {
    BACKGROUND: #6A8ED2; COLOR: #fff;
}
 
#menu UL LI A:hover {
    BACKGROUND: #6A8ED2; COLOR: #fff;
}
#menu UL LI:hover UL {
    BORDER-RIGHT: #B2B5B6 1px solid;
     BORDER-TOP: #B2B5B6 1px solid; 
     PADDING-LEFT: 0px;  
     VISIBILITY: visible; 
     OVERFLOW: visible; 
     BORDER-LEFT: #B2B5B6 1px solid;
      WIDTH: 100px; 
      BORDER-BOTTOM: #B2B5B6 1px solid; 
      POSITION: absolute; 
      HEIGHT: auto
}
#menu UL LI A:hover UL {
    BORDER-RIGHT: #B2B5B6 1px solid; 
    BORDER-TOP: #B2B5B6 1px solid; 
    PADDING-LEFT: 0px; 
    BACKGROUND: #ECF6FA; 
    VISIBILITY: visible; 
    OVERFLOW: visible; 
    BORDER-LEFT: #B2B5B6 1px solid; 
    WIDTH: 100px; 
    BORDER-BOTTOM: #B2B5B6 1px solid; 
    POSITION: absolute; 
    HEIGHT: auto
}
#menu UL LI:hover UL LI A {
    PADDING-RIGHT: 0px; 
    DISPLAY: block; 
    PADDING-LEFT: 20px; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    PADDING-BOTTOM: 5px; 
    MARGIN-LEFT: 0px; 
    COLOR: #4D42D8; 
    LINE-HEIGHT: 14px; 
    PADDING-TOP: 4px; 
    HEIGHT: auto; 
    TEXT-DECORATION: none;
    BORDER-BOTTOM: 1px SOLID #d3d5d6;
}
#menu UL LI A:hover UL LI A {
    PADDING-RIGHT: 0px; 
    DISPLAY: block; 
    PADDING-LEFT: 20px; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    PADDING-BOTTOM: 5px; 
    MARGIN-LEFT: 0px; 
    COLOR: #4D42D8; 
    LINE-HEIGHT: 14px; 
    PADDING-TOP: 4px; 
    HEIGHT: auto; 
    TEXT-DECORATION: none;
    BORDER-BOTTOM: 1px SOLID #d3d5d6;
}
#menu UL LI:hover UL LI:hover A {
    BACKGROUND: #6A8ED2; COLOR: #FF0;
}
#menu UL LI A:hover UL LI A:hover {
    BACKGROUND: #6A8ED2; COLOR: #FF0;
}
#nav_table {
    HEIGHT: 221px; BACKGROUND-COLOR: #CDD1DF;
}
#nav_table .nav_td {
    BACKGROUND-IMAGE:  WIDTH: 160px; 
}
 

 
<body>
<DIV id="main">
<div id="headerh1"></div>
<div id="headerh2">
    <div id="buttona"></div>
    <ul id="hmenulist">
        <li><a title="Link: Home" href="index.html">Home</a></li>
        <li><a title="Link: aboutus" href="trialdiv11a.html">About Us</a></li>
        <li><a title="Link: Services" href="contactus.html">Contact Us</a></li>
        <li><a title="Link: sevices" href="help.html">F A Q</a></li>
 
                    </ul>
</div>
    <div id="header2part">
 
    <div id="header2parta" align=left>
        <form  id='search' name='searchFrm'  action='' method='get'  border="1  solid #000;">                     <input type="text" name="user" >
        </div>
 
    <div id="header2partb">
 
        <input type="image" src="images/next.gif"  name="Search" alt="search" /></form>
    </div>
</div>
<div id="headerh3"></div>
 
 
<div id="lsnav">
<TABLE id=nav_table cellSpacing=0 cellPadding=0 width=120 align=center 
  border=0><TBODY>
  <TR>
    <TD class=nav_td>
      <DIV id=menu>
      <UL>
        <LI class=about><A href="doctors.html">Doctors/Consultants<!--[if IE 7]><!--></a><!--<![endif]--> 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">IITs Act - 
                1961</A> </LI>
                <LI><A href="">About 
                IIT Bombay</A> </LI>
                <LI><A href="">Location 
                &amp; Map</A> </LI>
                <LI><A 
                href="">International 
                Relations</A> </LI>
                <LI><A 
                href=""><STRONG>Campus 
                Diary</A> </LI>
                <LI><A 
                href=""><STRONG>Other 
                Related Links</A>
                <DIV></DIV></LI>
                <LI><A 
                href="">Contact 
                Us</A> </LI></UL></STRONG></STRONG></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=admissions><A href="hospitals.html">Hospitals<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">Entrance 
                Examinations</A> </LI>
                <LI><A 
                href="">Undergraduate</A> </LI>
                <LI><A href="">Postgraduate</A> 
                </LI>
                <LI><A href="">Ph.D. 
                Programs</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=academics><A href="diagnosticlabs.html">Diagnostic Centers<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">Homepage</A> 
                </LI>
                <LI><A href="">Academic 
                Calender</A> </LI>
                <LI><A 
                href="">Departments</A> 
                </LI>
                <LI><A href="">Centres</A> 
                </LI>
                <LI><A href="">Schools / 
                IDPs</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=RD><A href="pharmacies.html">Pharmacies<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">Homepage</A> </LI>
                <LI><A href="">Research 
                Resources</A> </LI>
                <LI><A href="">Projects &amp; 
                Activities</A> </LI>
                <LI><A href="">Help for New 
                Client</A> </LI>
                <LI><A href="">Research 
                Fellowship</A> </LI>
                <LI><A href="">R&amp;D Jobs</A> 
                </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=outreach><A href="">Emergency<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">Continuing 
                Education</A> </LI>
                <LI><A href="">Quality 
                Improvement</A> </LI>
                <LI><A href="">Distance Education</A> 
                </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=eship><A href="">Financing<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A href="">SINE</A> </LI>
                <LI><A href="">E-Cell</A> 
          </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=students><A href="">Insurance<!--[if IE 7]><!--></a><!--<![endif]--> 
 
        <TABLE>
          <TBODY>
          <TR>
            <TD>
              <UL>
                <LI><A 
                href="">Hostels</A> 
                </LI>
                <LI><A 
                href="">Events</A> </LI>
                <LI><A 
                href="">Organisations</A> 
                </LI>
                <LI><A 
                href=""><I>Unnati</I></A> 
</LI>
                <LI><A href=""><I>Gymkhana</I></A> 
                </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        <LI class=alumni><A href="">Patient</A> </LI>
 
<LI><A href=""><I>Other Services</I></A> 
                </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
        </UL></DIV></TD>
    </TR></TBODY></TABLE>
 
 
 
</div>
 

[drhowarddrfine]

Please use code tags.
This post belongs in the html/css forum.

If your markup looks right in IE but not Firefox then there is something wrong with the markup. Never use IE as a reference for how things should work because all versions of IE are old, buggy and non-standard.

If what you show is the complete markup, you are missing a doctype which will throw IE into 'quirks mode'. Did you validate this to make sure it is all correct?

[ak1dnar]

I don't know the reason for that gorgeous "color" in the HTML code snippet(after fixing [code=html] tags). Anyway this is not belongs to php forum, So I'll move it there to Doc's region. :D

[pbmods]

It's from an entity that was apparently properly-escaped... except that it was unescaped by the time the CODE parser was compiling it.

[Atli]

Hi.

If IE and Firefox and etc.. just won't play nicely together, you could always consider creating separate CSS files for each of them.

In most cases, you will only need to create one for IE, and one not for IE (FF, Opera, Netscape, etc...).