PBase

Dear fellow Pbasers,

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

Hi Maarten

You have no width set for the TD - the table cells, you should set them to the width as your a.thumbnails meaning try adding this

Code: Select all

TD.thumbnail
{
  width:185px;
}


Works in my Firefox, give it a go and see if it solves your problem.

best regards,

Flemming

Hi Flemming,

That solves the problem; thanks for your help!
By the way: do you know how to put a break in a gallery title apart from the <BR>-code, which doesn't work there?

Regards,
Maarten

glad it worked!

Do you mean page break ? If so there's a box when you edit the gallery, where you enter the amount of gallery images per page. Just adjust this to whatever you like.

Flemming

Hi Flemming,

No, I don´t mean the page break, but an ´enter´ in the gallery title, the same effect as the <BR> code in the title of a photo.
Like this:

Word A
Word B

instead of:

Word A Word B

Regards,
Maarten

ah okay, sorry, got ya now

I am not sure that can be done. Just tested it and Pbase obviously parses the input in the title box (so people can't paste javascript etc here) and strip all html etc. So I don't really see a way to do, sorry, maybe someone has figured it out?

Flemming

No problem, it isn't really necessary, but it would be nice.

Regards,
Maarten