Images as links without the little blue line

Hopefully you are using style sheets.

If you are, create a class that you will use for your image links, and in that
class have border: solid red 0px;

Then apply it like so: <img src="../images/home-body/footer/sales-ad.gif"
alt="Sales!" width="160" height="90" border="0" class="allImageBorder">

HTH

try this:

..noBorder {

padding: 0px;
border-style: none;
link-style: none;
border-thickness: 0px;
border: solid red 0px;


}

"erick crawford" <erick (AT) 29july (DOT) com> wrote

I am using style sheets and have attached a class to the the image
to no
avail. I tried your suggestion of giving the border a color and 0px
also to
no avail.

Here is a copy of the image and css.

Methinks you overcomplicate it. Try this in your CSS:

a img{border:none}

You don't need custom classes.

Gary

I've read thru the full lot of posts here and there's one thing I have to
point out. the 'border="0"' tag is valid under xhtml. I assume this is what
you are using. I have several sites up and running that use xhtml and they
all use the above format. It might have been something in your syntax but
seeing as you have sorted it, it's not a problem but it is a point that has
to be made.

Ax

DARKnet Web Design: http://www.darknetweb.co.uk
--

"erick crawford" <erick (AT) 29july (DOT) com> wrote

I have done quite a few searches from both Google and here in the DW forum
for my question and have given up. The answer may be out there (not still
watching X-Files) but I have yet to be able to find it.

My questions stems from wanting to make my page XML compliant for nothing
more than...well something and giggles. I have found that the statement
border="anything" is not valid when I did a validation check at the W3C
website (http://validator.w3.org/). Dutifully, I removed all border="0"
from all of my images in my gallery section, in which I used the Just So
Photo Album extension. I now have a blue line surrounding all of my
thumbnails.

I did some research at the W3C website and other respectable sites to
determine how to remove the little blue line (that we all seem to love so
much) and I tried several options to remove it. I put together the
following on my last attempt to no avail.

.img a:link {border: 0px; border-style: none; align: center; }

having used several variations and gone to the bare minimum on a test page
and test style sheet I have not been able to remove the blue line and
remaining compliant with XML.

Being XML compliant is not truly necessary, it is a personal effort to
further my abilities for something or other and giggles. Any help would
be
truly appreciated.

Cheers-
Erick

.oO(<::Ax::>)

I've read thru the full lot of posts here and there's one thing I have to
point out. the 'border="0"' tag is valid under xhtml.

Only in XHTML Transitional, not in Strict. The border-attribute is
deprecated for images (but still allowed for tables).

<http://lists.w3.org/Archives/Public/www-archive/2003Mar/att-0105/table.html>
(long)

Micha

.oO(Anton_FA)

Hopefully you are using style sheets.

If you are, create a class that you will use for your image links, and in that
class have border: solid red 0px;

Overkill. Too many classes only bloat the code. You can achieve most
things _without_ classes. CSS supports different kinds of selectors.

Micha

It's nice to get a quick answer to your question, but you'll be *so*
much more satisfied if you understand what happened and why folks like Micha
and Gary sensibly recommend against classes in this example.

A CSS rule like this ...

img {
border: none;
}

.... is quite different from something like this ...

..img a:link {
padding: 0px;
border-style: none;
link-style: none;
border-thickness: 0px;
border: solid red 0px;
}

.... and here's why. Note that in the first example, there is no dot ( . )
in front of the word "img". That makes this an "element selector."
Elements correspond directly to their namesake HTML tags (i.e., there is an
<img> tag, so the img selector refers to it). An element rule tells the
browser to render *all occurences* of a particular HTML tag a certain way.
In this case, you desire only to specify a 0 boundary on your all images.
You need simply to specify "none" or "0" for the border property. The first
example elegantly handles this for all images (you don't care about padding,
border style [since there is no border], link style, or border thickness
[since there is no border], so you don't need those properties).

The second example contains a dot. A dot makes a CSS rule a "class,"
which only refers to HTML tags that have a class attribute (which is why,
when using a class, you have to add "class='className'" to all your images).
There's nothing *wrong* with classes; but wouldn't you rather knock out all
the "global" styles first with elements, then fine tune with classes? Much
better all around: thinner, cleaner code in both your HTML and CSS; easier
to manage.

In addition, the second example contains a space, followed by an element
selector and pseudo-class. When you see a "coupled" rule like this --
selector [space] selector -- the space indicates an inheritance mechanism.
In this case, the rule refers not to images at all, but to all *anchors*
(<a> tags) that are children of <img> tags, which is impossible anyway,
since images can't contain children. This mechanism is often used, to style
one set of anchors from another set. For example, you may have hyperlinks
throughout the content of your page, but you want the navigation hyperlinks
to look different. In this case, you might put those <a> tags into a <div>
tag with a class attached to it ...

<div class="navigation">
<a href="..." etc. ... />
<a href="..." etc. ... />
<a href="..." etc. ... />
</div>

.... then, in your CSS, you could use something like this:

..navigation a {
/* properties here */
}

Again, note the dot, because "navigation" is a class, not an HTML tag.
The space between ".navigation" and "a" tells those particular <a> tags --
the ones that are children of the .navigation class (in this case, a
<div>) -- to look a certain way.


David
stiller ( at ) quip ( dot ) net

erick crawford wrote:

OK...Thank you very much for the help, both Anton and Gary.

This is what I used.

img { border: none;} and it worked perfectly. The "a img" did not but Gary
you were right in your thinks.

Thank you again.

Really? The "a img" worked for me in IE and Firefox. You're welcome.
Glad you sorted it out.


Gary

I have done quite a few searches from both Google and here in the DW forum
for my question and have given up. The answer may be out there (not still
watching X-Files) but I have yet to be able to find it.

My questions stems from wanting to make my page XML compliant for nothing
more than...well something and giggles. I have found that the statement
border="anything" is not valid when I did a validation check at the W3C
website (http://validator.w3.org/). Dutifully, I removed all border="0"
from all of my images in my gallery section, in which I used the Just So
Photo Album extension. I now have a blue line surrounding all of my
thumbnails.

I did some research at the W3C website and other respectable sites to
determine how to remove the little blue line (that we all seem to love so
much) and I tried several options to remove it. I put together the
following on my last attempt to no avail.

..img a:link {border: 0px; border-style: none; align: center; }

having used several variations and gone to the bare minimum on a test page
and test style sheet I have not been able to remove the blue line and
remaining compliant with XML.

Being XML compliant is not truly necessary, it is a personal effort to
further my abilities for something or other and giggles. Any help would be
truly appreciated.

Cheers-
Erick

I am using style sheets and have attached a class to the the image to no
avail. I tried your suggestion of giving the border a color and 0px also to
no avail.

Here is a copy of the image and css.

<body>
<a href="www.ebay.com"><img src="../Images/xhtml.jpg" width="88" height="31"
class="img" /></a>
</body>

..img a:link {

padding: 0px;
border-style: none;
link-style: none;
border-thickness: 0px;
border: solid red 0px;


}


"Anton_FA" <webforumsuser (AT) macromedia (DOT) com> wrote

Hopefully you are using style sheets.

If you are, create a class that you will use for your image links, and in
that
class have border: solid red 0px;

Then apply it like so: <img src="../images/home-body/footer/sales-ad.gif"
alt="Sales!" width="160" height="90" border="0" class="allImageBorder"

HTH