Gallery Issues

[mwdewitt]

Hey, everyone. I need some help again. Okay, so, I am creating a gallery for my personal website and I am having some issues.

Here is my website: http://www.mwdewitt.com/gallery/

Right now, I have each image in the gallery wrapped in a div. I would like for the border on each image to be black and then turn hot pink on rollover. As you can see, I am not getting that effect. Instead it adds a second border within the first. Help!

Also, I have all my images wrapped within another div. For some reason, if I try to add padding, it only adds it to the top, left, and right, but not the bottom. Help!

Here is the CSS code from the Stylesheet for the gallery:

/*

Gallery

*/



div.gal {

background: #EBEBEB;

float: left;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}



div.img {

margin-right: 4px;

margin-bottom: 4px;

border: 10px solid #000000;

float: left;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}



div.img a:hover {

border: 10px solid #FF0082;

}



div.gal .inside {

padding: 14px;

}

I know I am doing something wrong. I just do not know what. Thank you in advance for any help that you can give!

[mwdewitt]

Thank you for your help, but the amount of HTML code is 5,745 characters too long for me to put it into a message on CSS-Tricks. Sorry. And I tried putting 14 pixels on all sides and it still does not do the bottom correctly. And try the link again!

[joshuanhibbert]

What @stevencrader said. Change

.img a:hover {

border: 10px solid #FF0082;

}

to

.img:hover {

border: 10px solid #FF0082;

}

[TheDoc]

@cnwtx – why should he take that out? It’s a standard reset. Some people don’t use it, but there is no reason to take it out. Others, like myself, start every project like that.

[mwdewitt]

Thank you for your help, guys, but it is still acting wonky. Check the link again and you will see what it is doing now. It is still placing the neon pink border within the black one, but to a greater extent now. Sigh.

[TheDoc]

If you do what @joshuanhibbert said it should work perfectly.

Change this:

.img: hover {

border: 10px solid #FF0082;

}

To this:

.img:hover {

border: 10px solid #FF0082;

}

[mwdewitt]

Oh, I didn’t see that little “space” there. Good eyes! It’s fixed. Thank you everyone for dealing with my stupidity. This is why I should not be a programmer.

[TheDoc]

No worries! It’s the small things that are the easiest to overlook.

[mwdewitt]

Tell me about it. I crashed my website a few days ago and it was all because I forgot to close a “div.”

[Author]

Posts