SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    0 Post(s)
    0 Thread(s)

    Trouble with Mouse Over Link "Buttons" & image colors in OS X


    I'm working on a site right now and I am experiencing 2 problems:

    1. The first problem is, I am trying to make a list of links, that're displayed as JPEG buttons. To do this I have tried a few things to get it to work in all browsers. The closest solution I have right now seems to work in Chrome & IE, but NOT in Firefox.

    Specifically the code looks like this:

    <li><a href="" id="myspaceOut" class="networkButton"><img src="" alt="MySpace" /></a></li>
    	.networkButton {
    		height: 63px; width: 68px;
    		padding-top: 63px;
    		color: #3b3e45;
    		font-size: 0em;
    		text-decoration: none;
    		.networkButton img { height: 63px; width: 68px; visibility:hidden;}
    	#myspaceOut { background: url("img/myspaceButton.jpg") top center no-repeat; }
    	#myspaceOut:hover { background: url("img/myspaceOver.jpg") top center no-repeat; }
    The idea here initially was to make give the link a top padding of the size of the image, display the background image, and then set the text to a very small size, that is the same color as the page background. This worked for some browsers, but not all.

    The second solution involved putting an image within the link that is set to the size of background image and then is hidden in the CSS. This worked for MORE browsers, but not all. Specifically Firefox.

    Attached is what the solution looks like in both Chrome BETA and Firefox 3.5 for OS X.

    Also visible is my second problem:
    Images are displaying differently for OS X (specifically the ones used for the rounded corners). Some images, colors, in some images, but not all of them. All the images used are JPEGs, no GIF or PNG, no transparency. Some colors mesh fine where others are drastically different. All were made in Adobe Photoshop CS3 on my PC. As far as I am aware they all had the same settings.

    However: Some were made with CTRL+Shift+C (copy all layers), while others were made by hand.

    Any insight into either problem would be greatly appreciated.
    Thanks in advance.
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    465 Post(s)
    8 Thread(s)
    To replace the link text with images, you're best off using an image replacement method, like those shown here and here.

    Just replace the H1s in those examples with LIs.

    As for the colors, there often is a difference between color display in Mac and PC. You could try limiting yourself to web safe colors, or perhaps Visibone... but with better monitors around these days, I don't bother any more. It's not just a question of Mac vs PC, but rather each of the many monitors against the other, as well as each user's color settings...

    Ultimately, you have to live with some differences.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts