My websites look wrong in Mac

Discussion in 'Web Design and Development' started by madmacman, Dec 21, 2007.

  1. madmacman macrumors newbie

    Joined:
    Dec 21, 2007
    #1
    Hi all, I've just got my 1st Mac, last night, and wasn't surprised to see my site looked wrong on text resize. I haven't a clue about hacks or Macs. My homesite is
    http://www.zealmonline.co.uk The WC3 said CSS validated and the HTML as 4001 transitional. I'd be so grateful for advice. I don't know where to start.
     
  2. Eidorian macrumors Penryn

    Eidorian

    Joined:
    Mar 23, 2005
    Location:
    Indianapolis
  3. madmacman thread starter macrumors newbie

    Joined:
    Dec 21, 2007
    #3
    Last night I installed Firefox and Camino; Safari was already installed. It's a Macbook laptop and 2ndhand. Thanks for replying already.
     
  4. Eidorian macrumors Penryn

    Eidorian

    Joined:
    Mar 23, 2005
    Location:
    Indianapolis
    #5
    Great, I have to get IE6 working in OS X again.
     
  5. yellow Moderator emeritus

    yellow

    Joined:
    Oct 21, 2003
    Location:
    Portland, OR
    #6
  6. Eidorian macrumors Penryn

    Eidorian

    Joined:
    Mar 23, 2005
    Location:
    Indianapolis
    #7
  7. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #8
    Looks OK in Safari on Mac.

    Does not look too good in Firefox in windows.

    Part of the job of designing a web site is to ensure it is not messed up in different browsers and OS.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Nothing "looks" wrong. Can you elaborate on what's different to you?

    As a note, valid code does not mean it accomplishes what you wanted it to, it just means the code is structurally sound. Valid HTML and CSS can still look horrible, but still a good goal to have validation of course.
     
  9. Eidorian macrumors Penryn

    Eidorian

    Joined:
    Mar 23, 2005
    Location:
    Indianapolis
    #10
    I tried Safari, FireFox, and Internet Explorer 6.0.

    It looks fine in OS X and in Windo...err Darwine.
     
  10. madmacman thread starter macrumors newbie

    Joined:
    Dec 21, 2007
    #11
    Thanks all for replies. Don't really understand. Should I be using strict doctype? If so, I'll try to find out how it differs from transitional.
     
  11. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #12
    “my site looked wrong on text resize”

    What exactly looks wrong?

    It looks fine to me.
     
  12. madmacman thread starter macrumors newbie

    Joined:
    Dec 21, 2007
    #13
    Ellpa, the nav thingy on the left overlaps instead of wrapping. Hope I've described it properly. BTW When I've looked at other people coding on Macs they seem to have voice-family-inherit stuff and I don't know what it means.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    I tried it on Firefox and IE7 on Windows and there's no overlap. The voice-family stuff is likely there as a hack of sorts. Take a read on Eric Meyers' site for a more detailed explanation of the voice-family.
     
  14. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #15
    Voice family inherit is hack to target internet explorer.

    The better way to handle IE is to use conditional comments.

    Code:
    #leftnav ul { list-style-type:none;  margin:0; padding:0;line-height:1px;}
    The other browsers you tested on must "handle" text resizing by ignoring the fact the line height is set to 1 pixel.

    WebKit (Safari) respects this setting, so when the text in the navigation list wraps to a new line it calculates (because you told it to!) 1px as the height for the previous line (the actual line height is obviously quite a lot taller than 1px) – hence the overlap.

    Of course this all makes for perfectly valid CSS, as there is nothing invalid pre se about specifying a line height of one pixel. It is just not very sensible.

    By the way, Webkit is one of the a leading browsers for standards support, so if a page doesn't look right in Safari, you've generally done something wrong, not the browser.
     

    Attached Files:

  15. madmacman thread starter macrumors newbie

    Joined:
    Dec 21, 2007
    #16
    Thank you, elppe (sorry for spelling your name wrongly before). I'll read EM's piece. BTW I have no recollection ever of putting line-height at 1px. Checking it out now.
     
  16. madmacman thread starter macrumors newbie

    Joined:
    Dec 21, 2007
    #17
    Elppa, can't thank you enough for poring over my code enough to spot what was wrong. Owe you a drink, several drinks. Doesn't overlap now. I've looked in FF, O and IE 7, 6, 5.5 in W, and Safari on Mac. Thank you mega.
     

Share This Page