Simple CSS Error. Please Help (Padded Border Around Image)

[arcademint.com]

can anyone please Help me ?

i need someone's help to fix a small error in this page : http://www.arcademint.com

 

i just used this styles for the Thumbnail images in my site..

 

.thumbSyle

{

border-width:1px;

border-style:solid;

border-color:#525252;

padding:2px;

margin-right: 6px;

}

 

its looking fine in FireFox & Opera..but not in IE !

 

can anyone PLEASE help on this ? i am trying this for a few days 

 

here is the differents between FireFox & IE [Picture Attached]

 

all i need to do is.. just a padded white colored 1px border aroud my thumbnails..it will look nice on my site..

 

any tips OR ideas ?

 

Thanks & Regards,

Tharshan

MintGroup.

 

[attachment deleted by admin]

[arcademint.com]

i tried this also..

http://www.dynamicdrive.com/style/csslibrary/item/highlight-image-hover-effect/

[mainewoods]

I looked at your html source code and you have no class attached to your actual thumbnail image tags.  A search for your  'thumbSyle' class in your html source code yielded no results.  You have  (class='gamelink') in the links surrounding the thumbnails. 

 

If you do not specify the padding for images, ff uses 0px padding but ie will use 2px padding when in quirks mode.

[arcademint.com]

yes..

 

i changed something link that from a tutorial

 

but that one also not working..

 

 

here is the CSS i used.

 

.gamelink:link {

color: #FFFFFF;

text-transform:capitalize;

text-decoration: underline;

    font-size:12px;

font-weight: bold;

 

}

 

 

 

.gamelink:visited {

 

color: #FFFFFF;

text-transform:capitalize;

text-decoration: underline;

    font-size:12px;

font-weight: bold;

 

}

 

 

 

.gamelink:hover {

 

color: #99CC00;

  text-transform:capitalize;

text-decoration: underline;

    font-size:12px;

font-weight: bold;

 

}

 

.gamelink img{

 

border-width:1px;

border-style:solid;

border-color:#525252;

padding:2px;

margin-right: 6px;

}

 

 

 

and the HTML is like as

<a href="a.html" class="gamelink"><img src="images/thumb1.png"></a>

 

or if you know any other way to do padded borders for the linked images.. can u tell me please ?

 

 

thanks..

.gamelink:hover img{

 

border-width:1px;

border-style:solid;

border-color:#9a9a9a;

padding:2px;

margin-right: 6px;

}

 

 

[mainewoods]

the image tag itself has to have padding set:

<a href="a.html" class="gamelink"><img class="myimages" src="images/thumb1.png"></a>
--notice I added: class="myimages" to the img tag
**the css for the myimages class**
.myimages { padding:0px;margin:0px; }

[arcademint.com]

the image tag itself has to have padding set:

<a href="a.html" class="gamelink"><img class="myimages" src="images/thumb1.png"></a>
--notice I added: class="myimages" to the img tag
**the css for the myimages class**
.myimages { padding:0px;margin:0px; }

 

 

thanks for your reply..

but.. i am still having problem with it..

i did this same method in : http://www.gameza.info

 

but..its also giving error in IE.

 

can u please give me a Fix ?

[mainewoods]

Also add: border="0"

to your img tag

<a href="a.html" class="gamelink"><img class="myimages" border="0" src="images/thumb1.png"></a>

[arcademint.com]

Also add: border="0"

to your img tag

<a href="a.html" class="gamelink"><img class="myimages" border="0" src="images/thumb1.png"></a>

 

 

i just chagned the codes,,

still looking same

 

you can see here : http://www.arcademint.com/index.php

[mainewoods]

I grabbed your code from your page below(perfect parking image):

<img border='0px' class='gamethumb' src='http://www.arcademint.com/img/parkingperfection2.png' alt='Play Perfect Parking' width='60' height='50' align='left' />

when you use the border attribute like that in html, leave off the 'px'

<img border='0' class='gamethumb' src='http://www.arcademint.com/img/parkingperfection2.png' alt='Play Perfect Parking' width='60' height='50' align='left' />

[arcademint.com]

I grabbed your code from your page below(perfect parking image):

<img border='0px' class='gamethumb' src='http://www.arcademint.com/img/parkingperfection2.png' alt='Play Perfect Parking' width='60' height='50' align='left' />

when you use the border attribute like that in html, leave off the 'px'

<img border='0' class='gamethumb' src='http://www.arcademint.com/img/parkingperfection2.png' alt='Play Perfect Parking' width='60' height='50' align='left' />

 

 

i did that..

....... <img border="0" class="gamethumb" ....................

 

still looking same ?

[arcademint.com]

any ideas ?

[arcademint.com]

anyone please ?

[mainewoods]

did you want a 2px space around the images? Try adding the hspace and vspace attributes:

<img border='0' hspace="2" vspace="2" class='gamethumb' src='http://www.arcademint.com/img/parkingperfection2.png' alt='Play Perfect Parking' width='60' height='50' align='left' />

 

[arcademint.com]

WOW ! 

 

thanks a lot !

 

it was worked for me..

 

thanks again.

[arcademint.com]

can you try to open this link in FireFox & IE ?

http://theshapeofdays.com/2005/11/my_contribution.html

 

a big different !!

 

i think some Bugs in IE ! ?