SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Couple small differences bugging me in Opera and Safari (windows)

    In the site I'm developing, the forum templates are completely separate from my normal templates. So, for this reason, there are two totally different CSS files, one for the forum and one for the rest of the site.

    Here is one of my normal pages: http://www.kentuckygolfing.com/blog

    Here is my forum page: http://www.kentuckygolfing.com/forums

    If you open these two pages up in two different tabs in FireFox and IE7, and toggle back and forth between the two, you'll notice they are nearly identical.

    If you do the same in Opera or Safari (I'm on windows, not sure how it reacts on a Mac) and you toggle back and forth between the two pages, you'll notice that the padding at the bottom of the nav bar jumps a couple pixels when you toggle. There is no doubt that this is a problem with the already in place CSS for the forum. I'm sure there is a bit of code that is messing with padding on the navbar, but I've been unable for a while now to locate the culprit in the forum CSS.

    Can anyone pinpoint this needle in a haystack that's making the navbar the the forums have about two less pixels of padding on the bottom?

    I realize it's not a big deal and no one will ever know the different (probably). It just bugs me not knowing what the problem is.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This tool a bit of finding but I think these three things account for the differences.

    1) Line-height is set to 150% for the body in only one of the stylesheets.
    Code:
    body {
    font-family: arial, helvetica, sans-serif;
    font-size: small;
    background: url(http://www.kentuckygolfing.com/images/body-bg-top.gif) repeat-x;
    min-width: 980px;
    color: #000;
    line-height: 150%;
    }
    2) The navbar is 1px different in both stylesheets:
    Code:
    #navbar ul li a:link, #navbar ul li a:visited {
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    padding: 8px 15px 8px 15px;
    display: block;
    letter-spacing: .05em;
    font-size: 120%;
    font-family: "trebuchet ms", "century gothic", arial, helvetica, sans-serif;
    }
    as opposed to:
    Code:
    padding: 7px 15px 7px 15px;
    3) Line height is set to normal for these elements in one sheet and not the other:

    Code:
    #loggedIn {
    float: right;
    clear: right;
    padding-top: 20px;
    width: 187px;
    line-height: normal;
    }
    
    #loggedOut {
    float: right;
    clear: right;
    padding-top: 20px;
    width: 100px;
    line-height: normal;
    }
    So change those three things (body line height, padding and line-height:normal) so that they are the same in both stylesheets and then things should be equal

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I can say is WOW Paul. You're the man! (as if you didn't already know that.)

    That's really amazing my friend. I was really about to give up. I was tired of looking. After you point it out, the differences seem almost obvious, but I know it was not an easy task.

    I appreciate you spending the time to find these Paul.

    I've seen programs that will allow you to open up two different files and it will pinpoint the differences between the two, I wonder if something like that would help in this situation? Have you seen or used anything like that?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Have you seen or used anything like that?
    No I haven't I'm afraid, I do it all by hand but I guess something like that would be useful for comparing code.

    You could probably have avoided the situation if you had used an external file for the common portions right from the start but I guess these changes can creep in anywhere.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You could probably have avoided the situation if you had used an external file for the common portions right from the start but I guess these changes can creep in anywhere.
    Yes, you're right I believe. That's what I'll do going forward definitely.

    Thanks again
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •