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
[code=css]
#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:DXImageT ransform.Micros oft.Alpha(opaci ty=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;
}
[/code]
[code=html]

<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.htm l">Home</a></li>
<li><a title="Link: aboutus" href="trialdiv1 1a.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="header2part a" align=left>
<form id='search' name='searchFrm ' action='' method='get' border="1 solid #000;"> <input type="text" name="user" >
</div>

<div id="header2part b">

<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.h tml">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="">Locatio n
&#38;amp; Map</A> </LI>
<LI><A
href="">Interna tional
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=admission s><A href="hospitals .html">Hospital s<!--[if IE 7]><!--></a><!--<![endif]-->

<TABLE>
<TBODY>
<TR>
<TD>
<UL>
<LI><A href="">Entranc e
Examinations</A> </LI>
<LI><A
href="">Undergr aduate</A> </LI>
<LI><A href="">Postgra duate</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="diagnosti clabs.html">Dia gnostic Centers<!--[if IE 7]><!--></a><!--<![endif]-->

<TABLE>
<TBODY>
<TR>
<TD>
<UL>
<LI><A href="">Homepag e</A>
</LI>
<LI><A href="">Academi c
Calender</A> </LI>
<LI><A
href="">Departm ents</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="pharmacie s.html">Pharmac ies<!--[if IE 7]><!--></a><!--<![endif]-->

<TABLE>
<TBODY>
<TR>
<TD>
<UL>
<LI><A href="">Homepag e</A> </LI>
<LI><A href="">Researc h
Resources</A> </LI>
<LI><A href="">Project s &#38;amp;
Activities</A> </LI>
<LI><A href="">Help for New
Client</A> </LI>
<LI><A href="">Researc h
Fellowship</A> </LI>
<LI><A href="">R&#38;a mp;D Jobs</A>
</LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
<LI class=outreach> <A href="">Emergen cy<!--[if IE 7]><!--></a><!--<![endif]-->

<TABLE>
<TBODY>
<TR>
<TD>
<UL>
<LI><A href="">Continu ing
Education</A> </LI>
<LI><A href="">Quality
Improvement</A> </LI>
<LI><A href="">Distanc e Education</A>
</LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
<LI class=eship><A href="">Financi ng<!--[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="">Insuran ce<!--[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="">Organis ations</A>
</LI>
<LI><A
href=""><I>Unna ti</I></A>
</LI>
<LI><A href=""><I>Gymk hana</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>Othe r Services</I></A>
</LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
</UL></DIV></TD>
</TR></TBODY></TABLE>



</div>
[/code]

[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...).