Again...cross-browser CSS is killing me!

[MrBaseball34]

I have posted this before, then said that I was abandoning this attempt
and going back to tables. Well, forget the tables as the problem with
browser resolutions is going to kill me there.

This is a fluid CSS design but there are just a few tweaks needed to get it
to work in all three browsers. If you can help explain why these problems
are happening, I'd really appreciate it.

I need this site to work in IE6, FF and IE7.

http://www.crnorthampton.com/new_site/index.html
http://www.crnorthampton.com/new_site/layout.css

So far, FF looks very good but IE6 looks like trash and I haven't been
able to test completely in IE7.

Problems observed in FF(2.0.0.7):

1. Links in Sponsors have inherited rollovers from Main Menu even though they are different class.

Problems observed in IE6(6.0.2900.1280):

1. In the cool-links area, the Today in baseball History scroller, the text is "squished"
2. Links in Sponsors have inherited rollovers from Main Menu even though they are different class.

[Centauri]

As your left column has an id of #main-menu, then #main-menu a will affect all <a> tags within that div. As the left column contains more than just the menu, you would be better off naming it more appropriately (like #left-col) and moving the #main-menu id to the menu <ul> instead :

        <li><a class="divisionmenu" href="http://www.crnorthampton.com/new_site/standings.php?division=aa">AA</a></li>
      </ul>
    </div> 
    <div id="left-col">
      <ul id="main-menu">
        <li><span>Home</span></li>

Then in the css. change the id for the div

#left-col {
  width:20%; 
  float: left; 
  margin-bottom: 25px;
  margin-top: 14px; 
  padding: 3px; 
  padding-bottom: 60px;
  border: solid 0px #00381C;
  min-width: 140px;
  width: expression((this.width < 200)?200+"px":"20%");
  white-space:nowrap;
}

change the #main-menu ul to just #main-menu (as it is now the ul)

#main-menu {
  margin: 0; 
  padding: 0;
  list-style: none;
}

and change the other occurrances of div#main-menu to div#left-col

div#left-col {
  padding-top: 0;
  margin-top: 14px;
  position: relative;
  top: -3px;
}

div#left-col * {
     POSITION: relative;
}

[MrBaseball34]

Thanks, that fixed the Sponsor links. But now, what about the other problem with IE6, the content area moving to the bottom? I think it is related to using percentages for margins in the content div:

#content {
  margin-left: 22%; 
  margin-right: 22%;
  margin-top: 14px;
}

Anyway to defeat this in IE6? I still haven't tested it in IE7, yet, so I don't
know how it looks in IE7.