CSS - Menu Bar Vertical Location Varies From Browser To Browser

Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html

My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it.

As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!)

It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself.

Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column.

Thanks

My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out.

That being said

I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes

(I know I can post my url here, how can I redirect you guys to veiw my site??)


/********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/
Quote:
/* general */
body {background: url((MyBGJPEGforbackground)); margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
a, a:link, a:visited {color:white; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:black; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:30px;}
.mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:1px auto; width:750px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;}
.reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;}

Hi I have been trying to get a cross browser Dropdown css menu to work on my site.

I have got it working in Firefox and IE7.

The problem is in IE6.

The way the author set this up is there are two .css files, one is specific for IE6 and is called in a different manner, like this :
Code:

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" />
<![endif]-->

I dont think this is working for me. It is strange because the page that I get the files from has a demo of the menu and I tested it in FF, IE7, and IE6 and it worked. When I put it on my page it works everywhere but IE6. Am I calling the .css wrong? Here is my menu code:

Code:

<div class="menu">
      <ul>
        <li><a class="hide" href="index.php">HOME</a>
            <!--[if lte IE 6]>
<a href="index.php">HOME
<table><tr><td>
<![endif]-->
            <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="company.php">COMPANY</a>
            <!--[if lte IE 6]>
<a href="company.php">COMPANY
<table><tr><td>
<![endif]-->
            <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="contact.php">CONTACT</a>
            <!--[if lte IE 6]>
<a href="contact.php">CONTACT
<table><tr><td>
<![endif]-->
            <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="consulting/consulting.php">CONSULTING</a>
            <!--[if lte IE 6]>
<a href="consulting/consulting.php">CONSULTING
<table><tr><td>
<![endif]-->
            <ul>
              <li><a href="consulting/confined_space.php" title="Confined Spage Consulting">Confined Space</a></li>
              <li><a href="consulting/emergency_planning.php" title="Emergency Planning Consulting">Emergency Planning</a></li>
              <li><a href="consulting/regulatory_compliance.php" title="Regulatory Compliance Consulting">Reg. Compliance</a></li>
              <li><a href="consulting/development.php" title="Program and Procedure Development Consulting">Procedure Dev.</a></li>
            </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="training/training.php">TRAINING</a>
            <!--[if lte IE 6]>
<a href="training/training.php">TRAINING
<table><tr><td>
<![endif]-->
            <ul>
              <li><a href="training/open.php" title="Open Schedule Training">Open Course</a></li>
              <li><a href="training/rescue.php" title="Confined Space Training">Confined Space</a></li>
              <li><a href="training/spill_response.php" title="Spill Response Training">Spill Response</a></li>
              <li><a href="training/hazmat.php" title="Hazardous Materials Training">HazMat. Response</a></li>
              <li><a href="training/im.php" title="Incident Management Training">Incident Management</a></li>
              <li><a href="training/extinguisher.php" title="Fire Extinguisher Training">Fire Extinguisher</a></li>
              <li><a href="training/cpr.php" title="First Aid and CPR Training">First Aid & CPR</a></li>
              <li><a href="training/whmis.php" title="Workplace Hazardous Materials Information System">WHMIS</a></li>
              <li><a href="training/dangerous_goods.php" title="Dangerous Goods Training">Dangerous Goods</a></li>
              <li><a href="training/high_angle.php" title="High Angle Rescue Training">High Angle Rescue</a></li>
              <li><a href="training/waste_management.php" title="Waste Management Training">Waste Management</a></li>
              <li><a href="training/fall.php" title="Fall Protection Training">Fall Protection</a></li>
              <li><a href="training/lockout.php" title="Lockout Training">Lockout</a></li>
              <li><a href="training/air.php" title="Air Monitoring Training">Air Monitoring</a></li>
            </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="response.php">RESPONSE</a>
            <!--[if lte IE 6]>
<a href="response.php">RESPONSE
<table><tr><td>
<![endif]-->
            <ul>
              <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
              <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
              <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
            </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="media/media.php">MEDIA</a>
            <!--[if lte IE 6]>
<a href="media/media.php">MEDIA
<table><tr><td>
<![endif]-->
            <ul>
              <li><a href="media/news.php" title="Industry Related News">News Releases</a></li>
              <li><a href="media/photos/photos.php" title="Standard Response Services in action">Photo's</a></li>
              <li><a href="media/links.php" title="Helpfull Links">Links</a></li>
            </ul>
          <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
        </li>
      </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
      </li>
      </ul>
    </div>

Menu I am using from the authors site.:
http://www.cssplay.co.uk/menus/dd_valid.html

Thanks for looking

hi,

In my site, I'm trying to make the menu in a table.
The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him).

Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it?

here is the html for the menu:


<div id="menu">
<table width="679" border="0" cellpadding="0" cellspacing="4">
<tr>
<td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td>
<td background="../../images/1.jpg">&nbsp;</td>
<td background="../../images/2.jpg">&nbsp;</td>
<td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td>
<td background="../../images/3.jpg">&nbsp;</td>
<td background="../../images/4.jpg">&nbsp;</td>
<td background="../../images/5.jpg">&nbsp;</td>
<td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td>
<td background="../../images/6.jpg">&nbsp;</td>
</tr>
<tr>
<td background="../../images/7.jpg">&nbsp;</td>
<td background="../../images/8.jpg">&nbsp;</td>
<td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td>
<td background="../../images/9.jpg">&nbsp;</td>
<td background="../../images/10.jpg">&nbsp;</td>
<td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td>
<td background="../../images/11.jpg">&nbsp;</td>
<td background="../../images/12.jpg">&nbsp;</td>
<td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td>
</tr>
</table>
</div>


and here is the css:


/* Regular menu items */

#nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;}
#nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;}

/* Hovered menu items */

#nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;}
#nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;}

/* Active menu items */

body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;}
body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;}


I really need help...

Thanks a lot!!

Hello, this is my first in a hope to find the solution to a long standing problem i am having and doing google had not helped me for this. ** I am a novice in css **.

I have tried many drop down css menus (with back ground image), but none is compatible with ie6, ie7, ie8, and firefox. Please let me know the best available *free* menu.

Thanks,
foka