Css problems with navigation

Hi
I have a half built test site up but my navigation band below header is misbehaving in all but firefox.

The nav is Coded as lists (not positioning correctly) and with anchors (that are taking on some of the general anchor characteristics).
The drop down may be another issue?)

Here is the home page (not all pages are linked)
http://www.drawtheline.com.au/test/new.html
Also the relevent css.
Hope you can help.
Rob

#menuBar { display: block; margin-bottom: 0; position: relative; top: 0; left: 0; right: 0; border-left: 1px solid black; height: 22px; width: 100%; overflow: hidden; background-color: white; background-image: url(../new-images/nav.jpg); background-repeat: repeat-y; background-position: left top; padding-bottom: 2px; }


.menuHeader { color: #3c3c3c; font-size: 1em; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; white-space: nowrap; text-align: center; margin: 0; width: 120px; height: 22px; overflow: hidden; display: block; float: left; list-style-type: none; }
#menuBar ul { list-style-type: none; display: block; }
#menuBar ul li{ text-align: center; margin: 0; width: 120px; height: 23px; overflow: hidden; display: inline; float: left; padding-top: 0.25em; }
#menuBar ul li a { color: #ebebb7; text-decoration: none; width: 120px; height: 22px; display: block; }
#menuBar ul li a:visited { color: #3c3c3c; font-weight: normal; text-decoration: none; width: 120px; height: auto; display: block; }
#menuBar ul li a:hover, #menuBar ul li a:active { color: #996; background-color: #fff; width: 119px; height: 100%; border-top: 1px solid #3c3c3c; border-right: 2px solid #3c3c3c; display: block; }
.currentpage { background-image: url(../new-images/current.gif); background-repeat: no-repeat; background-position: right top; overflow: hidden; }

.menuDrop { position: absolute; visibility: hidden; z-index: 1000; width: 160px; height: auto; margin: 0 0 0 6px; font-size: 90%; font-family: Arial, Helvetica, sans-serif; background-color: #ebebb7; text-align: left; border-bottom: 1px solid #3c3c3c; border-left: 1px solid #3c3c3c; }

.menuDrop a {color: #3c3c3c; display: block; padding: 3px 3px 3px 20px; text-decoration: none
; width: auto; border-bottom: 1px solid #fff; }
.menuDrop a:visited { color: #616161; width: auto; padding: 3px 3px 3px 20px; border-bottom: 1px solid #fff; display: inherit; }

.menuDrop a:hover, .menuDrop a:active { color: #fff; background-color: #996; width: auto; padding: 3px 3px 3px 20px; display: inherit; }
.illodrop { background-color: #dadaa2; display: block; }

.listdrop { background-color: #dadaa2; width: 139px; margin-left: 20px; border-left: 1px solid #fff; }
#content { background-color: white; position: relative; top: -2px; left: 0; width: 660px; height: 100%; float: left; min-height: 650px; margin-bottom: 0; padding-top: 5px; padding-bottom: 20px; border-left: 1pt solid black; }
#content h1 { color: #996; font-size: 110%; font-weight: 600; margin: 0.67em 0; padding-right: 15px; padding-left: 10px; }
#content h3 { color: #996; font-size: 105%; font-weight: 500; font-style: italic; margin-top: 0.3em; margin-bottom: 0.3em; padding-right: 15px; padding-left: 10px; }

#content p { color: #979797; line-height: 160%; margin-bottom: 0.3em; padding-right: 15px; padding-left: 10px; }
#content h2 { color: #666; font-size: 100%; font-weight: 700; margin: 0.37em 0; }
.flt { color: #979797; width: 310px; float: left; margin-left: 15px; padding-bottom: 20px; list-style-type: square; list-style-position: outside; display: block; }
#content ul li { margin-left: 12px; padding-bottom: 3px; }
.widelist { color: #979797; width: auto; float: left; margin-left: 15px; padding-bottom: 20px; display: block; }

.main-pic { float: right; clear: none; margin-top: 12px; margin-right: 20px; padding: 25px; border: dotted 1pt black; }

.recent-pic { width: 70px; height: 70px; float: left; clear: left; margin-top: 1px; border-style: none; }
#text { color: #808080; font-size: 90%; position: relative; width: 550px; height: 30px; float: right; clear: right; min-height: 30px; padding-top: 10px; padding-right: 25px; border-bottom: 1px dotted black; display: block; }

#footer { font-size: 90%; background-color: white; background-image: url(../new-images/nav.jpg); background-repeat: no-repeat; background-position: left bottom; text-align: center; position: relative; top: -2px; width: 715px; clear: both; padding: 4px 5px 20px; border-top: 1px dotted #979797; border-left: 1px solid black; }
td { }
p a:link { color: #996; text-decoration: underline; }
p a:visited { color: #505050; text-decoration: none; }
p a:hover, p a:active { color: #669; text-decoration: none; }

The first thing I'm noticing is that the font gets way bigger when I switch to IE. I think you might want to try setting a standard font-size for all of your elements. This probably won't solve all of your problems, but it should help.

Well, while not the prettiest horizontal nav I've seen, it seems to function the same in FF and IE7. Text is larger in IE; other than that what is it you want to change?

Well, while not the prettiest horizontal nav I've seen, it seems to function the same in FF and IE7. Text is larger in IE; other than that what is it you want to change?
Thanks solidarity and garydarling

I'll look at adjustng the font size. Any suggestions for that?

And garydarling is it really visually ugly or just clunky from bad coding?
One looses site of the big picture when caught up in all this code, I'm self taught here?

It was misbehaving in safari and netscape but given its nearly ok in IE I should be able to fix.
I really appreciate your efforts,
Rob