image has border

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 3:10 pm

http://thetutspace.org/beta/

basically, the <img> tags have a border. Any ideas how to get rid of it? I use a CSS reset which normally gets rid of it, and img { border: 0 !important; doesnt work.. :/

EcazS · Post by **EcazS** » Thu Jun 30, 2011 4:23 pm

Looks like a link. Did you try, a img {border: 0} ?

Post by **jacek** » Thu Jun 30, 2011 4:45 pm

You need to set it for the a tag

[syntax=css]a, img {
border: none;
}[/syntax]

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 4:48 pm

didnt work. But, it is a link by image map, if that helps atall? :/

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 5:21 pm

It may be worth noting that the small fountain which has one of these isnt a link atall, just an img tag.

Also, if you look now you'll see hover states for all the buildings, but the wall because it is a large image, has the hover state when all of it is hovered, even the transparent. ive tried applying it to the area tag (which is part of the image map) but that doesnt work. Any other ideas would be great!

Post by **jacek** » Thu Jun 30, 2011 6:02 pm

I don't actually see any borders :S ?

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 6:02 pm

screenshot please? and ill upload one too

/edit here:

: Untitled-2.jpg (490.26 KiB) Viewed 5999 times

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 9:02 pm

bowersbros wrote:It may be worth noting that the small fountain which has one of these isnt a link atall, just an img tag.

Also, if you look now you'll see hover states for all the buildings, but the wall because it is a large image, has the hover state when all of it is hovered, even the transparent. ive tried applying it to the area tag (which is part of the image map) but that doesnt work. Any other ideas would be great!

Fixed the wall problem, used the image map and changed the class via that.

Um.

Still confused on the image border problem

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 9:24 pm

Right, apparently the borders only show in Chrome. and the image map for the wall doesnt work in FF but does in IE , chrome and safari.

Torniquet · Post by **Torniquet** » Thu Jun 30, 2011 9:39 pm

ok after playing about with it. It seems to be a problem with that you are using a class to give and img tag a background image through css. i added a src attribute to the 2 affected images to supply the image sources and it cleared the weird borders up, however it does mess up the hover on the wall. maybe abit of jquery/js to edit the src attribute.

this is in chrome btw

[syntax=xhtml]<img src="images/city/buildings/normal/wall.png" class="wall" />[/syntax]

should fix your problems, likewise the same with the fountain. you just need to formulate the hover...

[syntax=javascript]
$('.wall').mouseover(function(){
$(this).attr('src','images/city/buildings/hover/wall.png');
}
$('.wall').mouseoout(function(){
$(this).attr('src','images/city/buildings/normal/wall.png');
}
[/syntax]

maybe?

Post by **jacek** » Thu Jun 30, 2011 9:58 pm

Are you sure that is not the outline ?

Try

[syntax=css]outline: none;[/syntax]

Torniquet · Post by **Torniquet** » Thu Jun 30, 2011 10:03 pm

Nope that didnt work either.

Applying what i have put should also fix the FF issue aswell

bowersbros · Post by **bowersbros** » Thu Jun 30, 2011 10:23 pm

unfortunately, the imagemap still doesnt seem to work, and it needs to, sicne the whole image cant be a link, only the bits i need it to be, whic hare defined within the image map

Post by **jacek** » Thu Jun 30, 2011 10:37 pm

You can position a tags like any other tag. So you can use one image and put the links on top of it ?

bowersbros · Post by **bowersbros** » Fri Jul 01, 2011 6:41 am

The wall being circular I only want the actual graphic of the wall to be a link, thus an image map is used, since there you define the coordinates for the poly shape. because if i used a generic link, it would make the entire square that the image is in clickable, which isnt suitable for my needs.

EcazS · Post by **EcazS** » Fri Jul 01, 2011 11:56 am

I'm starting to think that you can't remove it. I tried img, map, area and nothing works

peterr · Post by **peterr** » Fri Oct 14, 2011 11:11 am

If you don't want borders around the images you can try this:

[syntax=xhtml]
<img src="url/your image" border="0"><img>
[/syntax]

You just add border="0" just after the img src="" and it should work. I had the same problem with IE. Purple borders appeared around all the images, but when I added border="0" in the HTML, it worked.

EcazS · Post by **EcazS** » Fri Oct 14, 2011 12:00 pm

Did you even bother to read all posts? Doing border: 0px/none; would be the same thing as doing what you did.

Post by **jacek** » Fri Oct 14, 2011 12:20 pm

The border attribute is not valid XHTML, it was essentially replace with CSS.

peterr · Post by **peterr** » Fri Oct 21, 2011 4:16 pm

I have a site which is XHTML valid and I have used the border="0" attribute.

EcazS · Post by **EcazS** » Fri Oct 21, 2011 4:25 pm

peterr wrote:I have a site which is XHTML valid and I have used the border="0" attribute.

It's valid if you're NOT using Strict....

BetterPHP

image has border

image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border

Re: image has border