Image Alignment

Squiz Matrix Support
1

Hi everyone,


I'm having trouble with inserting images and then the final product in the preview screen.



I am creating a Contact Us page for our city council and when I insert icons (email, pencil, etc.) it looks fine on the edit page but when I preview it the icons and text are staggered across the page. If I double space between lines it works but then they are too far apart and it looks bad.



Can someone help? Thanks.

2

I'd say the positioning of the images is being affected by the CSS in your design. The Edit Contents screen won't use all the CSS from you design, where as the Preview screen will. By double spacing the lines, you're probably forcing a break tag (or two) between each line.

3

[quote]I’d say the positioning of the images is being affected by the CSS in your design.  The Edit Contents screen won’t use all the CSS from you design, where as the Preview screen will.  By double spacing the lines, you’re probably forcing a break tag (or two) between each line.
[right][post=“16144”]<{POST_SNAPBACK}>[/post][/right][/quote]



Is there anyway around it? I’m still new at it so I’m really sure what all that means.

4

It's difficult to tell you exactly what to do, without seeing the page in question. You could try using a table to position your images more precisely (eg. put the image in one cell, and the text in another), but this isn't ideal for accessibility purposes.

5

[quote]It’s difficult to tell you exactly what to do, without seeing the page in question.  You could try using a table to position your images more precisely (eg. put the image in one cell, and the text in another), but this isn’t ideal for accessibility purposes.
[right][post=“16146”]<{POST_SNAPBACK}>[/post][/right][/quote]



I tried that but it still doesn’t work. I put them into a table and the icons are still a cm above the text.

6

Using the table properties icon in the WYSIWYG, try selecting the row/cell in question (using the row or cell selector), then vertically align to the bottom/middle/top as appropriate.

7

We would really need to see the output HTML/CSS to properly diagnose this.