473,562 Members | 2,598 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS position is not properly aligning in Firefox

2 New Member
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 2439
drhowarddrfine
7,435 Recognized Expert Expert
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 New Member
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

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

Similar topics

1
12678
by: Falc2199 | last post by:
Hi all, I am using the "Poistion" attribute to correctly align a column of images that I have on a table. The code looks like so.... <TD valign="top" class="listinglight" align="left"> <A href="somewhere.html" style="position: absolute; left: 25px;"> <IMG src="CopyButton.gif" border="0" /></A> <A href="anywhere.html" style="position:...
0
2450
by: joeZ | last post by:
hi there! I'm just going crazy with this stuff I want to do I though was simple. I just want to locate an image (which is linkeable) below the bottom of a cell. I mean, if the cell is at 0,0, the image should be at 0,100%. I've tried it several ways, and I can make it work in both firefox & ie, but not at the same time!!.
8
3006
by: Jaime Rios | last post by:
Hi, I created a COM AddIn for Word that performs the functions that it needs to, but I needed to add the ability for the toolbar created by the COM AddIn to remember it's last position and whether it was docked or not. I added the following code to my "OnConnection" function but it fails with an error, "Run-time exception thrown :...
3
5161
by: David Hayes | last post by:
I've made tooltips work in Firefox*, but tooltip doesn't appear at the specified location until the SECOND time that the user passes the mouse over the location with the mouseover event. What I want is for the user to be able to put the mouse over text that gives a year (e.g., "(1932)", "(1946)" and "(1923)") and see the tooltip to the right...
14
3612
by: Schraalhans Keukenmeester | last post by:
I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good readibility on browsers w/o css-support. For important notes, warnings etc I use the <pre> tag, which shows in a neat bordered box when viewed...
2
16331
by: vunet.us | last post by:
This beautiful code allows a table header to be not scrollable in IE. Since Firefox does not support this CSS method expression(...), the code does not do the desired work in Firefox or other Mozilla browsers. What is the workaround here? I tried position: fixed for Mozilla, but it is making my table header unrelevant to the table, as if these...
4
29369
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web shows this could be done a containing element with "min-height: 100%;" and an absolute positioned element (div) inside, aligned to bottom...
3
2203
by: Avaenuha | last post by:
I have a banner-and-sidebar menu that I want to remain always-accessible. So I've made them both position:fixed, and used z-index to ensure the layers work properly. Both the CSS and HTML validate, and the whole setup works exactly the way I want it to in firefox. Link to site in question However, in IE there are several problems; the...
10
2809
by: Humakt | last post by:
Hey all. It's been a while since I last visited. Short description of program: Board game which's html elements are fully constructed using DHTML/Javascript. Board is constructed of html table, and each table cell has one image (together the table forms a map/board). Players (2-4) each have their own pawns that float over the board using...
0
7658
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7874
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7630
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7940
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5479
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5198
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
1
2075
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1192
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
907
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.