SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    MrBaseball34
    Hook'Em Horns!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :
    Code:
            <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
    Code:
    #left-col {
      width:20&#37;; 
      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)
    Code:
    #main-menu {
      margin: 0; 
      padding: 0;
      list-style: none;
    }
    and change the other occurrances of div#main-menu to div#left-col
    Code:
    div#left-col {
      padding-top: 0;
      margin-top: 14px;
      position: relative;
      top: -3px;
    }
    
    div#left-col * {
         POSITION: relative;
    }

  3. #3
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    #content {
      margin-left: 22&#37;; 
      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.
    MrBaseball34
    Hook'Em Horns!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •