Group Admins

WordPress Troubleshooting and Support

Public Group active 1 year, 5 months ago ago

WordPress support from our community

Black Image on buttons

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

    any idea on why this site has a black rectangle when you hover over the buttons at the top.. its built on wordpress..


    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.

    Darin Roman


    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 >

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.