image link blue border

[khaki]

Hi everyone!

hmmm... I'm stumped :confused:
I have an image that I use as a link.
I used to have border=0 to remove the blue link-border, but w3c says it's an error (HTML validator).
So I removed it.

<a href="http://www.page1.htm"><img src="image1.gif" width=50 height=50 alt="whatever"></a>

So now I am trying to get rid of it using CSS.
I have a lot of other links (text links) on the page... so I don't want to clear them all... just this one image.

I have an external stylesheet and would like to assign it there.

So... how do I stop being so blue? :eek:

thanks as always...
;) k

[havik]

Weird that border="0" won't work. It does on my comp. Anyways, try this in your style sheet:

img {
border: none;
}

it'll remove borders from the images. If you only want it done on certain pages, then put it within style tags in the head section.

Havik

[AdamGundry]

w3c says it's an error (HTML validator)
The border attribute is deprecated for images as of HTML 4.01. Thus it is incorrect HTML Strict, but should probably validate as HTML Transitional, and should work in most browsers. It's always best to be standards compliant, however, and use CSS.

Adam

[havik]

Ah, I see now. Guess I should've read the entire post carefully first. But the code posted earlier is the solution, or at least should be.

Havik

[khaki]

YIKES!

Havik... I am such a doof!

I've been using 0 (zero) as though I have never coded before!
(sure... I'm somewhat new to CSS... but seriously! ugh!)

OK. Well... my embarrasment is a bit lessened by my relief that I can finally move past that stupid issue...

so..
I'll just say thanks for slapping me back to my senses :rolleyes: .

oh.. and border=0 works... but the w3c has been bouncing it back at me all day as an error. I took it out... now it loves me again (the w3c must be a male :rolleyes: lol). I can't win!

undisputed airhead...
;) k

[spufi]

Hmm, interesting since I use border:0px; in a external style sheet and I don't get any error. I've been playing around with it to see if I can recreate an error with it and I'm getting nothing.

[khaki]

well spoof... i did have problems all day today... and i was testing my pages with the style "internal" (just for the testing). Does that even matter???

Also... maybe i left the "px" off... I don't remember anymore :rolleyes: .

Works now though :) .
Maybe I'll test border:"0px" tomorrow... and report back.

CSS is no javascript... but it can spin me in a circle or two every now and then :( .

if (border:"0px") = OK then
khaki = :eek: k
else
khaki = ;) k
end if

[spufi]

Originally posted by khaki
well spoof... i did have problems all day today... and i was testing my pages with the style "internal" (just for the testing). Does that even matter???

Ah, I'm willing to guess that testing it internally would make a differnece. Why? Because it is able to know what version of HTML/XHTML you are testing against. If it's done externally than I'm not sure what version it validates against. I know I was getting a message that I didn't quite understand, but I think it was just saying that I should tested it with the HTML included.

[havik]

All this works, it just depends on which method you want to use.

img {

border: none;

OR

border: 0px solid;

OR

border-color: color of the background its on;

}

Also, just repeating earlier. If you have this:
border: 0;
Nothing should happen because your not specifying what type of border you want, even though it'll read it as 0 pixels.

Havik

[spufi]

Originally posted by havik

Also, just repeating earlier. If you have this:
border: 0;
Nothing should happen because your not specifying what type of border you want, even though it'll read it as 0 pixels.

Havik

Well the code below is what I just put into my XHTML 1.1 page and validated. This code also shows up correctly in IE 5 and 6 and Mozilla 1.3.

<style type="text/css">
img { border:0px; }
</style>

[havik]

that's what I meant, nothing will happen. Unless it's just on my browser, but if you wrote:

border: 1; // or whatever number

then still no border will appear because no border type has been specified.

So border: 0px; will do what you want it to do.

Havik

[jeffmott]

