SitePoint Sponsor

User Tag List

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

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

    Hi,

    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:

    HTML
    Code:
    <li><a href="" id="myspaceOut" class="networkButton"><img src="" alt="MySpace" /></a></li>
    CSS
    Code:
    	.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
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •