Group Admins

  • Profile picture of Steve

WordPress Troubleshooting and Support

Public Group active 3 months, 3 weeks ago ago

WordPress support from our community

Black Image on buttons

This topic contains 0 replies, has 3 voices, and was last updated by  Darin Roman 8 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1134

    Rahul
    Participant

    Folks,
    any idea on why this site has a black rectangle when you hover over the buttons at the top.. its built on wordpress..
    http://www.thedevilsgarage.com/

    #1804

    Steve
    Keymaster

    The hover images are taking forever to load. Once loaded the black box goes away and everything looks great.
    -Reduce the image sizes
    -combine them into a sprite.
    -load them earlier in the css file
    -add caching

    You can see them loading last and taking forever in Firebug.

    #1805

    Darin Roman
    Participant

    Rahul,

    Nice looking website! Great colors!

    Steve’s advice is right-on…the image file sizes are too large, and using a multi-state sprite for each navigation item would eliminate the black box effect. Also, consider optimizing the images to GIF or PNG 8 (these formats are best suited to flat solid color graphics and can reduce the file sizes considerably). If yours are PNG 24 with alpha-transparency they are surely too large. Check this out > http://www.underwaterphotography.com/PhotoShop/PhotoShop/help.html

    There are 2 other options and additional things you can do:

    1. Reduce the images’ vertical dimensions and use absolute positioning rather than keeping within the very high vertical area for the diagonal text. Keep the background as a full width image in the containing div and only swap out the area just around the text since that is what you are already doing.

    2. Use a CSS3 transform to skew the the markup’s anchor link text for the diagonal effect without using any images.

    http://www.zenelements.com/blog/css3-transform/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.