I am currently designing my own Tumblr theme and have encountered an issue that I cannot resolve due to lack of expertise. I was hoping someone with more knowledge could assist me.
Essentially, I have implemented a feature where hovering over a link changes the background color to grey. However, when images are also linked, they too acquire a small grey background. Please refer to the image for clarification.
The images are classified under .halo in the CSS. Any help from a CSS expert would be greatly appreciated. Here is the CSS code I am using:
body {
font-family: monaco, "courier new", mono;
background: {color:Background};
color: {color:BodyText};
font-size: 10pt;
}
p, li {
margin-bottom: 10pt;
}
h2 {
font-size: 110%;
text-transform: uppercase;
margin-bottom: 10pt;
}
h3 {
font-size: 100%;
margin-bottom: 10pt;
}
blockquote, .who {
margin-left: 20pt;
margin-bottom: 10pt;
}
a {
color: {color:BodyText};
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
background: {color:HoverBackground};
text-decoration: none;
}
ul, ol {
margin-left: 30pt;
margin-bottom: 10pt;
}
ul li {
list-style-type: disc;
}
#stext {
border: 0;
color: {color:BodyText};
background: {color:HoverBackground};
padding: 2px 5px;
font-size: 10pt;
}
#title
{
text-transform: uppercase;
letter-spacing: 10pt;
text-align: center;
font-size: 110%;
}
#title a:hover {
text-decoration: none;
/*color: #FF6600;*/
}
#desc {
margin: 0 20pt 10pt 20pt;
}
#posts {
width: 640px;
margin: 0 auto 0 auto;
text-align: left;
}
#paging {
text-align: center;
}
.date, .perm, #rss {
text-align: right;
}
.chat {
margin-bottom: 10pt;
}
.label {
white-space: no-wrap;
padding-right: 10pt;
vertical-align: top;
}
.line {
padding-bottom: 10pt;
}
.caption {
margin-bottom: 10pt;
}
.halo {
padding: 5px;
border: 1px solid {color:BodyText};
}
.fleft {
float: left;
width: 200px;
text-align: left;
}
.fright {
float: right;
width: 200px;
text-align: right;
}
ol.notes li.note img.avatar {
display: none;
}