• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Need help with a quick image adjustment for an avatar border

ArnyVee

Well-known member
#1
Hey guys and gals, I hope someone can help me on a quick request. I need to add a customized border around some avatars on a site that my daughter and I are building :D

We have large avatars (200 x 200) that members can select from and I added a small border on them. But, we thought it would look nicer (and classier) if we used a 'frame' image as the border.

So, since it is a United States History Forum, I figured that a gold-ish frame like this would work: http://www.webdesignerwall.com/demo/decorative-gallery/5b_gallery-gold-frame.html#

Can someone create the image so that I can use it as a border with a transparent 200x200 space in it to display the avatar?
 

ArnyVee

Well-known member
#7
Yes sir :)

Since the avatars are mostly pictures of oil paintings, I wanted to give them a nice classy (museum-like) look. :D
 

Xarcell

Well-known member
#11
Unless I'm misunderstanding you, instead of using that image posted above, you could achieve the same effect with just CSS and HTML. This isn't exact, but off the top of my head you could use something like this:

Code:
border: 8px ridge #DAA520;
 

Kim

Well-known member
#12
You would need to seek permission to use that exact image Arny, or else if you have a photo that you have taken of a gold frame, or one that is copyright free, I am happy to reshape it for you into what you want.

:)
 

ArnyVee

Well-known member
#18
So, I just uploaded the frame pic and it looks perfect on Chrome, but missing something on IE. If you see the first attachment, you'll see that with 25px padding in the CSS it centered it perfectly. But the second attachment in IE, it seems to cut off a piece of the frame. Any suggestions on what I should do to ensure that it displays correctly on IE?
 

Attachments

ToDie4

Well-known member
#20
So, I just uploaded the frame pic and it looks perfect on Chrome, but missing something on IE. If you see the first attachment, you'll see that with 25px padding in the CSS it centered it perfectly. But the second attachment in IE, it seems to cut off a piece of the frame. Any suggestions on what I should do to ensure that it displays correctly on IE?
It'll be because you've used padding, IE is a demanding beast, better to locate css for thread display avatar and use text-align:center (or margin: 0 auto)in the css
If you can link me to the page I can check it and tell you for sure. :)