Board index PBase HTML and Style Sheets Style Sheet Puzzlement

HTML and Style Sheets

Style Sheet Puzzlement

Customize your galleries.
floradoragirl
 
Posts: 230

Style Sheet Puzzlement

Post Mon Apr 11, 2011 8:04 pm


Hello. I've recently found a style sheet I like and have made a few minor adaptations for the fonts etc. to my own personal taste.
When I apply this style sheet to a gallery everything is fine and it seems to work just as it should however, when you drill down to the image page there is a problem with the 'vote for this image|post a comment' links. When I hover over these links in either Firefox or Opera, they can be clicked upon; if I hover over them in Chrome or Safari, they cannot.

As an example, http://www.pbase.com/floradoragirl/flowers - you can comment on the gallery as a whole but not on the individual picture pages if you're viewing in either Safari or Chrome (and goodness knows what's happening in IE!).

What have I done wrong? Help, please!
Rosie

See what I've seen...

mardoli
 
Posts: 585

Re: Style Sheet Puzzlement

Post Tue Apr 12, 2011 11:27 am


Hello Rosie,
Maybe I have found the way to fix your CSS in order to eliminate the problem you experienced in Firefox.
I have analysed the script of your CSS, which is a bit redundant, but of course I did leave all what you had written there, even though some lines of the script are useless for the gallery look.
I simply deleted a part of the script related with the appearance of copyright section and it seems that now it’s possible to click on the button “comment” and “vote” under the photo in the image page, at least in Firefox…last but not least, in spite of the deleted lines of code the appearance of your copyright section has not changed.
Below you can find the edited version of your CSS
I hope it can help
Code: Select all
/*
minimal

*/

BODY
{
  font-family: optima, Helvetica, gill sans, sans-serif;
  background : white;
  color: rgb(100, 100, 100);
  font-size: 8pt;
  text-align: center;
}

DIV,TH,TR,TABLE,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5, CENTER
{
  font-family: optima, Helvetica, gill sans, sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: rgb(100, 100, 100);
}

font
{
  font-family: optima, Helvetica, gill sans, sans-serif; 
  color: rgb(100, 100, 100);
  font-size: 8pt;
}

/*  Gallery title top line:  #0c0c0c  rgb(12, 12, 12);
*/
h1
{
  margin-bottom: -5px;
  margin-left:18px;
  margin-top: 25px;
  color: rgb(150,150,150);
  font: optima, Helvetica, gill sans, sans-serif;
  font-size: 17.5px;
  letter-spacing: 19px; 
  height: 18px;

}

/* Gallery title 2nd line - note use h1 or h2 styles
*/
h2
{
  margin-bottom: 14px;
  color: rgb(150,150,150);
  font: optima, Helvetica, gill sans, sans-serif;
  font-size: 29px;

  letter-spacing: 15px; 
  height: 20px;

}


A, TD.A, A:link, A:visited, A:active
{
  color: rgb(100,100,100);
  text-decoration: none;
}

A:hover
{
  color: rgb(128, 0, 0);
  text-decoration: underline;
}

TD.thumbnail
{
  vertical-align : middle;
  background : rgb(240,240,240);
  text-align: center;
  border-left: rgb(225,225,225) 1px solid;
  border-top: rgb(225,225,225) 1px solid;
  border-right: rgb(205,205,205) 1px solid;
  border-bottom: rgb(205,205,205) 1px solid;
  width: 160px;
  max-width: 160px;
}

TD.thumbnail font
{
  color: rgb(100,100,100);
  font-size:8pt;
}

img.thumbnail
{
  margin-bottom: 6px;
}

IMG.display
{
  border: 1px solid rgb(212,205,202);
  vertical-align:top;
}

.image td a
{
  display: block;
  border: 1px solid rgb(204,204,204);
}

.image table
{
  margin-top:15px
}

.galleryheader
{
  text-align: center;
}

.sp {
        font-size:20pt;
        font-weight : bold;
        color : #ffffff;
        background-color : #505050;
}
.ma {
        font-size:14pt;
        font-weight : normal;
        color : #ffffff;
        background-color : #505050;
}

.sb
{
        font-size: 8pt;
        font-weight : normal;
        color : #808080;
        background-color : rgb(202,202,202);
        border: 0;
}

.lid, .lil
{
  font-size: 7pt;
  color : #808080;
  background-color : rgb(250,250,250);
  border-top: 0px;
  border-left: 0px;
}

.mi {
        font-size:10pt;
        color : #ffffff;
        background-color : #505050;
}
.co {
        color : #ffffff;
        background-color : #505050;
}
.me {
   text-align : left;
   color : #000000;
   background-color : #ffffff;
}
.wb {
        font-size: 10pt;
        color: #000000;
        background-color: #FFFFFF;
        font-weight: normal
}

#commentlist .from, #commentlist .date, #commentlist .commands, #commentlist .A

{
  color: rgb(120,120,120);
  background-color: white;
  font-weight: normal;
  font-size: 7pt;
  padding: 10px;
}                                                                               

