border padding problem

[ZeptOr]

On a specific page of my website, I have a couple of thumbnails pictures that I want a padded border around. My CSS seems to work fine in Firefox, but not in IE. The URL is here:

http://www.alexthegood.com/main/digital.html

My CSS that i used to put the padded border is this:

img.frame
	  {
		border: 1px #406B7C solid;
		padding:4px;
		}

	  img.frame:hover
	  {
		border: 1px #406B7C solid;
		padding:4px;
                }

and if you want to see my other CSS, although its messy, its here:

http://www.alexthegood.com/main/atgStyles.css

[Zenax]

I really think that you don't need the img.frame:hover CSS.

Try Removing it and see what happens!

Regards,
Zenax

[Cubeform]

Instead of styling the <img /> elements, you style the <a /> elements that contain them. In order to not screw up the rest of your website, you'll need to apply a class to the <a /> elements.

a.frame
	  {
		border: 1px #406B7C solid;
		padding:4px;
                display:block;
          }

a.frame:hover
	  {
		border: 1px #406B7C solid;
		padding:4px;
          }

Note the display:block attribute that needs to be applied.

It works in Firefox.

[ZeptOr]

Thanks cubeform, that seemed to work

btw, what program are you using in that picture?

[dest581]

The Web Developer toolbar HTML editor, it looks like. It's an extension for Firefox.

Lets you edit an already existing HTML page, so you can see how changes would affect it immediately.

[ZeptOr]

where do you download that? it sounds more useful than notebook

[Cubeform]

I use the Web Developer extension for Firefox, and the FireBug JavaScript debugger (which also has an edit HTML feature).

You can get FireBug 1.0b at http://getfirebug.com/ and the web developer extension at https://addons.mozilla.org/firefox/60/.