943,811 Members | Top Members by Rank

Ad:
Jan 23rd, 2009
0

IE vs FF

Expand Post »
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?!?!?!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jtucker33 is offline Offline
3 posts
since Jan 2009
Jan 24th, 2009
0

Re: IE vs FF

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?
Reputation Points: 85
Solved Threads: 64
Practically a Master Poster
sillyboy is offline Offline
686 posts
since Mar 2007
Jan 24th, 2009
0

Re: IE vs FF

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jtucker33 is offline Offline
3 posts
since Jan 2009
Jan 24th, 2009
0

Re: IE vs FF

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
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Jan 24th, 2009
0

Re: IE vs FF

Do I put that code in the css document? Sorry a beginner here!?!?

THANKS SO MUCH FOR YOUR HELP!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jtucker33 is offline Offline
3 posts
since Jan 2009
Jan 24th, 2009
0

Re: IE vs FF

It's javascript, paste it into the head of your document
Last edited by ccube921; Jan 24th, 2009 at 9:27 pm.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Jan 24th, 2009
0

Re: IE vs FF

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.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Jan 25th, 2009
0

Re: IE vs FF

Sorry, my mistake.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: css question
Next Thread in HTML and CSS Forum Timeline: images & style not displaying in EXpressin Web2





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC