Perch Gallery Problem?

For some reason, I’m having problems getting these Perch served thumbnails to line up. I contacted the folks at Perch, but they said it’s my CSS. The problem is I really haven’t done anything, that I can think of, to my CSS.

http://idealynx.com/clients/wmp/gallery.php

Any thoughts on what I’m doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not yet, but I’m looking at it :slight_smile:


Ernie Simpson
antediluvian user of Freeway Pro

On Tue, Jun 26, 2012 at 5:10 PM, RavenManiac email@hidden wrote:

For some reason, I’m having problems getting these Perch served thumbnails
to line up. I contacted the folks at Perch, but they said it’s my CSS. The
problem is I really haven’t done anything, that I can think of, to my CSS.

http://idealynx.com/clients/wmp/gallery.php

Any thoughts on what I’m doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your gallery elements are all varied heights and float left in the main container element. This causes the items that flow onto the next line to only get positioned as far left as the tallest element on the previous line. One solution is to make sure that all of the gallery list items have a minimum height. Try adding the following style to the head of your page using Page > HTML Markup > Before ;

<style type="text/css">
<!-- 
.album { min-height:140px !important; }
-->
</style>

Regards,
Tim.

On 26 Jun 2012, at 22:10, RavenManiac wrote:

Any thoughts on what I’m doing wrong?


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think that this is your problem

body {font: 81.3%/1.3 Arial, Helvetica, sans-serif}

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

First I thought this was simple, but now it’s not as simple as I thought.

The font attribute of the body tag style in the gallery.css file
ISconflicting with some other css style(s). Commenting the body tag
out of
existence fixes the alignment issue, but there appears to be a host of
other conflict(s) going on.

For example, your linked page views in my browser with serif type, but when
viewed locally is sans-serif. Normally I would attribute that to me a
missing something in gathering your resources – but I checked it, so
something is else is not quite right.


Ernie Simpson

On Tue, Jun 26, 2012 at 5:31 PM, Ernie Simpson email@hidden wrote:

Not yet, but I’m looking at it :slight_smile:


Ernie Simpson
antediluvian user of Freeway Pro

On Tue, Jun 26, 2012 at 5:10 PM, RavenManiac email@hiddenwrote:

For some reason, I’m having problems getting these Perch served
thumbnails to line up. I contacted the folks at Perch, but they said it’s
my CSS. The problem is I really haven’t done anything, that I can think of,
to my CSS.

http://idealynx.com/clients/wmp/gallery.php

Any thoughts on what I’m doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim, I tried your solution and while it aligned the thumbnails, it spaced
the link text at right enormously.

Raven, there are a lot of css sources going on in your page, and they seem
to need quite a bit of sorting.


Ernie Simpson

On Tue, Jun 26, 2012 at 6:07 PM, Tim Plumb email@hidden wrote:

Your gallery elements are all varied heights and float left in the main
container element. This causes the items that flow onto the next line to
only get positioned as far left as the tallest element on the previous
line. One solution is to make sure that all of the gallery list items have
a minimum height. Try adding the following style to the head of your page
using Page > HTML Markup > Before ;

<style type="text/css">
<!--
.album { min-height:140px !important; }
-->
</style>

Regards,
Tim.

On 26 Jun 2012, at 22:10, RavenManiac wrote:

Any thoughts on what I’m doing wrong?


FreewayActions.com - Freeware and commercial Actions for Freeway Express &
Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and
explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

I tried your suggestion (thank you). The only problem is the spacing also affected my Photo Album list.

On 26 Jun 2012, 10:07 pm, Tim Plumb wrote:

Your gallery elements are all varied heights and float left in the main container element. This causes the items that flow onto the next line to only get positioned as far left as the tallest element on the previous line. One solution is to make sure that all of the gallery list items have a minimum height. Try adding the following style to the head of your page using Page > HTML Markup > Before ;


Regards,
Tim.

On 26 Jun 2012, at 22:10, RavenManiac wrote:

Any thoughts on what I’m doing wrong?


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t even know where that type spec is coming from. :slight_smile: Where should I look?

On 26 Jun 2012, 10:12 pm, DeltaDave wrote:

I think that this is your problem

body {font: 81.3%/1.3 Arial, Helvetica, sans-serif}

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think it is the strange percentage value in the body style

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That must be coming from Perch, because I can’t imagine myself setting that.

On 26 Jun 2012, 10:22 pm, DeltaDave wrote:

I think it is the strange percentage value in the body style

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep, that was it. Here is the Perch supplied CSS code. Why would they use these specs?

/* this stylesheet contains example styling for the gallery app. Feel free to edit or include this css in your existing stylesheet */

body {
	font: 81.3%/1.3 Arial, Helvetica, sans-serif;
}

img {
	border: 1;
}

h1 {
	font-size: 153.8%;
	font-weight: normal;
}

h2 {
	font-size: 123.1%;
	font-weight: normal;
	clear: left;
}

#wrapper {
	width: 890px;
	margin-left: auto;
	margin-right: auto;
}

#content {
	float: left;
	width: 640px;
}

#navigation {
	float: right;
	width: 230px;
}

ul#albums,
ul#allalbums {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#allalbums > li {
	clear: left;
}

ul.imagelisting,
ul.slideshow,
ul.slideshow-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.imagelisting li {
	float: left;
	width: 100px;
	margin: 0 10px 10px 0;
}

ul.slideshow-nav {
	margin-left: -4.5px;	
}

ul.slideshow-nav li {
	float: left;
	padding: 0 0 0 4.5px;
}

ul.slideshow-nav li img {
	width: 76px;
	height: 76px;
	opacity: 0.5;
}

ul.slideshow-nav li.activeSlide img,
ul.slideshow-nav li a:hover img {
	opacity: 1;
}

ul#albumdisplay {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#albumdisplay li {
	float: left;
	width: 100px;
	margin: 0 20px 20px 0;
}

ul#albumdisplay li img:hover {
	border: 2px solid #000;
}

ul#albumdisplay li img {
	display: block;
	border: 2px solid #ccc;
}

div.paging {
	clear: left;
	width: 540px;
}

div.paging .paging-label {
	width: 49%;
	float: left;
	margin: 10px 0;
}

div.paging .paging-nav {
	width: 49%;
	float: right;
	text-align: right;
	margin: 10px 0;
}

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s not strange – CSS font attribute allows you to set font-size,
line-height and font-family in one declaration :slight_smile:
http://www.w3schools.com/cssref/pr_font_font.asp


Ernie Simpson

On Tue, Jun 26, 2012 at 6:21 PM, DeltaDave email@hidden wrote:

I think it is the strange percentage value in the body style

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you think I should change the CSS to whole numbers? BTW, this issue seems to have arose after I deleted my .body class font tag and decided to use the p tag instead.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

When you come across examples like this with Perch stuff you can’t just copy it with impunity. Things like the body style etc. they included will always conflict with your styles so be aware of what you’re including instead of just stuffing it into your page. Make sure you’re only using the CSS specific to the Perch stuff you want to style.

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In that case you just need to focus the change to target just the thumbnails themselves;

<style type="text/css">
<!-- 
#albumdisplay .album { min-height:140px !important; }
-->
</style>

It sounds like you’ve got a bit of CSS cleanup to do with the default Perch styles but the style above should at least get the thumbnails aligned again.
Regards,
Tim.

On 26 Jun 2012, at 23:18, RavenManiac wrote:

I tried your suggestion (thank you). The only problem is the spacing also affected my Photo Album list.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try first commenting out the body style of the gallery.css file. Like so…

/*

body {
font: 81.3%/1.3 Arial, Helvetica, sans-serif;
}
*/

this way it is ignored by the browser. That will fix one problem… I think
there are others but let’s just see how that does for starters :slight_smile:


Ernie Simpson

On Tue, Jun 26, 2012 at 6:28 PM, RavenManiac email@hidden wrote:

Do you think I should change the CSS to whole numbers? BTW, this issue
seems to have arose after I deleted my .body class font tag and decided to
use the p tag instead.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aye, that seems to do it Tim :wink:


Ernie Simpson

On Tue, Jun 26, 2012 at 6:35 PM, Tim Plumb email@hidden wrote:

In that case you just need to focus the change to target just the
thumbnails themselves;

<style type="text/css">
<!--
#albumdisplay .album { min-height:140px !important; }
-->
</style>

It sounds like you’ve got a bit of CSS cleanup to do with the default
Perch styles but the style above should at least get the thumbnails aligned
again.
Regards,
Tim.

On 26 Jun 2012, at 23:18, RavenManiac wrote:

I tried your suggestion (thank you). The only problem is the spacing
also affected my Photo Album list.


FreewayActions.com - Freeware and commercial Actions for Freeway Express &
Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and
explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Worked perfectly. Thanks Ernie.

On 26 Jun 2012, 10:36 pm, The Big Erns wrote:

Try first commenting out the body style of the gallery.css file. Like so…

/*

body {
font: 81.3%/1.3 Arial, Helvetica, sans-serif;
}
*/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I hear ya Todd. This is what newbies do when they have absolutely no idea what they are doing and they’re worried they’ll break something. :slight_smile:

I’m sure as I get more comfortable with all of this I’ll be more inclined not to use canned CSS.

On 26 Jun 2012, 10:31 pm, Todd wrote:

When you come across examples like this with Perch stuff you can’t just copy it with impunity. Things like the body style etc. they included will always conflict with your styles so be aware of what you’re including instead of just stuffing it into your page. Make sure you’re only using the CSS specific to the Perch stuff you want to style.

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In the code I listed above, can somebody tell me which part of it controls the album titles under each thumbnail. I’d like to center that text. Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options