SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation padding-bottom in IE

    Right I designed a new layout today for a lyrics site in the works.

    Perfectly cross-browser compatible, except: The padding-bottom of the alphabet navigation links doesn't work in IE.

    What would your work around to this be? I would rather not give them display:block; and set a specific height, but that's all I can think of currently.

    Please also give me your review of the general layout. Ignore the logo that's temporary.

    This is what I get in FF and everything else:


    This is what I get in IE:
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No takers?
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    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)
    Hi,

    I would float the menu items which makes them block-level
    Code:
    #alphabet-nav {
      text-align:center;
      background:#edd8a4 url(img/alphabet-nav-bg.png) repeat-x;
      color:#333;
      border-bottom:1px solid #aaa;
      overflow: hidden; /* clear children */
      width: 100%; /* Clear in IE */
    }
    #alphabet-nav a {
      float: left;
    }
    #alphabet-nav a {
      float: left;
      text-decoration:none;
      color:#333;
      padding:6px 10px 5px 10px;
    }
    Though I believe IE has some support for display: inline-block; which may solve all your problems.

    Hope it helps

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bit of a hack ( most things are with IE ) but you can set the overflow to hidden and a fixed height on the nav bar.

    HTML Code:
    <style type="text/css" media="screen">
    
        #nav {
            height: 10px;
            overflow: hidden;    
        }    
    
    </style>
    
    <div id="nav">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
        </ul>
    </div>


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
  •