Stuck with extra spacing on image links.

**twiggy** · 03-19-2007, 11:51 AM

Hey folks Im currently putting a website together for someone and they want certain images to act as a menu. So using the images to link to other pages causes me a problem.

In dreamweaver it adds a big blue box around it and on web browsers spaces the image further apart from what I set in the CSS.

The CSS

Quote:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #700101;
}

#content {
background-color: #FFFFFF;
background-image: url(../images/bk.gif);
background-repeat: repeat-x;
width: 980px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: #FFFFFF solid 10px;
}

.mainlogo {
margin-top: 50px;
padding-bottom: 20px;

}

#nav {
padding-top: 55px;
padding-left: 49px;
text-decoration: none;
}

#navitem {
padding-left: 82px;
text-decoration: none;
}

The XHTML

Quote:

Any ideas?

Thanks Mark

**tripy** · 03-19-2007, 11:58 AM

To remove the blue border, add border="0" to your imag tags.

Now, for the space, you have a

Code:

    padding-left: 82px;

in your css, so, it will pad the content of each #navItem to 82px on the left. that could be your problem.

Just 1 note.
Id's are meant to be unique in the page. If you want to specify css for a set of element, use a class.
Just replace the #navitem with .navitem in your css section, and replac id= with class= in your img tags.

That should does it.

**twiggy** · 03-19-2007, 12:06 PM

The border 0 fixed it fine. Thanks alot!

The 82px left is to add space between each menu image as the person I'm doing it for wants them in a certain place and its the best way of doing it for now.

Dam my CSS skills are so rusty at the moment I use to able to run pages of with out even thinking!

To much time in photoshop I think.

**tripy** · 03-19-2007, 12:49 PM

Then don't use a padding, but a margin.
Padding is inside the container, margin is outside the container.

In your case,it means that if you use padding, you will have a bit of space which stays clickable.
If you use margin, the space between the images will not be clickable.

Quote:

To much time in photoshop I think.

Yep, looks like it !

**LadynRed** · 03-19-2007, 02:41 PM

Quote:

To remove the blue border, add border="0" to your imag tags.

The better approach is to put border: none in your CSS:

img{
border: none;
}

A better approach, and a more semantic and accessible solution is to put the image in as a background of the <a> tag - JUST the image - no text, then use REAL text in your HTML, adjust spacing in your CSS.