aligning image and text in cells

I have frequent and continuous tantrums aligning images and text in table cells!!..

For instance, I have a small table of six rows used for navigation, each cell has a small 12x12px arrow.gif then some html text (styled via css). Cell alignment is ‘middle’ via the inspector.

On the gif image, it seems possible to set the alignment to Top, Middle, Center, Absolute Middle etc. etc.

But none of these settings ever seems to keep the gif aligned “in the middle of the cell” as per the text. Or at least, not consistently across browsers.

Obviously this may be a browser interpretation thing. But it doesn’t half make it tricky designing such ‘alignment’ in FW.

What should be the default settings so that all elements (text and images) align vertically centred in all, or most, browsers?

Hugh


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

Hi Hugh –

If you’re placing your cursor in the table cells and inserting a graphic image, that image is actually part of the text block you place in that cell. Alignment with regards to such an image refers to how it aligns on the line of text it is placed into. Cell alignment refers to the entire block of text – it doesn’t actually affect the image position, but the position of the text block as a whole.

If you have only one line of text in each cell, Middle should align the image middle to the line of text. However, the moment the line wraps then you will see that it only aligns to the middle of the first line, pushing all others below the image. As text size and handling can vary from browser to browser, you must leave a little room for “wiggle”.

Do you have a posted example of your problem?

On Tue, Mar 11, 2008 at 6:22 AM, hugh wrote:

I have frequent and continuous tantrums aligning images and text in table cells!!..

For instance, I have a small table of six rows used for navigation, each cell has a small 12x12px arrow.gif then some html text (styled via css). Cell alignment is ‘middle’ via the inspector.

On the gif image, it seems possible to set the alignment to Top, Middle, Center, Absolute Middle etc. etc.

But none of these settings ever seems to keep the gif aligned “in the middle of the cell” as per the text. Or at least, not consistently across browsers.

Obviously this may be a browser interpretation thing. But it doesn’t half make it tricky designing such ‘alignment’ in FW.

What should be the default settings so that all elements (text and images) align vertically centred in all, or most, browsers?


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/

Hi erns,

Mmmm, look at http://www.dowlass.plus.com/test

The top three cells have the arrow gifs aligned ‘middle’, the bottom three cells have the arrow gif aligned ‘center’.

doesn’t look so bad in Safari, although you can visibly see the difference between middle and center. But in firefox you can’t really tell the difference, but the the arrows are way out of line with the text.

Hugh


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

Oh, Hugh –

I can’t be of specific help to you, as you’re using Fwy 3.5 --I haven’t used that version in years.

Looking at your example, there is a paragraph style and a span class style (19 and 20) and each are a little different. (for the record, I found the image to be off in both FF and Safari). In Fwy4 I made a table with an image at the beginning of the line and had no trouble with it’s alignment using only a paragraph style to set left margin and all. There is so much going on in your page code that is different between 3 and 4 that I don’t think there’s time for me to work out a solution – which I could only express in terms of Fwy4 anyway.

As a thought, the font-height may be significant as the font uses space above and below (ascender and descender) that the image is centering off of. I think if you could at least get the image and the text to share the same attributes (no span style, just paragraph style to control the whole line).

OK, there’s my 2 cents :wink:

On Thu, Mar 13, 2008 at 4:02 AM, hugh wrote:

Hi erns,

Mmmm, look at http://www.dowlass.plus.com/test

The top three cells have the arrow gifs aligned ‘middle’, the bottom three cells have the arrow gif aligned ‘center’.

doesn’t look so bad in Safari, although you can visibly see the difference between middle and center. But in firefox you can’t really tell the difference, but the the arrows are way out of line with the text.


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/

Ooh, sorry Big E, I forgot to make the output ‘more readable’…!!!

Have a look at it again now, it might be easier to read the source!

http://www.dowlass.plus.com/test

I’ve no idea how tags arise, when or where FW puts them in, so can’t suggest what I’ve done to make the get in the code.

Hugh


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

Imagine you have a run of text with a style applied - let’s call it ‘grey’ - that makes the text…grey (go figure). Now imagine that there is a word (or words) within that run of grey text that you want to make red. You highlight those specific words then apply the ‘red’ style to that. Now when you view the code you’ll see that the span tags have been inserted to create the ‘red’ style.

For example:

Some grey text here I'm red textsome more grey txt to finish with.

That’s how you get them. Does that help?

Todd

On Mar 14, 2008, at 5:36 AM, hugh wrote:

I’ve no idea how tags arise, when or where FW puts them in, so can’t suggest what I’ve done to make the get in the code.

So span tags are effectively an exception to a general rule?

i.e. the general rule being that all my paragraph is grey, but two words I change to red are ‘spanned’ because they are an exception to the grey style?

??


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

Yes. Or think of it as the Cascading part of CSS. Because the ‘red’ style comes after the ‘grey’ whatever happens to be within the tags takes precedence over ‘grey’.

Todd

On Mar 14, 2008, at 8:29 AM, hugh wrote:

So span tags are effectively an exception to a general rule?