border: 1; // or whatever number
then still no border will appear because no border type has been specified.Normally you would be correct, and even according to the specs you would be correct (border-style defaults to none, so no borders will be visible unless the border style is set), however, I believe images are special cases where most browsers seem to ignore this rule (I believe table may also be another exception). So img { border: 1px } will create a border.Well the code below is what I just put into my XHTML 1.1 page and validated. This code also shows up correctly in IE 5 and 6 and Mozilla 1.3.
<style type="text/css">
img { border:0px; }
</style>It is indeed correct CSS, but I would like to clarify what you validated with. You have to remember that HTML and XHTML validators will skip over everything within style and script tags (since they would contain code in a different language). You'd have to pass it through the CSS validator.With IE, anyway, I've found that it doesn't want to change the border width unless you first turn the border on (border:solid;) and maybe even give it a color.This should be the case in all browsers as this is the case in the spec (with the exception of the color, which for me did not need to be set in IE nor does it need to be set according to the spec). Since border-style defaults to none you will have to explicitly declare it as something else, such as solid.Note: px is the defaultThere is no default. Only when the length is 0 is the unit identifier optional, since, obvioulsy, 0 is 0 regardless of the type of measurement.

So ideally, removing the border around an image should probably be done as below (just thought I'd also note that I personally find it redundant to use shorthand when setting only a single property; it is better to specify exactly what property you're setting simply for clarity).img { border-style: none }

[havik]

Normally you would be correct, and even according to the specs you would be correct (border-style defaults to none, so no borders will be visible unless the border style is set), however, I believe images are special cases where most browsers seem to ignore this rule (I believe table may also be another exception). So img { border: 1px } will create a border.

It all depends on the browser, which is why it shouldn't be used that way. border: 1px; doesn't display any border on IE6 or NS6, but yet it does so on NS4. I haven't tested it on any other browsers.

Havik

[khaki]

if i may interrupt the sword-fight that you guys are having ;) ...

which way would the CSS validator say is proper?

unfortunately i've now gotten like 5 different answers... and aside from being gratefull for all of the responses... my head still spins all the same :eek:

i have it working now as:
img {border:none;}

so... should i keep that?
change it?
what :confused:

still blue (sorta) ;)...
;) k

[havik]

Sword fight? Is that what we're doing? :D
Even though we're having a debate (that's what I'll call it), I think we're all in agreement that border: none; is the best choice.

Havik

[jeffmott]

but I assure you that IE will use that as the default even for non-zero specificationsThen you should say that in the first place. When you make a general statement like you did you imply that this is true for the language, when really it may be true for only one particular implementation of it. And it is unlikely that other browsers will deviate from the specification in the exact same way that IE does. Following the specification is the best way to make your pages work on all browsers, instead of only one.The results are the same nonethelessIn IE. Microsoft is not he highest authority in all things pertaining to the Web and should not be treated as such.

[nkaisare]

Validation
img {border: 0px}
img {border: 0}
img {border: none}
img {border: solid 0}
All of them are valid

img {border: 1} is NOT valid. px is not default according to specs.

Will it work
Validation is one thing, and whether it works on browsers is another. In my experience:
img {border: 0} doesn't work in all browsers (although it should because none is the default border-style)
img {border: none} works in all 5+ browsers.
img {border: 0 none;} is safest IMO.

In absence of border-width, it should default to "medium" and not "0" or "1px". Support may not be uniform across browsers. So best to specify style, width and color explicitly.

Following the specification is the best way to make your pages work on all browsers
An implicit assumption is that current and future browsers will have a bug-free support of all specifications. This, in general is not true. The right way to go about is to have a valid code that works in all browsers as desired.

For example, valid implementation in absence of border-width is "medium". I wonder if browsers of future will necessarily default to that. Its more pragmatic to specify border width, style and color explicitly - 99 out of 100 times there isn't a reason not to.

[nkaisare]

that works in all browsers as desired.
I don't mean to say it should look same in all browsers. It should work in all browsers. Hopefully, we should make it looks as uniform as we possibly can, given limited time in which we need to deliver the webpages.

[jeffmott]

As for this specific issue... I say that if it doesn't work in the other browsers, then there is something wrong with their error correction subroutinesThis is a perfect example of you treating Microsoft as the highest authority. You just said that anyone who doesn't interpret something in exactly the same way as Microsoft is wrong. And that's just the dumbest thing I've ever heard.

The specification is what binds all the browsers so that they all interpret your code in the same way. And since it is the central point from which browsers are currently built, it is the central point from which you should start building your pages. Code exactly to the spec. Then if something isn't working properly in any one of the browsers you choose to test with, code it differently.

