Mac book / firefox page scaling / rendering issue?

Discussion in 'Web Design and Development' started by andyjamesnelson, Dec 10, 2008.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hey,

    I have been doing the front dev for a site and I wanted to see how the page looks on my GF's mac book.

    I use an 20 Imac and the page works perfectly across Firefox / Safari and Opera.

    However, when I opened the page on the mac book (2.4 duo core 2 10.5.5) running Firefox 3.4 there seems to be some issues with the way its scaling or rendering parts of the page.

    I'm using a simple image replacement sprite technique:


    html:

    <a href="#">Place</a>

    .

    Css:

    a {
    display:block;
    text-indent; -9999px;
    background-image: etc
    background-position: top left;
    width:200px;
    height:200px;
    }

    a:hover {
    background-position: top right;
    }

    Ok so that all works fine on my com and my friends com across F / S and O browsers.

    The problem on the macbook and just this macbook so far as I can tell (have asked different friend with macbook to test and they report no signs of the issue) is that the width is being displayed just slightly wrong so that when one roll's over the link, the image changes but you can see a little of the other part of the image that should be hidden by the width: window thats created.

    Can anyone give me a hand with this? Its worrying because I don't want the site to look wrong for macbook users!!!

    Thanks for your help.

    Andy.
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    The text-indent property in CSS is intended to indent only the first line of text elements (not images) and is most commonly used to change the default indent for the P (paragraph) tag where text is involved. And, when used properly, negative values are allowed for a simplified method of relative positioning based on neighboring elements in your layout. But in your case -9999px is just plain too much - the MacBook with it's smaller screen but higher resolution might cause overlap or odd behavior in the scrolling viewport.

    So assign an ID to your anchor tag to uniquely indentify it, remove text-indent, add position: relative and use left and top to position that element as you see fit. That's the better solution and proper use of CSS for positioning block level elements. As an additional suggestion based on personal experience, if you wrap the anchor tag in DIV and assign the ID to that, it will be block level by default, so you could then remove "display: block" plus affect multiple links at one time with less code in one content area. Not to mention more efficient CSS and HTML.

    Also, make sure both source and rollover images are the same width and height, of course.

    Learn more about positioning of block elements here.

    -jim
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    It's possible a Firefox add-on interfering with the design. I've had it happen before. You can try starting Firefox in safe mode, which will disable the add-ons for that run and you can see if the issue persists.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Well, I said this was a possibility. In the past, I had the text area adjuster add-on (lets you adjust the size of a text area in forms) interfere with some page elements when hide/showing them, which created extra space on the page. I thought about the add-on possibility since it sounds like it isn't effecting all Firefox browsers.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    That's cool. I asked since you said it happened before, so out of curiosity I wanted to see if I had it installed so I could remove it, plus make the suggestion to clients who might be suffering the same issues. Thanks.

    -jim
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I searched the forum and found the thread. The specific name and version of the add-on was Resizeable Textarea 0.1d.
     

Share This Page