i.e. the general rule being that all my paragraph is grey, but two words I change to red are ‘spanned’ because they are an exception to the grey style?

That’s about the shape of it. Spans are local, character-level
styles, and one step up from that would be styles applied to a
container, like a paragraph or list item, up from that would be a
block, like a list or a div or a td, and on up and up until you reach
the body. (Which can also be styled.)

Walter

On Mar 14, 2008, at 9:29 AM, hugh wrote:

So span tags are effectively an exception to a general rule?

i.e. the general rule being that all my paragraph is grey, but two
words I change to red are ‘spanned’ because they are an exception
to the grey style?

??


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

Right then, thanks for those explanations…interesting!

Now. Back to the alignment issue… :wink:


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

I wish I could be more helpful – but we’re using two different versions of Freeway and I can’t recall how v3 even worked (I must be repressing painful memories :slight_smile:

But I did take a minute or two to work out how it might be done in v4, with tables (bleech!)
http://www.thebigerns.com/freeway/workbench/hugh-tableimage/

note: this example was done completely within Freeway 4 Pro. No extra programs or work outside of Fwy4 was used in the making of this page.

I didn’t have any problems at first – placing the arrow image before the text in each cell was easy and the results were instantly better than Hugh’s Fwy3 attempts. Still, I felt it needed some adjustment so I used CSS to adjust the image upward by 2 pixels… merely minor cosmetic surgery.

Not that I have any disdain for javascript, but I decided to apply the link styles using tried and true CSS methods instead. In doing so, I discovered that Freeway 4 was doing something with the code that made no sense to me at all.

When I created the first link, I placed my cursor at the beginning of the line (before the arrow image) and highlighted to the end of the line. Cmnd-K and link applied. When I did this, I assumed that Freeway would begin the link tag before the image and end it after the last word of text. Not so.

For some strange reason Freeway 4 wraps the anchor tags (link tags) around the image and the text separately, even though both are encased in the same paragraph tag. Huh? So my first thought was “hey dummy, you’re rusty and must be doing something wrong” so I tried it again. Then I tried it a different way. Then I tried some other different ways. I even tried inserting the image as a Markup Item, but Freeway treats that the same way. Eventually I hand coded the entire line in a markup item and applied the link to that. Ta Da!

Although as I write this, I wonder if I had inserted the markup of the image into the line after applying the link. Aw nuts, I’m not going back there again!

Good luck Hugh. I hope somebody finds this helpful :slight_smile:

PS. Here’s a link to an old article where I place an icon next to a link as a background to the link: enterprising CSS’ers may want to try and apply the method to a menu such as we’ve discussed here.
http://www.thebigerns.com/freeway/link_icons/

On Fri, Mar 14, 2008 at 3:36 AM, hugh wrote:

Ooh, sorry Big E, I forgot to make the output ‘more readable’…!!!

Have a look at it again now, it might be easier to read the source!

http://www.dowlass.plus.com/test

I’ve no idea how tags arise, when or where FW puts them in, so can’t suggest what I’ve done to make the get in the code.


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/

hmmm…yes…interesting stuff!! I imagine that was illuminating!

Thanks for taking so much trouble, appreciated. I’d love to have a look at your FW file…can you backsave to 3.5 or not? hj [at] lftech.free-online.co.uk if you can.

I’m aware that css could do the link - in fact many times I’ve made menus with css in freeway, though it’s always been trial and error to get it working ‘just so’. The javascript route is not trial and error, it just works!

But whether it’s css or javascript for the link and colouring effect, neither explain the dis-alignment of the arrow gif in my output.

And let’s face it, this is exactly what FW should be handling correctly. Having to handcode a solution into a markup item is exactly what we SHOULDN’T be doing in FW! Not for something this elementary, anyway.

Thanks e, send the file if you can. Love to know what that line of code was in the markup item :wink:

Hugh


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

Well, the point I had hoped to get across to you Hugh is that Freeway 4 had no problems achieving the centering effect you were aiming for (regardless of how links were applied). While I cannot say what is exactly causing your alignment problem, I can clearly say what is the solution. If your complaint is that FW3 should be working better, then FW4 is the solution that Softpress has already provided for you. Upgrade already.

On Fri, Mar 14, 2008 at 10:58 AM, hugh wrote:

hmmm…yes…interesting stuff!! I imagine that was illuminating!

Thanks for taking so much trouble, appreciated. I’d love to have a look at your FW file…can you backsave to 3.5 or not? hj [at] lftech.free-online.co.uk if you can.

I’m aware that css could do the link - in fact many times I’ve made menus with css in freeway, though it’s always been trial and error to get it working ‘just so’. The javascript route is not trial and error, it just works!

But whether it’s css or javascript for the link and colouring effect, neither explain the dis-alignment of the arrow gif in my output.

And let’s face it, this is exactly what FW should be handling correctly. Having to handcode a solution into a markup item is exactly what we SHOULDN’T be doing in FW! Not for something this elementary, anyway.

Thanks e, send the file if you can. Love to know what that line of code was in the markup item :wink:


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/