SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Objectman's Avatar
    Join Date
    Jun 2002
    Location
    Perth, Western Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile little white gap below header on macs

    Designing with web standards is very very hard. And heart-breaking!

    I just did this site which the client loves http://www.taylormedia.com.au/index.htm

    She wants to go live, but it breaks my heart not to tell her that the little white space beneath the tabs (on her Mac) isn't meant to be there. You know how you show your client the job and don't say anything, hoping they won't notice? Well I did - and she didn't - and now I feel the stab of guilt.

    I designed it on a PC starting with Alistapart.com's sliding doors tabs tutorial.

    Can any of you more advanced users (I think I'll forever be a newbie) see what's going on?
    Last edited by Objectman; Nov 2, 2005 at 13:08. Reason: nobody viewing my post - still learning how to post really

  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,

    You are leaving a lot to chance when you want pixel precision as you have no heights specified for the lists,anchors or ul,s and you have em font-sizes which may be rounded slighly differently also.

    I would make sure that the ul is placed exactly on the baseline and let its height go up from there. Add position:relative to the header and then absolutely position the menu on the bottom of the header. This will also have the added benefit of still looking ok when the text is increased in size unlike your existing layout which separates company with the header.

    Also remove the padding and let the line-height centralise the text.

    Unfortunately ie doesn't quite know where the bottom is so we have to adjjust for ie i'm afraid.

    I have this working in all the major browers using the following code.

    Code:
    #header {
      float:left;
      width:100%;
      height:115px;
      background:url("http://www.taylormedia.com.au/images/header_bg.gif") no-repeat left bottom;
      font-size:93%;
      margin:0px;
      padding:0px;
      line-height:normal;
      position:relative;
      }
    #header h1{
      font-size:2.7em;
      color:#fff;
      line-height:normal;
      padding:18px 0 0 0;
      margin:0px;
      }
    #header h2{
      font-size:0.9em;
      color:#eee;
      line-height:normal;
      padding-bottom:10px;
      padding-left:20px;
      margin:0px;
      }
      
    /* tab navigation */
     
    #header ul {
      margin:0;
      padding:0px 10px 0;
      list-style:none;
      height:2.1em;
      line-height:2em;
      position:absolute;
      bottom:0; 
     }
     * html #header ul{bottom:-1px}
    #header li {
      float:left;
      background:url("http://www.taylormedia.com.au/images/tab_left.gif") no-repeat left top;
      margin:0px;
      padding:0 0 0 9px;
      }
    #header a {
      float:left;
      display:block;
      background:url("http://www.taylormedia.com.au/images/tab_right.gif") no-repeat right top;
      padding:0px 15px 0px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {
    float:none;  
    color:#5a7cd2; /* blue from header_bg.gif */
      }
    /* End IE5-Mac hack */
    #header a:hover {
      text-decoration : underline;
      color: #c60; /* red */
      }
    #header #current {
      background-image:url("http://www.taylormedia.com.au/images/tab_left_on.gif");
      }
    #header #current a {
      background-image:url("http://www.taylormedia.com.au/images/tab_right_on.gif");
      color:#4e5bb1;
      text-decoration : none;
    padding-bottom:1px;
      }
    I assume you were talking about safari on the mac (which I don't have) but heres a browerscam shot using my code above.

    (image 34)
    http://www.browsercam.com/public.aspx?proj_id=186588

    You may need to make the odd tweak but the theory is sound

    Hope that helps

  3. #3
    SitePoint Member Objectman's Avatar
    Join Date
    Jun 2002
    Location
    Perth, Western Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thank YEW Paul. It works great on my PC. I'll get my buddy to check that on his macnitosh. That's ON his macintosh, not IN it.

    Your gracious help will be rewarded, I'm sure.
    Edwin (aka. Objectman) is a
    Web Developer and filmmaker.

    Why don't you just Follow Me?

  4. #4
    Made with a Mac! philm's Avatar
    Join Date
    Sep 2001
    Location
    Portsmouth, UK
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks ok on Safari and Firefox, just don't ask about what it looks like in IE on the Mac...

  5. #5
    SitePoint Member Objectman's Avatar
    Join Date
    Jun 2002
    Location
    Perth, Western Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool bananas. Thank you. Another small victory that the client prolly won't notice. I better go help someone in a forum. Y'know - what goes around . . .


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
  •