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

CSS position is not properly aligning in Firefox

P: 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
Share this Question
Share on Google+
2 Replies

drhowarddrfine
Expert 5K+
P: 7,435
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

P: 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.