Hi everyone,

 

i recently did abit of rework on a site for a friend, and when i changed the buttons, i must have done something else, because each button now has a black box outline, yet the button itself (the image) does not have any black box.

 

My code for the buttons is:

 

 

#buttons {float: left;
width: 260px;
border-style: none;
}

 

<div id="buttons">
<a href="Index.html"> <img src="Home2.png" alt="Home"></a>
<a href="Author.html"> <img src="Author.png" alt="Author"></a>
</div>

 

 

 

Any help fixing this would be appreciated.

 

Reaper

Edited February 6, 201016 yr by Sam G
added [code] tags

Hi everyone,

 

i recently did abit of rework on a site for a friend, and when i changed the buttons, i must have done something else, because each button now has a black box outline, yet the button itself (the image) does not have any black box.

 

My code for the buttons is:

 

 

#buttons {float: left;
width: 260px;
border-style: none;
}

 

<div id="buttons">
<a href="Index.html"> <img src="Home2.png" alt="Home"></a>
<a href="Author.html"> <img src="Author.png" alt="Author"></a>
</div>

 

 

 

Any help fixing this would be appreciated.

 

Reaper

 

 

When wrapping anchors around images like that, it is the only element to by default have a border.

 

#buttons img {
border: none;
}

Edited February 6, 201016 yr by Sam G
added [code] tags

Hi everyone,

 

i recently did abit of rework on a site for a friend, and when i changed the buttons, i must have done something else, because each button now has a black box outline, yet the button itself (the image) does not have any black box.

 

My code for the buttons is:

 

 

#buttons {float: left;
width: 260px;
border-style: none;
}

 

<div id="buttons">
<a href="Index.html"> <img src="Home2.png" alt="Home"></a>
<a href="Author.html"> <img src="Author.png" alt="Author"></a>
</div>

 

 

 

Any help fixing this would be appreciated.

 

Reaper

 

Change this:

 

<a href="Index.html"> <img src="Home2.png" alt="Home"></a>

 

to this:

 

<a href="Index.html"> <img src="Home2.png" alt="Home" border="0"></a>

Edited February 6, 201016 yr by Sam G
added [code] tags

correct me if I'm wrong (im new to strict html)

 

But border attribute won't validate with a strict doctype. Will it?

correct me if I'm wrong (im new to strict html)

 

But border attribute won't validate with a strict doctype. Will it?

would this work in your css

 

#buttons img a {
border: none
}

Edited February 6, 201016 yr by Sam G
added [code] tags

correct me if I'm wrong (im new to strict html)

 

But border attribute won't validate with a strict doctype. Will it?

 

Im pretty sure it wont validate however it is best practice to use css regardless.

would this work in your css

 

#buttons img a {
border: none

}

 

change round the a and img

#buttons a img {

Edited February 6, 201016 yr by Sam G
added [code] tags

you're right Helen it wouldn't validate in strict so

 

Change this:

 

<a href="Index.html"> <img src="Home2.png" alt="Home" border="0"></a>

 

back to this:

 

<a href="Index.html"> <img src="Home2.png" alt="Home"></a>

 

 

and add this into your css code:

 

img { border:none; }

 

 

What this will do will make sure that none of your images ever have a border unless you have told them to through a class or ID.

Edited February 6, 201016 yr by Sam G
added [code] tags

When wrapping anchors around images like that, it is the only element to by default have a border.

 

#buttons img {
border: none;
}

 

...

Edited February 6, 201016 yr by Sam G
added [code] tags

...

 

Its basically personal preference/coding style as to wether you do the full set of elements or a short handed version.

I generally do the full list but it depends on the HTML layout and your style of CSS.

Its basically personal preference/coding style as to wether you do the full set of elements or a short handed version.

I generally do the full list but it depends on the HTML layout and your style of CSS.

 

touché

touché

 

 

Didnt mean it in any way other than pointing out that there is a huge ammount of variation in style/preference of coding technuiqes, just to clarify.

 

Just defining #class img would result in unecessary code additions to the style sheet in the event you was to want an image (Edit, with a border) within the class that didnt have anchor tags wrapping it. in my opinion But maybe thats just a bad/unecessary style i have picked up over time.