journal entry format problem (II)

oxy8384

Can someone tell me why the caption on a journal entry is offset below the top of the image? I have set margin, border, and padding on '.caption' class to zero without effect. If you look here
http://truemomentsphotography.smugmug.com/gallery/2938050
I have added 1px borders around the outermost div elements inside my image captions and you can see the top edge is noticably below the top edge of the journal_entry photos. I could use the extra room...

TIA,

Bill

Dna

oxy8384 wrote:

Can someone tell me why the caption on a journal entry is offset below the top of the image? I have set margin, border, and padding on '.caption' class to zero without effect. If you look here
http://truemomentsphotography.smugmug.com/gallery/2938050
I have added 1px borders around the outermost div elements inside my image captions and you can see the top edge is noticably below the top edge of the journal_entry photos. I could use the extra room...

TIA,

Bill

Remove your .tmp_cap_container and apply that styling to .journal_entry
I played around and ended up with the following.

Hope that helps

Andrew

.journal_entry {
position: relative;
padding: 10px 10px 10px 10px;
border-style:solid;
border-color:#0ff;
border-width: 1px 1px;
}

.tmp_journal_cap {
margin-top: -20px;
font-size: 12pt;
font-weight: normal;
border-style:solid;
border-color:#f0f;
border-width: 1px 1px;
}

.tmp_journal_left {
text-align: right;
}
.tmp_journal_right {
text-align: left;
}

.tmp_caption_center {
text-align:center;
}

.photo left {
padding-right: 15px;
}

.photo right {
padding-right: 15px;
}

.clearer {
clear: both;
overflow: hidden;
height: 1px;
width: 1px;
}

oxy8384

Thanks, Andrew...

Dna wrote:

Remove your .tmp_cap_container and apply that styling to .journal_entry
I played around and ended up with the following.

...

.tmp_journal_cap {
margin-top: -20px;
font-size: 12pt;
font-weight: normal;
border-style:solid;
border-color:#f0f;
border-width: 1px 1px;
}
...

It looks like the magic bullet is the 'margin-top: -20px;' . I was trying to avoid such a specific fix in case the journal gets redefined in the future and also because my next project is to vertically center my captions alongside my images. Using your solution means my javascript will have to knw about my CSS and that's just ugly. I'll use that as a last resort, but I'd rather be able to eliminate the extra space at the journal_entry or caption level.

Thanks,

Bill

Mike Lane

#journal .caption {padding-top:0;}

oxy8384

Holy camera lenses!!!

Mike Lane wrote:

#journal .caption {padding-top:0;}

That works!!
bow
I am sooooooo confused by that! So now explain why '.journal_entry .caption {padding: 0;}' didn't work. This makes no sense to me.

But thank you VERY much, anyway!

Bill

ivar

oxy8384 wrote:

That works!!
bow
I am sooooooo confused by that! So now explain why '.journal_entry .caption {padding: 0;}' didn't work. This makes no sense to me.

But thank you VERY much, anyway!

Bill

Does that mean I can close your bug?

oxy8384

certainly...

ivar wrote:

Does that mean I can close your bug?

but only if you can answer my question (above)!

Thanks, all!

Bill

ivar

The class and id 'journal_entry' are two different things. One addressed with .journal, and one addressed with #journal. They are ids. You just used the wrong one, that's all

Mike Lane

#journal is more specific than .journal_entry. So .journal_entry .caption was less specific than something in the SmugMug Black css file so it was being blocked. So I kicked it up a notch (could have used !important too but I'm not a big fan ... ) et voila.

More about specificity here.

oxy8384

wait....
BAM! (Emeril reference to kicking it up a notch)

Doh! I forgot the default CSS, but wouldn't have expected it to be that specific, anyway.

Thanks,

Bill

oxy8384

so....
where can I get a look at these default CSS files? If I save a page and all dependent files to my PC, the CSS appears all garbled (encrypted?). Or am I looking at a Linux file on a Windows machine..?

I would like to see what's being done on my behalf so I don't waste anyone's time on this stuff in the future..

Thanks,

Bill

Allen

oxy8384 wrote:

where can I get a look at these default CSS files? If I save a page and all dependent files to my PC, the CSS appears all garbled (encrypted?). Or am I looking at a Linux file on a Windows machine..?

I would like to see what's being done on my behalf so I don't waste anyone's time on this stuff in the future..

Thanks,

Bill

Use Firefox with the WebDev extension and you can see the CSS, html, etc.
Even make changes to your page in real time and watch what happens. It
only works on the page that's loading in memory so save any changes.