But in this case you have the choice of a method that should, and most likely will, work in all modern browsers versus a method that works in one browser some of the time. I stress some of the time because I did my own testing. Leaving off the unit identifier defaults to px only when IE is in quirks mode (aka assume the coder doesn't know what they're doing). Where as when in standards compliant mode it is seen as invalid syntax (as it should) and the property is ignored.

It's fine if you inform people that in quirks mode IE will use px as default. But you didn't do that. You pawned it off as a general rule that may be used in all sitations. Simply include all the pertinant information and we could've avoid this entire situation.

"The default is px in IE and only when running in quirks mode."

[jeffmott]

quote:
--------------------------------------------------------------------------------
This is a perfect example of you treating Microsoft as the highest authority. You just said that anyone who doesn't interpret something in exactly the same way as Microsoft is wrong. And that's just the dumbest thing I've ever heard.
--------------------------------------------------------------------------------
If that had been what I said, I would agree with you. Instead, you are unable to see past your own bull-headedness to see what I really said.There is no specification nor a proposed standard on how browser's error correction should interpret invalid syntax, and each browser is left to do this in their own way. Knowing this, you're exact words were: "As for this specific issue... I say that if it doesn't work in the other browsers, then there is something wrong with their error correction subroutines." Why is every other browser wrong? Because they don't work exactly like IE? That's the only way I can see to interpret it. If you meant something else then why don't you explain yourself instead of passing insults.Your choice of a critical (or more negative) adjective reveals your own twisted biasAre you referring to "quirks"? If so then you need to stop looking for ways to deal out more insults. I didn't just make it up. Quirks mode is what it's called. Why don't you look it up?Such persons will eventually learn the standards and will begin coding to them in order to get their page to work in a less friendly browser -- in other words, when such persons have a desire for cross-browser compatibility.Code to standards for their page to work in a less friendly browser and for cross-browser compatibility... OMG, did you just say that coding to standards is, in fact, better? :eek: :D

[jeffmott]

lol, :rolleyes:
yeah, sorry for invading your thread, khaki

[khaki]

okay...
let's take a pause...
this time I'm really stumped.
Can anyone help?

Here's the deal:

Thursday night...
Two shows...

The Doors at Roseland
or
Cheap Trick at The Beacon Theatre
:confused:

I obviously can't go to both...
and I can't really decide.
(this would be a no-brainer if Mr. Mojo Rison were appearing... but... sadly... no)

I love Roseland (small, gritty, and no seats) and I love the Beacon (no question a great place for shows)

help!
;) k

[khalidali63]

Originally posted by khaki
.....
Cheap Trick at The Beacon Theatre
..........

My vote is for "Cheap Trick"

:D

[khaki]

ok

that settles it

cheap trick at the beacon

surrender, but don't give yourself away

;) k

[lavashark.com]

Thanks! (even if it's a few years later)

[lavashark.com]

Well one specific:

Any way to make the css with a border, just not linked? (images with borders are so much nicer!)

[donoho]

Thanks! (even if it's a few years later)
+1 :p

[WebJoel]

Maybe I'll test border:"0px" tomorrow... and report back.

It makes no difference, but if it is CSS, then "border: 0" is correct, because "zero" pixels = "zero" em = "zero" pt, see? While different browsers might display a pixel differently or an em differantly or a pt differantly, they ALL will display "zero" exactly the same, because it is nil, none, zip, nada.
In fact, many html-shrinker programs (programs which strip out superfluous whitespace and unneeded 'things', to reduce a page's footprint) probably reduce "zero"-anything (px, em, pt) to merely "0" and the page-size is reduced by a byte or two on every instance.

--Thought that this was interesting trivia... :)

[bathurst_guy]

It makes no difference, but if it is CSS, then "border: 0" is correct, because "zero" pixels = "zero" em = "zero" pt, see? While different browsers might display a pixel differently or an em differantly or a pt differantly, they ALL will display "zero" exactly the same, because it is nil, none, zip, nada.
In fact, many html-shrinker programs (programs which strip out superfluous whitespace and unneeded 'things', to reduce a page's footprint) probably reduce "zero"-anything (px, em, pt) to merely "0" and the page-size is reduced by a byte or two on every instance.

--Thought that this was interesting trivia... :)This is the correct way.
border: 0;

[NogDog]

Argh! Why have we brought a 2-year-old thread back to life? Let it rest in peace.