Home/ Questions/Q 3999356
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:38:49+00:00

I’m creating a special UI control using HTML/CSS to mimic the Windows 7 Control

  • 0

I’m creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I’ve got the layout right and now I’d like to add some cosmetics to it.

As seen here, there is a gradient that appears when you hover over the button with your mouse.

http://m.cncfps.com/zack/files/this-control.png

Now, you can see here that I’ve got the layout done. I’d like to add a :hover effect to the whole div item with a background image.

Currently, here is what I have for the CSS- yet it doesn’t work. No image shows up in IE8, or FireFox

EDIT: It works in Chrome, but not in FireFox or IE.

#cp .cp-item:hover
{
    background:url(images/hoverbg.png) repeat-x;
}

It does however work with a background-color rather than an image.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • There’s nothing (relevant) wrong with your CSS.
    • The path to your image is correct.

    It already works in Chrome.

    Chrome seems to be more intelligent (or lenient) than other browsers. If I inspect the page, it’s inserting stuff:

    enter image description here

    It doesn’t work in other browsers because you don’t have a proper page structure (no doctype, no <html> tag, no <body> tag, etc) – your page doesn’t validate, and the other browsers do not “like it”. I don’t know the exact reason why it doesn’t work with the other browsers – I imagine the reason is either an implementation detail, or buried within the W3 spec.

    This works in “all browsers”:

    Live Demo
    (I’m using the <base> tag to make the paths work)

    It’s your exact code, wrapped in typical boilerplate, with the addition of the <base> tag.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<base href="http://toro.azwestern.edu/~zbl/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<link rel="stylesheet" href="style.css" type="text/css" />

<div id="cp">
    <div class="cp-item"><span>
        <div class="cp-item-icon"><img src="images/syssec.png" title="System and Security" /></div>
        <div class="cp-item-content">
            <h4>System and Security</h4>
            <ul>
                <li><a href="#">item</a></li>

                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>
    </span></div>
</div>

</body>
</html>
    • 0