Tricky lining keywords up on Asset Listing Pages

Squiz Matrix Support
1

Hi all


ITS A FRIDAY



Having some trouble lining up some elements whenever I build an asset Listing page. For example, the page is looking like this



http://matrix.nsw.uca.org.au/yat/domestic



Notice how the Article headline and the date line are really far apart?



How do I get them closer to each other, so it’s a line break instead of a Paragraph break? So looking more like:



A fresh approach faith sharing

01 Feb 2007



A new publication, aimed at fostering faith development, faith sharing and which will share a positive message about the Uniting Church and Christianity in general is being launched in February as a joint venture between the Synod of Western Australia and the National Assembly.



On a related issue, also on the asset listing page, how do you get a thumbnail to text align left so that text can wrap around it? I tried throwing a <text align=left> around it but no love there. For example:



http://matrix.nsw.uca.org.au/yat/domestic



Notice how the thumbnail is sitting above the asset attribute summary? I would like it to wrap around the thumbnail. How would this be done?



Thanks!

2

Regarding your first point, that would be better solved by modifying your stylesheet to remove the margin on your header class - headings are given a margin on the top and bottom by browsers by default.


For instance, consider the following change to your h2 style:


    h2 {font-size: 1.3em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 0; /* <----- line added */
    }


The extra "margin-bottom" style seemed to work for me, at least in Firefox. You'd need to check in IE to see whether it works there (I can only check in Firefox without modifying the original copy on your Matrix system) but it should also work in IE.

Regarding the thumbnail floating issue, what you are trying to do is on the right track (a more CSS-friendly way would be to create a new class name and use a "float: left" rule, but this would work too) - but for some reason the DIV is going around the whole story (in fact, both of them), instead of just being around the thumbnail. Again, without looking at the bodycopy from within Matrix, I can't say what's causing that, but that's the problem there.

Hope this helps.
3

After a quick look the offending CSS is in the rule #leftcolumn


I'm not certain what is causing it, but it would appear to be a mix of rules (possibly line-height and width used together is causing the spacing weirdness).



To get around it temporarily you might be able to place the date and heading within their own divs, and avoid the breaks.

4

[quote]After a quick look the offending CSS is in the rule #leftcolumn


I’m not certain what is causing it, but it would appear to be a mix of rules (possibly line-height and width used together is causing the spacing weirdness).



To get around it temporarily you might be able to place the date and heading within their own divs, and avoid the breaks.

[right][post=“14412”]<{POST_SNAPBACK}>[/post][/right][/quote]



Thanks guys. Let me give that a jab… it’s just strangely difficult for something that should be quite straight forward - I was suspecting some CSS styles overriding each other or something…

5

[quote]Thanks guys. Let me give that a jab… it’s just strangely difficult for something that should be quite straight forward - I was suspecting some CSS styles overriding each other or something…
[right][post=“14413”]<{POST_SNAPBACK}>[/post][/right][/quote]



Also, to clarify, the thumbnail thing I want to set it up in the asset builder (the example on the home page was just copy and pasted html).



Everytime I try to div align it, once it saves it does it to the whole div, or it just does some weird thing.



WEIRD

6

I think some of the weirdness is caused by things like line-height and % widths. They are especially difficult to get them working cross browser. I'd be tempted to revisit your styles and see if you can re-write the rules from the top down.
7

[quote]I think some of the weirdness is caused by things like line-height and % widths. They are especially difficult to get them working cross browser. I’d be tempted to revisit your styles and see if you can re-write the rules from the top down.
[right][post=“14415”]<{POST_SNAPBACK}>[/post][/right][/quote]



Yeah. That’s a good suggestion. I mite run it through a validator etc…

8

Hey Luke, I've thrown that into the CSS


h2 {font-size: 1.3em;

font-family: Verdana, Helvetica, Arial, sans-serif;

font-weight: bold;

text-align: left;

line-height: 1.5em;

margin-bottom: 0; /* <----- line added */

}





But no love? How did you get it to work : (

9

I couldn't get it working either. The only problem I could find was that weird cascading with #leftcolumn

10

[quote]Hey Luke, I’ve thrown that into the CSS


h2 {font-size: 1.3em;

font-family: Verdana, Helvetica, Arial, sans-serif;

font-weight: bold;

text-align: left;

line-height: 1.5em;

margin-bottom: 0; /* <----- line added */

}

But no love? How did you get it to work : (

[right][post=“14419”]<{POST_SNAPBACK}>[/post][/right][/quote]



Also tried margin-bottom: 0px;



Didn’t work either.

11

[quote]Hey Luke, I’ve thrown that into the CSS
(… css snippet …)

But no love? How did you get it to work : (

[right][post=“14419”]<{POST_SNAPBACK}>[/post][/right][/quote]



That’s strange, as I reloaded the pages a minute ago and it looked fine (in both IE6 and Firefox), with the header and date next to each other. Perhaps the old CSS file was still cached somewhere - either in your Matrix or possibly your browser cache (try clearing that perhaps, or reloading with Ctrl+F5 to force a full reload)? Sometimes CSS and (particularly) JS files have a habit of getting stuck in the browser cache…

12

[quote]That’s strange, as I reloaded the pages a minute ago and it looked fine (in both IE6 and Firefox), with the header and date next to each other. Perhaps the old CSS file was still cached somewhere - either in your Matrix or possibly your browser cache (try clearing that perhaps, or reloading with Ctrl+F5 to force a full reload)? Sometimes CSS and (particularly) JS files have a habit of getting stuck in the browser cache…
[right][post=“14423”]<{POST_SNAPBACK}>[/post][/right][/quote]



Oh yeah lets try that…

13

[quote]Oh yeah lets try that…
[right][post=“14424”]<{POST_SNAPBACK}>[/post][/right][/quote]



Doesn’t seem to work. ; /



What seriously bugs me is that - if is formatted in the same font style, THEN it works flawlessly. That glitch comes in when it’s two different font styles…



see: (may be changed shortly)



http://matrix.nsw.uca.org.au/yat/domestic

14

I've come to the conclusion that everytime you apply a font style… there is some kind of automatic paragraph spacing immediately following it.


One that overrides the CSS even…



Is this the case? If so… is there a way to over come it?

15

[quote]Is this the case? If so… is there a way to over come it?
[right][post=“14428”]<{POST_SNAPBACK}>[/post][/right][/quote]



All browser’s have defaults for styling of xhtml and html elements. I found that this article helped me.



http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/

16

[quote]All browser’s have defaults for styling of xhtml and html elements. I found that this article helped me.


http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/

[right][post=“14433”]<{POST_SNAPBACK}>[/post][/right][/quote]