Webdev "tb.thumnail" doesn't appear in Firefox...

[guernier]

Hello,

Does anybody know why why Firefox does not display the tb.thumbnail 'box' field around my webdev gallery thumbnails?

http://www.pbase.com/guernier

Ideally I would like my gallery to appear as they do in IE. I realise that it will never be identical but have noticed that in some cases (such as http://www.pbase.com/webdev) the differences are minimal.

Does anybody know what I am doing wrong here?

Thanks very much in advance for your help.

Best regards,

Adam

[dang]

Sometimes it's easier just to make adjustments to one that works, then find the problem with one that doesn't. The sheet you pointed to can be copied, since it's creative commons. Here's the code to it, which you can use or change as needed:

Code: Select all

/*
:::::::::::::::StyleSheet Information :::::::::::::::
:: PBase.com Style Version 1.5                     ::
:: by Webdev - Pim Rijpsma - NL                    ::
:: http://www.pbase.com/webdev/                    ::
:: License Terms : Attribution-ShareAlike 1.0      ::
:: http://creativecommons.org/licenses/by-sa/1.0/  ::
:::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
a, a:link,a:visited,a:active, #localmenu a, #localmenu a:link,#localmenu a:visited,#localmenu a:active { color: rgb(91, 91, 101); font: 11px Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active { border: rgb(0, 0, 0) 1px solid; margin-bottom: -45px; padding-top: 5px; width: 172px; display: block; background: rgb(35, 35, 35); height: 197px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; filter: progid:DXImageTransform.Microsoft.Shadow(color="#232323",Direction=135,Strength=5); }
a.thumbnail:hover   { border-bottom: rgb(95, 121, 216) 1px solid; background: rgb(25, 25, 25); }
a:hover img.thumbnail { border: rgb(0, 0, 0) 1px solid; background: rgb(45, 45, 55); /*filter: none Alpha(Opacity=100, Style=0);*/ }
a:hover, #localmenu a:hover { color: rgb(204, 204, 255); text-decoration: none; }
body{ padding-bottom: 10px; margin-bottom: 20px; margin-top: 0px; background: rgb(45, 45, 45); }
div,th,tr,table,li,ul,form,
blockquote,p,b,i,h4,h5,center,title { border: 0px; color: rgb(121, 121, 131); font: 11px Verdana, Tahoma, Helvetica, sans-serif; }
font { margin-left: 4px; margin-right: 4px; width: 170px; display: block; color: rgb(121, 121, 131); font: 9px Verdana, Tahoma, Helvetica, sans-serif; letter-spacing: 0px; }
h1, h2 { border-bottom: rgb(95, 121, 216) 1px solid; border-left: rgb(0, 0, 0) 1px solid; border-right: rgb(0, 0, 0) 1px solid; border-top: rgb(0, 0, 0) 1px solid; padding: 8px 12px 8px 0px; margin: 20px 0px 0px 0px; margin-left: -370px; width: 746px; display: block; background: rgb(19, 19, 19); color: rgb(91, 91, 101); font: bold 11px verdana; letter-spacing: 4px; text-align: right; height: 22px; position: relative; left: 50%; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,enabled='true',startColorstr='#000000',endColorstr='#2D2D2D'); /*progid:DXImageTransform.Microsoft.Shadow(color="#232323",Direction=135,Strength=5);*/ }
h2:first-letter ,h1:first-letter { color: rgb(204, 204, 255); font: 18px Tahoma; }
h3 .title { border: rgb(0, 0, 0) 1px solid; paddiang: 2px 0px 8px 0px; width: 746px; margin: -18px auto 0 auto; display: block; background: rgb(52, 52, 52); color: rgb(91, 91, 101); font: bold 11px verdana; letter-spacing: 4px; text-align: center; height: 18px; position: relative; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,enabled='true',startColorstr='#242424',endColorstr='#2D2D2D'); /*progid:DXImageTransform.Microsoft.Shadow(color="#232323",Direction=135,Strength=5);*/ }
h5 { padding-left: 2px; width: 150px; display: block; color: rgb(204, 204, 255); font-size: 11px; font-weight: normal; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='#000000',endColorstr='#2D2D2D'); /*progid:DXImageTransform.Microsoft.Shadow(color="#232323",Direction=135,Strength=5);*/ }
i, body table img{ filter: xray Alpha(Opacity=10, Style=0); }
img{ border: rgb(0, 0, 0) 1px none; }
img.thumbnail { border: rgb(0, 0, 0) 1px solid; margin: 0px; padding: 0px; background: rgb(45, 45, 45); vertical-align: middle; /*filter: Gray Alpha(Opacity=100, Style=0);*/ }
table.thumbnail { width: 10%; }
td { border: 1px none; background: none; border-collapse: collapse; empty-cells: show; }
td.message_body { padding: 6px 6px 6px 6px; border-bottom: rgb(35, 35, 35) 1px dotted; background: rgb(52, 52, 52); }
p.message_body { color: rgb(121, 121, 131); background: rgb(52, 52, 52); font: 10px Verdana, Tahoma, Helvetica, sans-serif; }
td.thumbnail { padding: 2px; height: 207px; }
.camera{ color: rgb(95, 121, 216); }
.caption { color: rgb(95, 121, 216); font-size: 11px Verdana, Tahoma, Helvetica, sans-serif; font-style: italic; }
.image { border: rgb(0, 0, 0) 1px solid; margin-top: 1em; padding: 0px 0px 0px 0px; filter: progid:DXImageTransform.Microsoft.Shadow(color="#232323",Direction=135,Strength=5); }
.exif{ color: rgb(179, 179, 222); }
.galleryheader{ margin-left: -368px; width: 737px; position: relative; left: 50%; }
.lid{ background: rgb(55, 55, 55); color: rgb(102, 102, 102); font: 11px Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
.sb{ background: rgb(121, 121, 131); color: rgb(204, 204, 255); font: 11px Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
.thumbnails{ border: rgb(0, 0, 0) 1px solid; padding: 4px 4px 4px 4px; margin: 4px 0px 0px 0px; margin-left: -370px; width: 744px; background: rgb(52, 52, 52); position: relative; left: 50%; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; }
.thumbnails table,.thumbnails table img, .display{ display: inline; filter: none; }
.display{ border: rgb(0, 0, 0) 1px solid; padding: 0px; }
#image{ border: rgb(0, 0, 0) 1px solid; padding: 8px 2px 8px 2px; margin-left: -337px; width: 664px; background: rgb(52, 52, 52); position: relative; left: 50%; }
#image a:hover img { border-bottom: rgb(95, 121, 216) 1px solid; }
#image td a, #image td a:hover { background: transparent; }
i{display:none;

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

You can look through the code, and might spot the difference though, which you could then add into your sheet. Sometimes it's pretty easily spotted once you do a direct comparison... but sometimes you can work for hours!

[guernier]

Thanks, Dang. It looks like I've got a few hours ahead of me trying to iron this out! I really like the webdev stylesheet except for the rounded corners and lack of shadow when presented in firefox. Still... it's a lot better to what I've got now. Cheers.

[matt_latham]

PLease help!!!

I have copied the above code and am using it as a new stylesheet for my site. However, when viewing it with IE the thumbnails are shifted to the right. When viewed in firefox, the thumbnails are in the centre!! I don't understand.

My site is http://www.pbase.com/latho

Thanks in advance.

Matt

[dang]

Sorry Matt! I didn't check the sheet since they said it was one they liked.
I'd suggest scrapping it, unless you want to work on it.
There's plenty of nice sheets available for use from these members, which have set up galleries of styles to use:

http://pbasewiki.srijith.net/css_bank
http://www.pbase.com/matiasasun/css_library
http://www.pbase.com/pinemikey/pinescsslibrary
http://www.pbase.com/thierry_malaval/mycss

[toddk]

I am having the same problem. No one has found a solution for this yet??

[dang]

I am having the same problem. No one has found a solution for this yet??

Hi Todd,
Are you selecting the Original Web Dev style sheet that's available in your drop down list, or using an edited version you've copied? If I recall, the original version doesn't suffer this problem, though it looks very plain in various browsers due to IE not being standardized.

Also be aware, if you edit this sheet to a light color, white speckles can show through photos when viewing with Firefox. This seems to be due to the Microsoft DX Transform section written specifically for IE. To avoid the problem, the background directly behind the photos should be black.

Personally, I'm not willing to gamble the time to edit correctly. Even though centering might be something simple, I seriously doubt you'll get the dark/light thumbnail hover change to work with Firefox.