By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,045 Members | 765 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,045 IT Pros & Developers. It's quick & easy.

div distortion in IE and Firefox

100+
P: 121
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
Expand|Select|Wrap|Line Numbers
  1. #menu {
  2.     MARGIN-TOP: 0px; 
  3.     Z-INDEX: 100; 
  4.     WIDTH: 120px; 
  5.     MARGIN-RIGHT: 0px; 
  6.     FONT-FAMILY: Arial,Verdana,  Helvetica, sans-serif; 
  7.     POSITION: relative
  8. }
  9. #menu UL {
  10.     BORDER-RIGHT: #4D42D8 0px solid; 
  11.     PADDING-RIGHT: 0px; 
  12.     BORDER-TOP: #4D42D8 0px solid; 
  13.     PADDING-BOTTOM:0px; 
  14.     MARGIN: 0px 0px 0px 0px; 
  15.     BORDER-LEFT: #4D42D8 0px solid; 
  16.     PADDING-TOP: 0px; 
  17.     BORDER-BOTTOM: #4D42D8 0px solid; 
  18.     LIST-STYLE-TYPE: none
  19. }
  20. #menu UL LI UL {
  21.     LEFT: 110px; 
  22.     VISIBILITY: hidden; 
  23.     OVERFLOW: hidden; 
  24.     WIDTH: 116px; 
  25.     POSITION: absolute; 
  26.     TOP: 0px; 
  27.     HEIGHT: 0px
  28. }
  29. #menu .admissions UL {
  30.     MARGIN-TOP: 0px; 
  31.     VISIBILITY: hidden; 
  32.     OVERFLOW: hidden; 
  33.     POSITION: absolute; 
  34.     TOP: 0px; 
  35.     HEIGHT: 0px
  36. }
  37. #menu .RD UL {
  38.     MARGIN-TOP:  0px; 
  39.     VISIBILITY: hidden; 
  40.     OVERFLOW: hidden; 
  41.     POSITION: absolute; 
  42.     TOP: 0px; 
  43.     HEIGHT: 0px
  44. }
  45. #menu .students UL {
  46.     MARGIN-TOP: 0px; 
  47.     VISIBILITY: hidden; 
  48.     OVERFLOW: hidden; 
  49.     POSITION: absolute; 
  50.     TOP: 0px; 
  51.     HEIGHT: 0px
  52. }
  53. #menu .about UL {
  54.     MARGIN-TOP: 0px; 
  55.     VISIBILITY: hidden; 
  56.     OVERFLOW: hidden; 
  57.     POSITION: absolute; 
  58.     TOP: 0px; 
  59.     HEIGHT: 0px
  60. }
  61. #menu UL LI UL {
  62.     FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=95); moz-opacity: 0.95; opacity: 0.95
  63. }
  64. #menu UL LI {
  65.     FLOAT: left; 
  66.     POSITION: relative; 
  67.     height: 0px;
  68. }
  69. #menu UL LI A {
  70.     DISPLAY: block; 
  71.     PADDING-LEFT: 10px; 
  72.     FONT-WEIGHT: bold; 
  73.     FONT-SIZE: 10px; 
  74.     BACKGROUND: none transparent scroll repeat 0% 0%; 
  75.     FLOAT: left; 
  76.     WIDTH: 106px; 
  77.     COLOR: #100E5F; 
  78.     LINE-HEIGHT:15px; 
  79.     PADDING-TOP: 5px; 
  80.     HEIGHT: 21px; 
  81.     TEXT-DECORATION: none;
  82. }
  83. #menu UL LI A:visited {
  84.     DISPLAY: block; 
  85.     PADDING-LEFT: 10px; 
  86.     FONT-WEIGHT: bold; 
  87.     FONT-SIZE: 10px; 
  88.     BACKGROUND: none transparent scroll repeat 0% 0%; 
  89.     FLOAT: left; 
  90.     WIDTH: 106px; 
  91.     COLOR: #100E5F; 
  92.     LINE-HEIGHT:15px; 
  93.     PADDING-TOP: 5px; 
  94.     HEIGHT:21px; 
  95.     TEXT-DECORATION: none
  96. }
  97.  HTML #menu UL LI A {
  98.     WIDTH: 120px
  99. }
  100.  HTML #menu UL LI A:visited {
  101.     WIDTH: 120px
  102. }
  103. #menu TABLE {
  104.     BORDER-TOP-WIDTH: 0px; 
  105.     PADDING-RIGHT: 0px; 
  106.     PADDING-LEFT: 0px; 
  107.     BORDER-LEFT-WIDTH: 0px; 
  108.     BORDER-BOTTOM-WIDTH: 0px; 
  109.     PADDING-BOTTOM: 0px; 
  110.     MARGIN: -1px; 
  111.     PADDING-TOP: 0px; 
  112.     BORDER-COLLAPSE: collapse; 
  113.     BORDER-RIGHT-WIDTH: 0px
  114. }
  115. #menu UL LI:hover A {
  116.     BACKGROUND: #6A8ED2; COLOR: #fff;
  117. }
  118.  
  119. #menu UL LI A:hover {
  120.     BACKGROUND: #6A8ED2; COLOR: #fff;
  121. }
  122. #menu UL LI:hover UL {
  123.     BORDER-RIGHT: #B2B5B6 1px solid;
  124.      BORDER-TOP: #B2B5B6 1px solid; 
  125.      PADDING-LEFT: 0px;  
  126.      VISIBILITY: visible; 
  127.      OVERFLOW: visible; 
  128.      BORDER-LEFT: #B2B5B6 1px solid;
  129.       WIDTH: 100px; 
  130.       BORDER-BOTTOM: #B2B5B6 1px solid; 
  131.       POSITION: absolute; 
  132.       HEIGHT: auto
  133. }
  134. #menu UL LI A:hover UL {
  135.     BORDER-RIGHT: #B2B5B6 1px solid; 
  136.     BORDER-TOP: #B2B5B6 1px solid; 
  137.     PADDING-LEFT: 0px; 
  138.     BACKGROUND: #ECF6FA; 
  139.     VISIBILITY: visible; 
  140.     OVERFLOW: visible; 
  141.     BORDER-LEFT: #B2B5B6 1px solid; 
  142.     WIDTH: 100px; 
  143.     BORDER-BOTTOM: #B2B5B6 1px solid; 
  144.     POSITION: absolute; 
  145.     HEIGHT: auto
  146. }
  147. #menu UL LI:hover UL LI A {
  148.     PADDING-RIGHT: 0px; 
  149.     DISPLAY: block; 
  150.     PADDING-LEFT: 20px; 
  151.     BACKGROUND: none transparent scroll repeat 0% 0%; 
  152.     PADDING-BOTTOM: 5px; 
  153.     MARGIN-LEFT: 0px; 
  154.     COLOR: #4D42D8; 
  155.     LINE-HEIGHT: 14px; 
  156.     PADDING-TOP: 4px; 
  157.     HEIGHT: auto; 
  158.     TEXT-DECORATION: none;
  159.     BORDER-BOTTOM: 1px SOLID #d3d5d6;
  160. }
  161. #menu UL LI A:hover UL LI A {
  162.     PADDING-RIGHT: 0px; 
  163.     DISPLAY: block; 
  164.     PADDING-LEFT: 20px; 
  165.     BACKGROUND: none transparent scroll repeat 0% 0%; 
  166.     PADDING-BOTTOM: 5px; 
  167.     MARGIN-LEFT: 0px; 
  168.     COLOR: #4D42D8; 
  169.     LINE-HEIGHT: 14px; 
  170.     PADDING-TOP: 4px; 
  171.     HEIGHT: auto; 
  172.     TEXT-DECORATION: none;
  173.     BORDER-BOTTOM: 1px SOLID #d3d5d6;
  174. }
  175. #menu UL LI:hover UL LI:hover A {
  176.     BACKGROUND: #6A8ED2; COLOR: #FF0;
  177. }
  178. #menu UL LI A:hover UL LI A:hover {
  179.     BACKGROUND: #6A8ED2; COLOR: #FF0;
  180. }
  181. #nav_table {
  182.     HEIGHT: 221px; BACKGROUND-COLOR: #CDD1DF;
  183. }
  184. #nav_table .nav_td {
  185.     BACKGROUND-IMAGE:  WIDTH: 160px; 
  186. }
  187.  
Expand|Select|Wrap|Line Numbers
  1.  
  2. <body>
  3. <DIV id="main">
  4. <div id="headerh1"></div>
  5. <div id="headerh2">
  6.     <div id="buttona"></div>
  7.     <ul id="hmenulist">
  8.         <li><a title="Link: Home" href="index.html">Home</a></li>
  9.         <li><a title="Link: aboutus" href="trialdiv11a.html">About Us</a></li>
  10.         <li><a title="Link: Services" href="contactus.html">Contact Us</a></li>
  11.         <li><a title="Link: sevices" href="help.html">F A Q</a></li>
  12.  
  13.                     </ul>
  14. </div>
  15.     <div id="header2part">
  16.  
  17.     <div id="header2parta" align=left>
  18.         <form  id='search' name='searchFrm'  action='' method='get'  border="1  solid #000;">                     <input type="text" name="user" >
  19.         </div>
  20.  
  21.     <div id="header2partb">
  22.  
  23.         <input type="image" src="images/next.gif"  name="Search" alt="search" /></form>
  24.     </div>
  25. </div>
  26. <div id="headerh3"></div>
  27.  
  28.  
  29. <div id="lsnav">
  30. <TABLE id=nav_table cellSpacing=0 cellPadding=0 width=120 align=center 
  31.   border=0><TBODY>
  32.   <TR>
  33.     <TD class=nav_td>
  34.       <DIV id=menu>
  35.       <UL>
  36.         <LI class=about><A href="doctors.html">Doctors/Consultants<!--[if IE 7]><!--></a><!--<![endif]--> 
  37.         <TABLE>
  38.           <TBODY>
  39.           <TR>
  40.             <TD>
  41.               <UL>
  42.                 <LI><A href="">IITs Act - 
  43.                 1961</A> </LI>
  44.                 <LI><A href="">About 
  45.                 IIT Bombay</A> </LI>
  46.                 <LI><A href="">Location 
  47.                 &amp; Map</A> </LI>
  48.                 <LI><A 
  49.                 href="">International 
  50.                 Relations</A> </LI>
  51.                 <LI><A 
  52.                 href=""><STRONG>Campus 
  53.                 Diary</A> </LI>
  54.                 <LI><A 
  55.                 href=""><STRONG>Other 
  56.                 Related Links</A>
  57.                 <DIV></DIV></LI>
  58.                 <LI><A 
  59.                 href="">Contact 
  60.                 Us</A> </LI></UL></STRONG></STRONG></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  61.         <LI class=admissions><A href="hospitals.html">Hospitals<!--[if IE 7]><!--></a><!--<![endif]--> 
  62.  
  63.         <TABLE>
  64.           <TBODY>
  65.           <TR>
  66.             <TD>
  67.               <UL>
  68.                 <LI><A href="">Entrance 
  69.                 Examinations</A> </LI>
  70.                 <LI><A 
  71.                 href="">Undergraduate</A> </LI>
  72.                 <LI><A href="">Postgraduate</A> 
  73.                 </LI>
  74.                 <LI><A href="">Ph.D. 
  75.                 Programs</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  76.         <LI class=academics><A href="diagnosticlabs.html">Diagnostic Centers<!--[if IE 7]><!--></a><!--<![endif]--> 
  77.  
  78.         <TABLE>
  79.           <TBODY>
  80.           <TR>
  81.             <TD>
  82.               <UL>
  83.                 <LI><A href="">Homepage</A> 
  84.                 </LI>
  85.                 <LI><A href="">Academic 
  86.                 Calender</A> </LI>
  87.                 <LI><A 
  88.                 href="">Departments</A> 
  89.                 </LI>
  90.                 <LI><A href="">Centres</A> 
  91.                 </LI>
  92.                 <LI><A href="">Schools / 
  93.                 IDPs</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  94.         <LI class=RD><A href="pharmacies.html">Pharmacies<!--[if IE 7]><!--></a><!--<![endif]--> 
  95.  
  96.         <TABLE>
  97.           <TBODY>
  98.           <TR>
  99.             <TD>
  100.               <UL>
  101.                 <LI><A href="">Homepage</A> </LI>
  102.                 <LI><A href="">Research 
  103.                 Resources</A> </LI>
  104.                 <LI><A href="">Projects &amp; 
  105.                 Activities</A> </LI>
  106.                 <LI><A href="">Help for New 
  107.                 Client</A> </LI>
  108.                 <LI><A href="">Research 
  109.                 Fellowship</A> </LI>
  110.                 <LI><A href="">R&amp;D Jobs</A> 
  111.                 </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  112.         <LI class=outreach><A href="">Emergency<!--[if IE 7]><!--></a><!--<![endif]--> 
  113.  
  114.         <TABLE>
  115.           <TBODY>
  116.           <TR>
  117.             <TD>
  118.               <UL>
  119.                 <LI><A href="">Continuing 
  120.                 Education</A> </LI>
  121.                 <LI><A href="">Quality 
  122.                 Improvement</A> </LI>
  123.                 <LI><A href="">Distance Education</A> 
  124.                 </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  125.         <LI class=eship><A href="">Financing<!--[if IE 7]><!--></a><!--<![endif]--> 
  126.  
  127.         <TABLE>
  128.           <TBODY>
  129.           <TR>
  130.             <TD>
  131.               <UL>
  132.                 <LI><A href="">SINE</A> </LI>
  133.                 <LI><A href="">E-Cell</A> 
  134.           </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  135.         <LI class=students><A href="">Insurance<!--[if IE 7]><!--></a><!--<![endif]--> 
  136.  
  137.         <TABLE>
  138.           <TBODY>
  139.           <TR>
  140.             <TD>
  141.               <UL>
  142.                 <LI><A 
  143.                 href="">Hostels</A> 
  144.                 </LI>
  145.                 <LI><A 
  146.                 href="">Events</A> </LI>
  147.                 <LI><A 
  148.                 href="">Organisations</A> 
  149.                 </LI>
  150.                 <LI><A 
  151.                 href=""><I>Unnati</I></A> 
  152. </LI>
  153.                 <LI><A href=""><I>Gymkhana</I></A> 
  154.                 </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  155.         <LI class=alumni><A href="">Patient</A> </LI>
  156.  
  157. <LI><A href=""><I>Other Services</I></A> 
  158.                 </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
  159.         </UL></DIV></TD>
  160.     </TR></TBODY></TABLE>
  161.  
  162.  
  163.  
  164. </div>
  165.  
Nov 14 '07 #1
Share this Question
Share on Google+
4 Replies

drhowarddrfine
Expert 5K+
P: 7,435
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?
Nov 14 '07 #2

ak1dnar
Expert 100+
P: 1,584
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
Nov 14 '07 #3

pbmods
Expert 5K+
P: 5,821
It's from an entity that was apparently properly-escaped... except that it was unescaped by the time the CODE parser was compiling it.
Nov 15 '07 #4

Atli
Expert 5K+
P: 5,058
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...).
Nov 16 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.