#commentlist
{
  width:606px;
  margin-top: 10px;
  margin-left:auto;
  margin-right:auto;

}

.comment_section
{
  margin-top:10px;
  width:100%;
  margin-left:0px;
  margin-right:auto;
  border-top: rgb(235,235,235) 1px dotted;

}

#commentlist table.comment
{
  width:100%;
margin-left:0px;

}

#commentlist .date
{
  text-align: left; 
  color: rgb(150, 150, 150);
  font-size: 6pt;
  color: rgb(120,120,120);

}


#commentlist .message_body
{
  color: rgb(150, 150, 150);
  background-color: white;
  font-size: 8pt;
border-top: rgb(205,205,205) 1px dotted;
   background-color: rgb(252,252,252);
  padding: 1px;
}

}
#commententry {
  width:100%;
   margin-left: 60px;
   margin-right: auto;

}

#inline_slideshow
{
  border-style : double;
  border-width : 0px;
  border-color : #aaaaaa;
  border-bottom: rgb(205,205,205) 1px dotted;

}

#linkedsubgalleries
{
  font-size: 7pt;
  font-style: normal;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
}

#linkedsubgalleries .other a
{
  font-style: normal;
}

#linkedsubgalleries .current
{
  font-weight:bold;
}

/* othersizes, camera, exif, techinfo div and date  and artist - all the information below the photo */
.othersizes
{
  font-size: 8pt;
  color: #808080;
}

#othersizes
{
  position:relative;
  top:8px;
  width: 606px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}

#othersizes a
{
  color: rgb(200,200,200);
}

.camera, .exif
{
  font-size: 7pt;
  font-style: normal;
  color: #808080;
  width: 206px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}

#techinfo
{
  position:relative;
  top:14px;
  color: rgb(100,100,100);
  width: 606px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}

#techinfo a
{
  color: rgb(100,100,100);
}

/*
.date,.artist
{
  font-size: 8pt;
  font-weight: normal;
}
*/

#techinfo table
{
   width: 606px;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
   margin-top:2%;
}

.date
{
  display:none;
  font-size: 6pt;
  font-weight: normal;
  color:white;
}

.artist
{
  position:relative;
  font-size: 8pt;
  font-weight: normal;
  color:rgb(240,240,240);
}


/* title of images */
.title
{
  font-weight: normal;
  font-size: 22px;
  letter-spacing: -1px;
  margin-top:2px;
  margin-bottom:0px;
  font-variant:normal;
  width: 606px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  padding-top:4px;
_padding-top:12px;
}

/* location of image */
.location
{
  font-size: 11pt;
  font-weight: normal;
  letter-spacing: 0px;
  color : #606060;
  width: 606px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:8px;
  margin-bottom:6px;
}

H3 .location
{
  height:auto;
  overflow:hidden;
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  margin-bottom:0px;
}

/* image caption */
.caption
{
  font-size : 8pt;
  color : #707070;
  font-style : normal;
  margin-left:auto;
  margin-right:auto;
  margin-top:2px;
  margin-bottom:12px;
  width: 606px;
  text-align:left;
}

/* title of gallery thumbnails */
.thumbnail b
{
  font-size: 8pt;
  color: rgb(100,100,100);
  font-weight: normal;
  font-variant:normal;
}

/* localmenu td a and treepath controls the top left text, that is my name + the link and treepath after that */
#localmenu td
{
  font-family: optima, Helvetica, gill sans, sans-serif;
  font-size: 8pt;
  font-weight: normal;
  font-variant:normal;
}

#localmenu a
{
  font-weight: normal;

}

#localmenu
{
  text-align:left;

}

.treepath
{
  font-size: 10px;
  font-weight: normal;
  font-variant:normal;
}

/* controls the previous and next links SLIDESHOW*/
#DIV1 table, #slideshow table
{
  margin-top:17px;
  margin-left:30px;
  margin-right:auto;
  width:0px;
  text-align:left;

}

.copyright
{
  color: rgb(200,200,200);
  width: 800px
  text-align:left;
  margin-left:20px;
  padding-top:15px;
  margin-right:auto;
  font-size: 8pt;
  font-weight: normal;
  border-top:1px dotted rgb(230,230,230);
  padding-bottom:0px;
}


Best
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

floradoragirl
 
Posts: 230

Re: Style Sheet Puzzlement

Post Tue Apr 12, 2011 11:39 am


Marisa, thank you so much.

I'll try changing it tonight and see whether the change you suggest makes any difference to how it displays in Safari and Chrome (it already worked in Firefox and Opera). Thank you for helping; I'll report back on how I get on.
Rosie

See what I've seen...

floradoragirl
 
Posts: 230

Re: Style Sheet Puzzlement

Post Tue Apr 12, 2011 7:24 pm


Marisa, you're a genius!!!! Thank you SO MUCH for sorting it out.

:-)
Rosie

See what I've seen...


Board index PBase HTML and Style Sheets Style Sheet Puzzlement

Who is online

Users browsing this forum: No registered users and 1 guest