T
Troy Piggins
This seems to happen in Firefox, but not IE, and just wondering
if it's my code or the browser.
On some of my pages I have thumbnails of images. The thumbs are
links to bigger images.
Thumbnails are displayed as I want them... /until/ the link is
clicked (active?) when a scrollbar appears on the right side of
the thumbnail. Here is an example:
http://piggo.com/~troy/slrn#manuals
View it in Firefox, and click but hold down the mouse button on
the thumb and see the scrollbar appear?
How do I stop that?
Here is the relevant html and css extracts:
<div class="imgctr">
<a href="image.php?img=images/slrn/manuals.png">
<img alt="manuals screenshot" src="images/slrn/thumbnails/manuals.png" \>
</a>
</div>
a:link {
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4682B4;
text-decoration: none;
}
a:visited {
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4682B4;
text-decoration: none;
}
a:hover {
border-bottom-style: solid;
border-bottom-width: 1px;
color: #B0C4DE;
text-decoration: none;
}
a:active {
border-bottom-style: solid;
border-bottom-width: 1px;
color: #B0C4DE;
text-decoration: none;
}
..imgctr {
text-align: center;
overflow: auto;
}
..imgctr a:link {
border-bottom: none;
}
..imgctr a:visited {
border-bottom: none;
}
..imgctr a:hover {
border-bottom: none;
}
..imgctr a:active {
border-bottom: none;
}
img {
border: none;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
}
if it's my code or the browser.
On some of my pages I have thumbnails of images. The thumbs are
links to bigger images.
Thumbnails are displayed as I want them... /until/ the link is
clicked (active?) when a scrollbar appears on the right side of
the thumbnail. Here is an example:
http://piggo.com/~troy/slrn#manuals
View it in Firefox, and click but hold down the mouse button on
the thumb and see the scrollbar appear?
How do I stop that?
Here is the relevant html and css extracts:
<div class="imgctr">
<a href="image.php?img=images/slrn/manuals.png">
<img alt="manuals screenshot" src="images/slrn/thumbnails/manuals.png" \>
</a>
</div>
a:link {
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4682B4;
text-decoration: none;
}
a:visited {
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4682B4;
text-decoration: none;
}
a:hover {
border-bottom-style: solid;
border-bottom-width: 1px;
color: #B0C4DE;
text-decoration: none;
}
a:active {
border-bottom-style: solid;
border-bottom-width: 1px;
color: #B0C4DE;
text-decoration: none;
}
..imgctr {
text-align: center;
overflow: auto;
}
..imgctr a:link {
border-bottom: none;
}
..imgctr a:visited {
border-bottom: none;
}
..imgctr a:hover {
border-bottom: none;
}
..imgctr a:active {
border-bottom: none;
}
img {
border: none;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
}