CSS position is not properly aligning in Firefox

[agbee1]

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

/*++++++++++++++++++++++++++++++++++++defining border++++++++++++++++++++++++++++++++++++*/
.bdr {
    border: 1px solid #999999;
}
.bdr1 {
    border: 1px solid #ffffff;
}
 
.bdr2 {
    border: 2px solid #BABDE8;
}
 
 
 
/*++++++++++++++++++++++++++++++++++++defining navigation++++++++++++++++++++++++++++++++++++*/
a.nav_one:link {color: #000000;font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold;font-size:10px}
a.nav_one:visited {color: #000000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
a.nav_one:active {color: #000000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
a.nav_one:hover {color: #A80000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
 
a.nav_two:link {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
a.nav_two:visited {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
a.nav_two:active {color: #ffffff; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
a.nav_two:hover {color: #A4A4D2; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:13px}
 
a.nav_three:link {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
a.nav_three:visited {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
a.nav_three:active {color: #004182; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
a.nav_three:hover {color: #A80000; font-family: "Trebuchet MS"; text-decoration:none; font-weight:bold; font-size:10px}
 
/*++++++++++++++++++++++++++++++++++++defining navigational bar++++++++++++++++++++++++++++++++++++*/
div.img-main_navigation_bar
{
  height: auto;
  width: auto;
  position:absolute;
left:144px;
top:95px
 
}
 
/*++++++++++++++++++++++++++++++++++++positioning absolute++++++++++++++++++++++++++++++++++++handling top navigation text
++++++++++++++++++++++++++++++++++++*/
p.one
{
position:absolute;
left:545px;
top:24px;
}
p.two
{
position:absolute;
left:625px;
top:24px;
}
p.three
{
position:absolute;
left:705px;
top:24px;
}
p.four
{
position:absolute;
left:785px;
top:24px;
}
 
/*++++++++++++++++++++++++++++++++++++main-buttons++++++++++++++++++++++++++++++++++++*/
p.design-button
{
position:absolute;
left:162px;
top:99px;
}
 
p.Applications-button
{
position:absolute;
left:250px;
top:99px;
}
 
p.e-Marketing-button
{
position:absolute;
left:372px;
top:99px;
}
 
p.Domain-Names-button
{
position:absolute;
left:492px;
top:99px;
}
 
p.Gallery-button
{
position:absolute;
left:690px;
top:99px;
}
 
p.Pricing-button
{
position:absolute;
left:777px;
top:99px;
}
 
/*++++++++++++++++++++++++++++++++++++top_img-navigation images++++++++++++++++++++++++++++++++++++*/
div.imghome
{
  height: auto;
  width: auto;
  position:absolute;
left:524px;
top:5px  
}
div.imglogin
{
  height: auto;
  width: auto;
  position:absolute;
left:604px;
top:5px  
}
div.imgcontact
{
  height: auto;
  width: auto;
  position:absolute;
left:684px;
top:5px  
}
div.imgsitemap
{
  height: auto;
  width: auto;
  position:absolute;
left:764px;
top:5px  
}
 
 
 
 
 
/*++++++++++++++++++++++++++++++++++++positioning absolute
++++++++++++++++++++++++++++++++++++*/
h2.pos_left
{
position:absolute;
left:-20px
}
h2.pos_right
{
position:absolute;
left:504px
}
 
 
 
 
 
/*++++++++++++++++++++++++++++++++++++positioning absolute
++++++++++++++++++++++++++++++++++++*/
h2.pos_abs
{
position:absolute;
left:533px;
top:803px
}
 
h4.pos_abs
{
position:absolute;
left:55px;
top:260px
}
 
 
/*++++++++++++++++++++++++++++++++++++defining table_thickboarder++++++++++++++++++++++++++++++++++++*/
table.main-table{width:780px; height: 518px; background-image:url(images/bckgnd_purple.gif); border:5px solid #ffffff;
position:absolute;
left:110px;
top:70px}
TH{font-weight:bold} 
TD{padding:20px;}
 
/*___________________________________________________________________________________________________________________________*/
 

[drhowarddrfine]

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.

[agbee1]

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.