I've nearly finished my style sheet now (with many thanks to Dang for personal help), but there is one problem left.
In Internet Explorer everything works well, but in Firefox the gallery titles run out of the thumbnail boxes, as you can see here:
Internet Explorer (right):
Firefox (wrong):
(Click the images for a more detailed view)
My question is: how to solve this?
It's not possible to but a break ( < BR > ) in the gallery titles, as I did in the photo titles.
Therefore, I think I have to change something in the thumbnail code to avoid this, but I don't know what.
Here is the css code:
- Code: Select all
/* --- simple code to hide the menu -- */
/* -- by Arjun Roychowdhury -- */
/* --- http://www.pbase.com/arjunrc -- */
body table td a img { display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table,.thumbnails table img, .display,p.small{
display: inline;
body div.galleryheader table td a img {display:inline;}
}
BODY
{
margin-top: -27px;
width:100%;
margin-left:auto;
margin-right:auto;
color: white;
background: #383838 fixed url(.jpg) repeat-x top left;
font-size: 7pt;
}
DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER
{ font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: #C8C8C8 ;
font-weight: normal;
}
font
{
color: #C8C8C8 ;
letter-spacing: 0px;
}
h2
{
font-size: 18pt;
font-weight: none;
text-align: center;
letter-spacing: 2px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
background-color: #282828;
}
h2:first-letter
{
color: #C8C8C8;
}
h4
{
color: #A8A8A8;
font-size: 13pt;
}
I
{
color: #A8A8A8;
font-style: normal;
}
INPUT, TEXTAREA
{ border-color: #A8A8A8;
border-style; single;
background-color: #383838;
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: #C8C8C8;
font-weight: bold;
}
TEXTAREA
{ background-color: #383838;
font-family: arial;
color: #C8C8C8;
border-color: #3F3F3F;
}
A, TD.A, A:link
{ color: #E8E8E8;
text-decoration: bold;
}
A:hover
{
color: #FFFFFF;
text-decoration: bold;
}
A:visited
{
color: #E8E8E8;
}
A:active { color : #E8E8E8}
.caption
{
font-size : 9pt;
color : #A8A8A8;
font-style : none;
}
TD
{
background-color: none;
}
A.thumbnail {
BORDER-RIGHT: RGB(96,96,96) 1px solid; BORDER-TOP: RGB(96,96,96) 1px solid; DISPLAY: block; BACKGROUND: RGB(56,56,56); FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); MARGIN-BOTTOM: -55px; BORDER-LEFT: RGB(96,96,96) 1px solid; WIDTH: 185px; PADDING-TOP: 10px; BORDER-BOTTOM: RGB(96,96,96) 1px solid; HEIGHT: 210px
}
A.thumbnail:hover {
BORDER-RIGHT: RGB(208,208,208) 1px solid; BORDER-TOP: RGB(208,208,208) 1px solid; DISPLAY: block; BACKGROUND: RGB(80,80,80); FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); MARGIN-BOTTOM: -55px; BORDER-LEFT: RGB(208,208,208) 1px solid; WIDTH: 185px; PADDING-TOP: 10px; BORDER-BOTTOM: RGB(208,208,208) 1px solid; HEIGHT: 210px
}
.display
{
background-color: black;
border-top: 1px solid #A8A8A8;
border-left: 1px solid #A8A8A8;
border-bottom: 1px solid #4F4D4A;
border-right: 1px solid #4F4D4A;
}
BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }
Does anyone know how to solve this problem?
Thanks in advance!
Kind regards,
Maarten van Kempen
http://www.pbase.com/maartenvankempen