469,645 Members | 1,560 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

CSS position is not properly aligning in Firefox

2
Hello:

I've finally made the effort to ween myself from overly using tables and use CSS for my positioning. However, I am having a problem with my navigational menu properly aligning in Firefox, despite the fact that I have gotten a green light from W3.

link to problem page:

I didn't see a feature to attach my css code so I pasted sections of the code that dealt with layout and navigation below.

Thanking you in advance,


Mark


Expand|Select|Wrap|Line Numbers
  1. /*++++++++++++++++++++++++++++++++++++defining border++++++++++++++++++++++++++++++++++++*/
  2. .bdr {
  3.     border: 1px solid #999999;
  4. }
  5. .bdr1 {
  6.     border: 1px solid #ffffff;
  7. }
  8.  
  9. .bdr2 {
  10.     border: 2px solid #BABDE8;
  11. }
  12.  
  13.  
  14.  
  15. /*++++++++++++++++++++++++++++++++++++defining navigation++++++++++++++++++++++++++++++++++++*/
  16. a.nav_one:link {color: #000000;font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold;font-size:10px}
  17. a.nav_one:visited {color: #000000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  18. a.nav_one:active {color: #000000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  19. a.nav_one:hover {color: #A80000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  20.  
  21. a.nav_two:link {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
  22. a.nav_two:visited {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
  23. a.nav_two:active {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
  24. a.nav_two:hover {color: #A4A4D2; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
  25.  
  26. a.nav_three:link {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  27. a.nav_three:visited {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  28. a.nav_three:active {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  29. a.nav_three:hover {color: #A80000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
  30.  
  31. /*++++++++++++++++++++++++++++++++++++defining navigational bar++++++++++++++++++++++++++++++++++++*/
  32. div.img-main_navigation_bar
  33. {
  34.   height: auto;
  35.   width: auto;
  36.   position:absolute;
  37. left:144px;
  38. top:95px
  39.  
  40. }
  41.  
  42. /*++++++++++++++++++++++++++++++++++++positioning absolute++++++++++++++++++++++++++++++++++++handling top navigation text
  43. ++++++++++++++++++++++++++++++++++++*/
  44. p.one
  45. {
  46. position:absolute;
  47. left:545px;
  48. top:24px;
  49. }
  50. p.two
  51. {
  52. position:absolute;
  53. left:625px;
  54. top:24px;
  55. }
  56. p.three
  57. {
  58. position:absolute;
  59. left:705px;
  60. top:24px;
  61. }
  62. p.four
  63. {
  64. position:absolute;
  65. left:785px;
  66. top:24px;
  67. }
  68.  
  69. /*++++++++++++++++++++++++++++++++++++main-buttons++++++++++++++++++++++++++++++++++++*/
  70. p.design-button
  71. {
  72. position:absolute;
  73. left:162px;
  74. top:99px;
  75. }
  76.  
  77. p.Applications-button
  78. {
  79. position:absolute;
  80. left:250px;
  81. top:99px;
  82. }
  83.  
  84. p.e-Marketing-button
  85. {
  86. position:absolute;
  87. left:372px;
  88. top:99px;
  89. }
  90.  
  91. p.Domain-Names-button
  92. {
  93. position:absolute;
  94. left:492px;
  95. top:99px;
  96. }
  97.  
  98. p.Gallery-button
  99. {
  100. position:absolute;
  101. left:690px;
  102. top:99px;
  103. }
  104.  
  105. p.Pricing-button
  106. {
  107. position:absolute;
  108. left:777px;
  109. top:99px;
  110. }
  111.  
  112. /*++++++++++++++++++++++++++++++++++++top_img-navigation images++++++++++++++++++++++++++++++++++++*/
  113. div.imghome
  114. {
  115.   height: auto;
  116.   width: auto;
  117.   position:absolute;
  118. left:524px;
  119. top:5px  
  120. }
  121. div.imglogin
  122. {
  123.   height: auto;
  124.   width: auto;
  125.   position:absolute;
  126. left:604px;
  127. top:5px  
  128. }
  129. div.imgcontact
  130. {
  131.   height: auto;
  132.   width: auto;
  133.   position:absolute;
  134. left:684px;
  135. top:5px  
  136. }
  137. div.imgsitemap
  138. {
  139.   height: auto;
  140.   width: auto;
  141.   position:absolute;
  142. left:764px;
  143. top:5px  
  144. }
  145.  
  146.  
  147.  
  148.  
  149.  
  150. /*++++++++++++++++++++++++++++++++++++positioning absolute
  151. ++++++++++++++++++++++++++++++++++++*/
  152. h2.pos_left
  153. {
  154. position:absolute;
  155. left:-20px
  156. }
  157. h2.pos_right
  158. {
  159. position:absolute;
  160. left:504px
  161. }
  162.  
  163.  
  164.  
  165.  
  166.  
  167. /*++++++++++++++++++++++++++++++++++++positioning absolute
  168. ++++++++++++++++++++++++++++++++++++*/
  169. h2.pos_abs
  170. {
  171. position:absolute;
  172. left:533px;
  173. top:803px
  174. }
  175.  
  176. h4.pos_abs
  177. {
  178. position:absolute;
  179. left:55px;
  180. top:260px
  181. }
  182.  
  183.  
  184. /*++++++++++++++++++++++++++++++++++++defining table_thickboarder++++++++++++++++++++++++++++++++++++*/
  185. table.main-table{width:780px; height: 518px; background-image:url(images/bckgnd_purple.gif); border:5px solid #ffffff;
  186. position:absolute;
  187. left:110px;
  188. top:70px}
  189. TH{font-weight:bold} 
  190. TD{padding:20px;}
  191.  
  192. /*___________________________________________________________________________________________________________________________*/
  193.  
Aug 1 '07 #1
2 2284
drhowarddrfine
7,435 Expert 4TB
To post CSS, it's [code=css]

Showing the CSS sometimes only gives half the picture so the complete code is better, however the link is best.

You are using absolute positioning. What must be remembered is that abs pos removes the element from the normal flow causing it to rise up to the next positioned element. This is what is causing the overlapping. You should try wrapping some of those elements in a div and position that div relative to the abs pos elements will then use it as the reference. In this case, I don't know why you use abs positioning.

Do not use IE as your reference. IE is buggy with all this. Get it working in FF first. Then we can adjust for IEs non-standard quirks.

I also don't know why you are using all those images.

Remember that validation means you are using the correct syntax but not that the elements/attributes are used the way you want.
Aug 1 '07 #2
agbee1
2
Thanks a lot for the guidance drhowarddrfine. I'll work on that now...if the problem persist i'll be back. As for the multitude of images, i had to use them to get the desired design. without out them i think the design would look very plain. Many thanks once again. It was greatly appreciated.
Aug 2 '07 #3

Post your reply

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

Similar topics

1 post views Thread by Falc2199 | last post: by
3 posts views Thread by David Hayes | last post: by
14 posts views Thread by Schraalhans Keukenmeester | last post: by
2 posts views Thread by vunet.us | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.