HTML and CSS RSS HTML and CSS RSS

IE vs FF

Reply

•
•
Join Date: Jan 2009
Posts: 3
Reputation: jtucker33 is an unknown quantity at this point 
Solved Threads: 0
jtucker33 jtucker33 is offline Offline
Newbie Poster

IE vs FF

 
0
  #1
Jan 23rd, 2009
I have created a drop-down menu using Dreamweaver and have edited the display using the css file that Dreamweaver created. On IE there is a border around the entire sub menus, but in FF in only appears around the left half. I added in border-right, border-top, border-bottom, etc. to try and fix the problem, but nothing is helping.

Does anyone have any suggestions?!?!?!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 686
Reputation: sillyboy is on a distinguished road 
Solved Threads: 61
sillyboy's Avatar
sillyboy sillyboy is offline Offline
Practically a Master Poster

Re: IE vs FF

 
0
  #2
Jan 24th, 2009
It really depends on the element as well as elements around it. Can you post the code or at least some of it so somebody can try debug it?
http://www.happypolla.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 3
Reputation: jtucker33 is an unknown quantity at this point 
Solved Threads: 0
jtucker33 jtucker33 is offline Offline
Newbie Poster

Re: IE vs FF

 
0
  #3
Jan 24th, 2009
The site is posted on a temporary url --> http://www.whitmerstuco.com (just for viewing purposes)

Here is the css codinng - I did the drop-down in Dreamweaver and edited the coding that it created:

css Syntax (Toggle Plain Text) 
  1. @charset "UTF-8";
  2.  
  3. /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /*******************************************************************************
  8.  
  9.  LAYOUT INFORMATION: describes box model, positioning, z-order
  10.  
  11.  *******************************************************************************/
  12.  
  13. /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
  14. ul.MenuBarHorizontal
  15. {
  16. 	margin: 0;
  17. 	padding: 0;
  18. 	list-style-type: none;
  19. 	font-size: 100%;
  20. 	cursor: default;
  21. 	width: auto;
  22.  
  23. }
  24. /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
  25. ul.MenuBarActive
  26. {
  27. 	z-index: 1000;
  28. }
  29. /* Menu item containers, position children relative to this container and are a fixed width */
  30. ul.MenuBarHorizontal li
  31. {
  32. 	margin: 0;
  33. 	padding: 0;
  34. 	list-style-type: none;
  35. 	font-size: 100%;
  36. 	position: relative;
  37. 	text-align: left;
  38. 	cursor: pointer;
  39. 	float: left;
  40. }
  41. /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
  42. ul.MenuBarHorizontal ul
  43. {
  44. 	margin: 0;
  45. 	padding: 0;
  46. 	list-style-type: none;
  47. 	font-size: 100%;
  48. 	z-index: 1020;
  49. 	cursor: default;
  50. 	width: auto;
  51. 	position: absolute;
  52. 	left: -1000em;
  53. 	background-color: #6f9640;
  54. }
  55. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
  56. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
  57. {
  58. 	left: auto;
  59. 	width: 100px;
  60. 	border: 10px;
  61. 	border-color: #6f9640;
  62.  
  63.  
  64. }
  65. /* Menu item containers are same fixed width as parent */
  66. ul.MenuBarHorizontal ul li
  67. {
  68. 	width: 145px;
  69. 	padding:  0.05em;
  70. 	background-color: white;
  71. 	border-color: #6f9640;
  72. 	border: 10px #6f9640;
  73.  
  74. }
  75. /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
  76. ul.MenuBarHorizontal ul ul
  77. {
  78. 	position: absolute;
  79. 	margin: 0% 0 0 100%;
  80.  
  81. }
  82. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
  83. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
  84. {
  85. 	left: 0px;
  86. 	top: 4px;
  87. 	background-color: #6f9640;
  88.  
  89. }
  90.  
  91. /*******************************************************************************
  92.  
  93.  DESIGN INFORMATION: describes color scheme, borders, fonts
  94.  
  95.  *******************************************************************************/
  96.  
  97. /* Submenu containers have borders on all sides */
  98. ul.MenuBarHorizontal ul
  99. {
  100.  
  101. 	padding: 0.05em 0.05em;
  102. 	border: 10px #6f9640;
  103.  
  104. }
  105. /* Menu items are a light gray block with padding and no text decoration */
  106. ul.MenuBarHorizontal a
  107. {
  108. 	display: block;
  109. 	cursor: pointer;
  110. 	background-color: #ebebeb;
  111. 	padding: 0.75em 1.915em;
  112. 	color: #6f9640;
  113. 	text-decoration: none;
  114. 	border: 10px #6f9640;
  115.  
  116.  
  117. }
  118. /* Menu items that have mouse over or focus have a blue background and white text */
  119. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  120. {
  121. 	background-color: #6f9640;
  122. 	color: #ebebeb;
  123. 	border: 10px #6f9640;
  124.  
  125. }
  126.  
  127.  
  128.  
  129.  
  130.  
  131. /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
  132. ul.MenuBarHorizontal a.MenuBarItemHover
  133. {
  134. 	background-color: #6f9640;
  135. 	color: #ebebeb;
  136. 	border: 10px #6f9640;
  137. }
  138.  
  139. ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  140. {
  141. 	background-color: #6f9640;
  142. 	color: #ebebeb;
  143. 	border: 10px #6f9640;
  144.  
  145. }
  146.  
  147. /*******************************************************************************
  148.  
  149.  SUBMENU INDICATION: styles if there is a submenu under a given menu item
  150.  
  151.  *******************************************************************************/
  152.  
  153.  
  154.  
  155. /*******************************************************************************
  156.  
  157.  BROWSER HACKS: the hacks below should not be changed unless you are an expert
  158.  
  159.  *******************************************************************************/
  160.  
  161. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  162. ul.MenuBarHorizontal iframe
  163. {
  164. 	position: absolute;
  165. 	z-index: 500;
  166. }
  167. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  168. @media screen, projection
  169. {
  170. 	ul.MenuBarHorizontal li.MenuBarItemIE
  171. 	{
  172. 		display: inline;
  173. 		float: left;
  174. 		background: #FFF;
  175. 	}
  176. }
Last edited by peter_budo; Jan 27th, 2009 at 7:44 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,335
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: IE vs FF

 
0
  #4
Jan 24th, 2009
IE puts the border inside the measured space
width:50; border:2; in IE means the width is actually 46 plus a border
Mozilla puts the border outside the measured space
width:50 border:2; means the div is 54 wide, and the right margin is pushed 4px out of visible space,
the border is likely there, but invisible
much of development is fudging the difference between IE and mozilla,
I use a javascript to check for browsertype where there are obvious problems, its not perfect, but.. neither are the browsers and doesnt work at all where javascript is disabled.
There is a tutorial on Mozilla's document model on the mozilla help pages
javascript Syntax (Toggle Plain Text) 
  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. (document.getElementById) ? dom = true : dom = false; //test for IE
  4.  if (dom) {document.write('style="width:50;"'}
  5. else {document.write('style="width:56;"') }
  6. //--></script>
code has not been tested for your purposes it is presented as an aide to problem solving
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 3
Reputation: jtucker33 is an unknown quantity at this point 
Solved Threads: 0
jtucker33 jtucker33 is offline Offline
Newbie Poster

Re: IE vs FF

 
0
  #5
Jan 24th, 2009
Do I put that code in the css document? Sorry a beginner here!?!?

THANKS SO MUCH FOR YOUR HELP!
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: IE vs FF

 
0
  #6
Jan 24th, 2009
It's javascript, paste it into the head of your document
Last edited by ccube921; Jan 24th, 2009 at 9:27 pm.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,335
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: IE vs FF

 
0
  #7
Jan 24th, 2009
Its a javascript, that just writes either of 2 width values depending on whether the DOM is true(IE) or false(Mozilla) browsers
it goes wherever you want to differentiate the measurement for either browser type
example
html Syntax (Toggle Plain Text) 
  1. <body>
  2. <h1>this is a header</h1>
  3. <div> this is somet to do with your body text</div>
  4. <script language="javascript" type="text/javascript">
  5. (document.getElementById) ? dom = true : dom = false; 
  6. if (dom) {document.write('<div class='menu' style="width:50;">'}
  7. else {document.write('<div class='menu' style="width:56;">') }
  8. </script>
  9. <ul>
  10. <li>menu item 1</li>
  11. <li>menu item 2</li>
  12. <li>menu item 3</li>
  13. <li>menu item 4</li>
  14. <li>menu item 5</li>
  15. <li>menu item 6</li>
  16. <li>menu item 7</li>
  17. </ul>
  18. </div>
  19. <p> more body stuff</p>
  20. <form>
  21. <!-- blah blah blah -->
  22. </form>
  23. </body>
  24. <script language="javascript" type="text/javascript">
  25. image1 = new Image();
  26. image1.src = "oemlogo1.jpg";
  27. image2 = new Image();
  28. image2.src = "oemlogo2.jpg";
  29. image3 = new Image();
  30. image3.src = "oemlogo3.jpg";
  31. </script>
  32. </html>
javascripts do not always belong in the <head>.
Most do
image preloaders end up between </body> and </html> so the page displays before the rollover images download
appearance of faster pages
code has not been tested for your purposes it is presented as an aide to problem solving.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: IE vs FF

 
0
  #8
Jan 25th, 2009
Sorry, my mistake.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC