CSS problem with image links

theafroguy · 03-08-2008, 06:22 AM

Hi guys. I'm teaching myself CSS at the moment for me very own site (yay), but I'm having a couple of problems with the little gritty bits.

The main problem is that the images with links appear normal in Safari, but in Firefox they have borders as well as the regular < p > link underlines as well.

Ideally I'd like to give them a thin border, with no underline, in every browser. Any CSS gurus out there than can help?

David-B · 03-08-2008, 06:49 AM

Hey, not quite sure what you want?

Your images should have no borders at all? And you want a border around your <p> tags?

For the images, you just put in: img { border: none; } in your stylesheet and if you want to add borders to a specific image, you just type the div or class name first and then img. Like:

You want borders around your <div id="gallery"> images, you just add:
#gallery img { border: 1px solid black; } in your stylesheet.

and for the underlines on your links, type a { text-decoration: none; } anywhere in your stylesheet, as well.

Hope it's understandable, good luck

Sono Juventino · 03-08-2008, 07:56 AM

You would get better help if you provided us with a link. We can't picture ourself what you want to do.

MediaMisfit · 03-09-2008, 08:41 PM

Hey guys. I taught myself CSS form the W3C site. They have some great example though there is a lot of stuff you have to learn on your own.

Like CSS in Firefox differs from IE and bla bla bla.

A GREAT TOOL! That will save you a TON of time on the frame work is Blueprint from Google. It basically is a bunch of CSS files that have different elements (columns, rows, layouts) that your going to use in your frame work. It will help you out a lot and save you a lot of time.

http://code.google.com/p/blueprintcss/

Creadiv · 03-10-2008, 08:56 AM

If you want to format a link to have no underlines you can do the following.

Code:

a , a:hover , a:visited , a:active
{
       text-decoration: none;
}

If you want to format your images so they do not have borders around them you can do the following.

Code:

img
{
      border: none;
}

theafroguy · 03-14-2008, 05:02 AM

Agh, I completely forgot I posted this.

I solved the problem by removing the images from the <p> tag. Thanks for your help anyways guys. Site should be up soon ^_^

03-08-2008, 06:22 AM	#1
theafroguy Designer Join Date: Mar 2008 Posts: 26	CSS problem with image links Hi guys. I'm teaching myself CSS at the moment for me very own site (yay), but I'm having a couple of problems with the little gritty bits. The main problem is that the images with links appear normal in Safari, but in Firefox they have borders as well as the regular < p > link underlines as well. Ideally I'd like to give them a thin border, with no underline, in every browser. Any CSS gurus out there than can help?

03-08-2008, 07:56 AM	#3
Sono Juventino Football geek Join Date: Feb 2008 Location: Oslo, Norway Posts: 98	You would get better help if you provided us with a link. We can't picture ourself what you want to do. __________________ http://juvenorge.com \| Personal site (Comming soon)

03-10-2008, 08:56 AM	#5
Creadiv Designer Join Date: Jan 2008 Posts: 50	If you want to format a link to have no underlines you can do the following. Code: a , a:hover , a:visited , a:active { text-decoration: none; } If you want to format your images so they do not have borders around them you can do the following. Code: img { border: none; } __________________ My Sites: My Blog - This is my blog. The IP House - What's My IP Address?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode


Welcome to our Graphic Design Forums! Your Design Forums has active graphic design forums where community members discuss graphic design related topics.

03-08-2008, 06:49 AM	#2
David-B Designer Join Date: Jan 2008 Location: Denmark Posts: 61	Hey, not quite sure what you want? Your images should have no borders at all? And you want a border around your <p> tags? For the images, you just put in: img { border: none; } in your stylesheet and if you want to add borders to a specific image, you just type the div or class name first and then img. Like: You want borders around your <div id="gallery"> images, you just add: #gallery img { border: 1px solid black; } in your stylesheet. and for the underlines on your links, type a { text-decoration: none; } anywhere in your stylesheet, as well. Hope it's understandable, good luck

03-09-2008, 08:41 PM	#4
MediaMisfit Designer Join Date: Jan 2008 Posts: 70	Hey guys. I taught myself CSS form the W3C site. They have some great example though there is a lot of stuff you have to learn on your own. Like CSS in Firefox differs from IE and bla bla bla. A GREAT TOOL! That will save you a TON of time on the frame work is Blueprint from Google. It basically is a bunch of CSS files that have different elements (columns, rows, layouts) that your going to use in your frame work. It will help you out a lot and save you a lot of time. http://code.google.com/p/blueprintcss/

03-14-2008, 05:02 AM	#6
theafroguy Designer Join Date: Mar 2008 Posts: 26	Agh, I completely forgot I posted this. I solved the problem by removing the images from the <p> tag. Thanks for your help anyways guys. Site should be up soon ^_^