SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 List Style Rendering Problem

    FireFox seems to render my webpage perfectly; however, IE7 has three rendering quirks (two of which may be related to list styles). I am a fairly technical person but I am by no means an experienced web developer--any assistance offered would be greatly appreciated.

    1. In IE7, the gray background image that highlights the current navigation location in the menubar is not the correct height. (see: div id=body_menubar). In the image below, the correct rendering is on the left (in FireFox)



    2. In IE7, the text under recent music history and recent blog posts is shifted to the right. Although these are dynamically generated, they both use css-specified unordered list styles (e.g., ul.recent_tracks and ul.blog_feed). Again, in the image below, the correct rendering is on the left (in FireFox).




    3. In IE7, the blue-to-gray gradient does not seem to disappear into the gray background color of the website even though I used websafe colors (and it renders flawlessly in FireFox).

    Thanks in advance!

    Jon

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello, and welcome to Sitepoint

    You can't really use display: table; at the moment as IE doesn't support it well enough, so you should really stick with floats.

    Code:
    #body_menubar ul {
      margin:0;
      padding-left: 50px;
      text-align: left;
      list-style:none;
      color: #6699CC;
      font-family: "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
      font-size: 16px;
      font-weight: bold;
    }
    
    #body_menubar li {
      float: left;
      background: transparent url(images/menu_divider.png) no-repeat scroll 0pt 6px;
    }
    
    #body_menubar li a {
      float: left;
      height: 24px;
      line-height: 24px;
      padding: 0 20px;
      text-decoration: none;
      color: #6699CC;
    }
    I've just set a fixed height and line-height to vertically center the text in the buttons but you could also just set padding on the links and let the font-size set it's height.

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great! Thanks so much, the menubar renders correctly in FireFox, IE7 and Safari now. However, I am still having trouble with the content on the right (which renders correctly in FireFox and Safari but not in IE7). This was issue #2 that I identified before where in IE7 the list gets indented incorrectly.

    Here is a sample of the html from that part:

    HTML Code:
    <div class="side_content">
    <ul class="recent_tracks">
    <li class="artist">
    <a href="http://www.last.fm/music/Radiohead">Radiohead</a>
    </li>
    <li class="track">
    <a href="http://www.last.fm/music/Radiohead/_/Reckoner">Reckoner</a>
    </li>
    <li class="recency">11 hrs, 54 mins ago</li>
    <li class="artist">
    <a href="http://www.last.fm/music/Miracle+Fortress">Miracle Fortress</a>
    </li>
    <li class="track">
    <a href="http://www.last.fm/music/Miracle+Fortress/_/Blasphemy">Blasphemy</a>
    </li>
    <li class="recency">11 hrs, 59 mins ago</li>
    <li class="artist">
    <a href="http://www.last.fm/music/Rock+Kills+Kid">Rock Kills Kid</a>
    </li>
    <li class="track">
    <a href="http://www.last.fm/music/Rock+Kills+Kid/_/I+Turn+My+Camera+On">I Turn My Camera On</a>
    </li>
    <li class="recency">20 hrs, 36 mins ago</li>
    </ul>
    </div>

  4. #4
    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)
    IE uses left margin to indent lists by default (while FF uses padding), so setting that to zero will fix it :
    Code:
    .side_content ul {margin: 0}
    You could also apply that to the individual classed <ul>s instead if you wish.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked too. You guys rule. I seriously couldn't figure that out on my own; those issues have existed since I first built the webpage like a year ago!

    Thanks again!

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You're most welcome


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
  •