Why does Safari keep messing this up?

Discussion in 'Web Design and Development' started by AlBDamned, Jan 28, 2008.

  1. AlBDamned macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #1
    See here: the same navigation bar in Safari 3 and Firefox 2 on the Mac.

    Safari messes up the line, whereas Firefox renders it perfectly. The nav bar is HTML. Safari also messes up the design on another site I work on and it's seriously annoying.
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Looks like a width, padding, margin type of problem possibly. Would have to see the HTML and CSS for it to know for sure.
     
  3. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #3
    Yeah it's definitely to do with the width. I'm just keen to know why it's handled differently in the two browsers.
     
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    Impossible to know without seeing HTML. It's like diagnosing someones car problem over the phone.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    If you test more browsers you'll probably find more differences.
     
  6. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #6
    Ok here you go (url blanked out). it's pretty crude I know, but I've built my site on Typepad/Movable Type so this is workaround to having a nav bar. :eek:

     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I'd personally do this with CSS rather than nbsp and images for border lines.

    Non-breaking spaces can be accomplished using CSS with the whitespace property (e.g., #wrapper p { whitespace: nowrap; }). Then use paddings and margins on each item and borders on each item for the vertical lines, and then a border for the whole section for the horizontal lines above and below.
     
  8. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #8
    I'd love to do that but it's way beyond my skills unfortunately :eek:
     
  9. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  10. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #10
    Here, it's using the three-column right layout. Thanks for looking at this. :)



     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Not a problem, here's one way. Adjust as need be. You may be more comfortable using border widths in px rather than em. It's just my way. Let me know if you need anything explained or deciphered.

    HTML:
    HTML:
    <ul id="navbar">
      <li class="first"><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
      <li><a href="#">Linkage</a></li>
    </ul>
    
    CSS:
    HTML:
    #navbar {
     margin: .3em 0; padding: .5em 0;
     font-family: sans-serif;
     white-space: nowrap;
     border-top: .12em solid #aaa;
     border-bottom: .12em solid #aaa;
    }
    #navbar li {
     display: inline;
     margin: 0; padding: 0 2em;
     border-right: .12em solid #000;
    }
    #navbar li.first {
     border-left: .12em solid #000;
    }
    #navbar li a {
     color: #00a; font-weight: bold;
     text-decoration: none;
    }
    
     
  12. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #12
    Nice Work :)
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Thanks, I figured I should back up my words so threw it together. Actually came out simpler than I thought.
     
  14. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #14
    Wow, thank you. I think I can see whereabouts to replace the html. Where in the CSS would I put the new CSS code? At the moment it doesn't have a "navbar" reference?

    Also, I'm using "|" as separators. Will this have those or do i need to add them some how?

    Thanks again for taking time to do that, really wasn't expecting such a response in this thread. :)
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    The CSS here can be dropped anywhere in your CSS file really. The selectors are specific enough that they shouldn't conflict with any others.

    The "|" is being accomplished as a border on the li tags. I'm attaching (hopefully) a partial snapshot of what the code accomplishes.

    How could you expect less from MacRumors? :D
     

    Attached Files:

  16. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #16
    Genius. I'll try it and let you know how things go :)

    Edit: Ok something's not quite right. The below is what I have now.

    Also, am I doing the links right? This is an example of how I filled in the lines:

    <ul id="navbar">
    <li><a href="#http://www.mywebsite.com>">Home</a></li>
     

    Attached Files:

  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    Close, the pound (#) needs to go because that's only used for links on the current page. Also there was an extra > toward the end. Here's what it should look like.
    HTML:
    <li><a href="http://www.mywebsite.com">Home</a></li>
    That may have been enough to throw off the CSS so lets see if fixing the links resolves the problem.
     
  18. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #18
    Ok I'm up to here now. I'd put the CSS in the wrong template (duh).

    Currently the bottom border is thick, and the RSS logo and underlying link are not showing for some reason. These tweaks aside it looks much better, though. Much better!

    Edit: uploaded the right picture and corrected the links in the html...
     

    Attached Files:

  19. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #19
    Yeah on border thickness I eluded to that when I first gave the code. Most people use px rather than em. In the CSS where it defines border, change the .12em portions with 1px and you'll get a thinner line.

    Not completely sure on the logo issue you mention, and what you mean by "underlying link." The section for that should be something like,
    HTML:
    <li><a href="http://www.mywebsite.com/feed"><img src="rss.png" alt="RSS Feed" /></a></li>
     
  20. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #20
    Inching closer to the final thing. Now have the borders sorted (thanks for the PX tip!).

    Still slightly out of line, no left-hand border as yet, and for some reason the RSS logo on the far right just isn't displaying.
     

    Attached Files:

  21. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #21
    For the left border make sure the first link has the class 'first'
    HTML:
    <li class="first">....</li>
    For the RSS logo, I'm not real sure. Make sure you have the source of the image right. If you can't see anything wrong post the li tag with that logo here and I'll see if I can see anything that might be causing it. Also be sure to quote attributes (e.g, border="0"). I'm heading to bed now so won't be able to respond till morning.
     
  22. AlBDamned thread starter macrumors 68030

    AlBDamned

    Joined:
    Mar 14, 2005
    #22
    A big thanks to Angelwatt for this. I think it's just about right. There's still a slight difference in alignment between firefox and safari, but I think this is about as good as it will get (firefox render is perfect).

    The RSS logo wasn't displaying, but I re-wrote the link/code in the browser and it worked second time around. Also tweaked some of the padding to 2.33 to even it out. Looks good, and much less crude underneath. :)
     

    Attached Files:

Share This Page