Ok, I know this is old table stuff with divs mixed in but this is an old site that. I put in the firebugs image on the right side of the screen which based on playing around resulted in me changing the doctype.

As soon as I did that my navigation menu did what it is doing. It looks just fine in IE 8 but looks odd in Firefox. I have never seen that before as it is usually the other way around.

http://outdoorsindoors.net/DEV/PTC2/index.php

link to dev server there.

I think the header is resulting in the black line in the navigation menu but can not figure out why. I have tried altering the css on the nav menu itself all of the place and can not find it there either.

Anyone have any ideas?

and I have no problem putting the code in the thread, only issue is I am confused as to which code to paste

<table width="1000" border="0" cellspacing="0" cellpadding="0" background="themes/PTC3/site_bg.jpg">
<tr>
<td><table cellspacing="0" cellpadding="0" ><tr><td width="814"><img src="themes/PTC3/header.jpg" height="125"></td>
						 <td width="73" ><a href="./index.php"><img src="themes/PTC3/header_home.jpg" height="125" width="73" border="0"></a></td>
						 <td width="112" ><a href="index.php?page=modules/Contact/contact"><img src="themes/PTC3/header_contact.jpg" height="125" width="112" border="0"></a></td></tr></table></td>
</tr>
<tr valign="middle">
<td valign="middle" ><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="9"><img src="themes/PTC3/navbar-left.jpg"></td>
<td align="left" background="themes/PTC3/navbar-background.jpg">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#"  rel="dropmenu21" target="_parent" ><img src='themes/PTC3/nav_products.jpg' border="0"></a></li><li><a href="#"  rel="dropmenu23" target="_parent" ><img src='themes/PTC3/nav_prostaff.jpg' border="0"></a></li><li><a href="forum/"  target="_parent" ><img src='themes/PTC3/nav_forums.jpg' border="0"></a></li><li><a href="#"  rel="dropmenu4" target="_parent" ><img src='themes/PTC3/nav_galleries.jpg' border="0"></a></li><li><a href="catalogs/2010_A/index.html"  target="_blank" ><img src='themes/PTC3/nav_catalog.jpg' border="0"></a></li><li><a href="#"  rel="dropmenu36" target="_parent" ><img src='themes/PTC3/nav_support.jpg' border="0"></a></li></ul>
</div>
<div id="dropmenu21" class="dropmenudiv">
<a href="index.php?page=models/informerxp" target="_parent" >Informer XP</a>
<a href="index.php?page=models/informerir" target="_parent" >Informer IR</a>
<a href="index.php?page=models/traileyexp" target="_parent" >Traileye XP</a>
<a href="index.php?page=models/traileyeir" target="_parent" >Traileye IR</a>
<a href="index.php?page=mods/faq/index" target="_parent" >F.A.Q.</a>
</div>
<div id="dropmenu23" class="dropmenudiv">
<a href="index.php?page=modules/pages/index&id=38" target="_parent" >Pro Staff</a>
<a href="index.php?page=modules/pages/index&id=46" target="_parent" >Youth Pro Staff</a>
</div>
<div id="dropmenu4" class="dropmenudiv">
<a href="index.php?page=mods/Gallery/index" target="_parent" >Trail Pics</a>
<a href="index.php?page=mods/Video/index" target="_parent" >Trail Video</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</td>
<td width="9"><img src="themes/PTC3/navbar-right.jpg"></td>
</tr>
</table>
</td>

</tr>

css for the navigation menu
.chromestyle { font-weight: bold; 
               width: 99%; 
               padding:0; 
               margin:0; }
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
.chromestyle ul   { background: repeat-x center; 
                    text-align: center; 
                    margin: 0; 
                    padding: 0; 
                    width: 100%;}
.chromestyle ul li { display: inline; 
                      margin:0; 
                      padding:0; 
                      height:32px; }
.chromestyle ul li a    { color: #6bac0a; 
                          text-decoration: none; 
                          margin: 0; height:32px; 
                          padding: 0 10px 0 10px;}
.chromestyle ul li a:hover  { color: #f28932;  }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv         { color: #9ad321; 
                       font-style: normal; 
                       font-variant: normal; 
                       font-weight:bold; 
                       font-size: 12px; 
                       line-height: 18px; 
                       font-family: Arial; 
                       background-color: #000000; 
                       border-left:solid 2px #e56b06; 
                       border-right: solid 2px #e56b06; 
                       border-bottom: solid 2px #e56b06; 
                       position: absolute; z-index: 100; 
                       top: 0; 
                       width: 200px; 
                       visibility: hidden }
.dropmenudiv a      { color: #9ad321; 
                      font-size: 8pt; 
                      text-decoration: none; 
                      text-indent: 3px; 
                      padding: 0px; 
                      border-top: 0px solid; 
                      border-right: 0px solid; 
                      border-bottom: 1px solid #464646; 
                      border-left: 0px solid; 
                      width: 100%; 
                      height: 20px; 
                      display: block }
.dropmenudiv a:hover   { color: #e56b06; 
                        background-color: #cccccc; }

There is another css for the site itself. If you want elements from that one let me know. Thanks for the help. I hope I am just overlooking something

And what exactly is it supposed to look like???

because the only thing I can see is the links are "scalloping" the bottom line of the navigation.

AND "my navigation menu did what it is doing" would you like to tell us what it is that it started "doing"?

I certainly can, my apologies for it not being clear. I figured IE 8 vs FF would let you know what was looking odd.



You are correct on the scalloping on the bottom line. This appears to be because of a gap at the top of the navigation menu but I cant figure out what is causing it

I figured IE 8 vs FF

Actually, both IE8 and FF look the same for me


definitely something amiss with the mish-mash of nested tables and lists, and it probably be easier to redo the header without the tables.

one thing to try would be to lose 2 pixels of the bottom of the images as they could be pushing the cell height.

not sure that would help, the 2px part. I actually took all images out and replaced the nav images with the word test in my navigation php and the stretch still happens. so to me it has be spacing, padding, margin etc related, just cant find it.

Originally Posted by scuts

not sure that would help, the 2px part. I actually took all images out and replaced the nav images with the word test in my navigation php and the stretch still happens. so to me it has be spacing, padding, margin etc related, just cant find it.

I came to the same conclusion. After firebugging the page for a while I found that the top table seems to be the culprit however no marging or padding is present.

I popped a CSS reset in the page using firebug but still no luck.

Ive tryed using minus margins to see if it could be forced into place and still no luck.

Your not going to want to hear this lol but you really should strip out all the tables and re structure using CSS, it is going to reduce these errors and similar and should negate the time investment of stripping the tables.

I fought it all day yesterday and finally I just gave up...... I appreciate you guys looking. I went with a more simple solution, quit with the cool stuff and just add a link to nav menu with a separate page. This will work for now while I redo this entire CMS.....