It’s being overridden by the .primary img {} selector.
You can beat that specificity by saying img.wp-smiley {border: 0;} (hat tip masquerade).
Firas, thank you so much! :). I tried .wp-smiley img {border:0;} but never worked but yours did. Another new thing I learned about CSS :). Thanks.
Moderator
James Huff
(@macmanx)
Volunteer Moderator
Xero, I believe the Smily bug was fixed by K2 Alpha Four. And, for the second time, please post all K2 support requests in the Kubrick/K2 support forum.
Macmanx, I dont think so. Plus, its still in “Current Known Bugs”. Also, i didnt consider this as a K2 support question. Just a .css question as any theme can have this problem…
Moderator
James Huff
(@macmanx)
Volunteer Moderator
Also, i didnt consider this as a K2 support question. Just a .css question as any theme can have this problem…
That is possibly true, but if this was posted in the Kubrick/K2 Support Forums, then at least Michael would have been notified about the fix.
Macmanx, I already did email Chris right after I fixed the problem. Chris works with Michael on K2, right? I couldnt find Michaels email so I emailed chris right after I added the code.
Moderator
James Huff
(@macmanx)
Volunteer Moderator
Chris works on the Options panel for K2, not the theme content, but I’m sure that he’ll forward the appropriate information to Michael.
For future reference, you can contact Michael in regards to Kubrick and K2 issues by posting in the Kubrick/K2 support forum.
please help me here. I have tried Firas’ suggestion on how to remove the borders in smileys, but still it doesn’t work with me. Please help me.
that is because I forcibly delete all borders for ALL images. how can I erase the border only on smileys?
img.wp-smiley {border:none}
no effect 🙁 I have returned all the CSS to bring back the borders, and I also typed in img.wp-smiley {border:none;} but there is no effect… 🙁
here is the complete code of CSS for images on my mx4 theme:
/********* Begin Images *********/
img.wp-smiley {border:none;}
/*img.wp-smiley {
border:none;
margin:0;
padding:0;
}*/
.entry img {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
max-width: 334px;
}
.entrytext img {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
max-width: 392px;
}
.img {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
}
.imgleft {
float: left;
margin-bottom: 6px;
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
}
.imgright {
float: right;
margin-bottom: 6px;
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
}
p img {
max-width: 100%;
}
img.centered {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
background-color: #ffffff;
border: 1px solid #dddddd;
/*-moz-border-radius:5px;*/
padding: 4px;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.gravatar {
float: left;
margin: 2px 10px 6px 0px;
background-color: #ffffff;
border: 1px solid #dddddd;
padding: 2px;
}
/********* End Images *********/
You have given images a background of white, so in my testing the borders do disappear, however, the background is white. The more restrictive img.wp-smiley {border:none;} needs to go after most of the other img styles (many of which are redundant and some are irrelevant) – you should clean the img section up.
