Vertically aligning columns in my gallery?

[leilanimunter]

Hi there,

I have a question - I am a recent convert and in my photo gallery I have three columns:

http://leilanimunter.com/photogallery.htm

On a PC, the columns are aligned at the top in Firefox, but look all messed up in IE.

On my Apple, it looks fine in Safari but they are not aligned properly in Firefox.

I am just adding breaks at the bottom to move the other shorter columns up. Is there a code where I can vertically align these columns at the top so it will work on all browsers? Thanks for any help you can offer!

Leilani

 

[angelwatt]

Oi, that's a horrible mess of HTML (sorry for bluntness). It needs some serious cleaning up for validation before anything else. Run this validator on your page and work on fixing most of the 83 errors. As a partial answer you can use CSS's vertical-align set to top to do just that. I'm not exactly sure where you should place it, but it looks like you're using a table layout so it would be applied to the td encapsulating those gallery columns.

 

[leilanimunter]

Thanks for your reply. No worries being blunt - I'm not a pro at this by any means - I did not have money to hire any help when I first started racing 8 years ago - I had to teach myself how to put up a website so all of my html writing has been self taught so I'm sure I have tons of mistakes to correct, thanks for sending me that link. I would have to go through hundreds of pages of my site in order to fix all of the mess... over the past eight years my site has become pretty big, but someday I will get to it.

That being said, I would like to make sure that my photo gallery columns line up properly on all browsers so would you be so kind as to tell me what code I need to enter into the page and where? I haven't done any css coding either, I just write the simple html in textedit or on my pc, in notepad. So you are going to have to walk me through this with patience.Thanks for your assistance!

Leilani

 

[leilanimunter]

anyone?

 

[gotblah]

So, the simplest way is to set the vertical alignment of the TD's to top.

You can do it several ways. First just add a valign="top" attribute to the TD element.

<td width="250" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" valign="top">

You can also set it using CSS, for this you can either do it inline (add a style attribute to the TD element) or you can set it globally for all TD's, the benefit of setting it globally in a stylesheet, or a style element in the HEAD is that you don't have to add it to every single TD.

Inline:

<td width="250" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="vertical-align:top">

In the HEAD (add the next 3 lines before the close style tag)

td {
  vertical-align:top;
}
</style>

Hope that helps, I would suggest that you learn a little CSS and Valid HTML code. It will really make your life easier when it comes to browser testing and you'll end up with a lot less code to write.

 

[leilanimunter]

thanks for your help, i will try to learn more code some day when i have more time. i did the valign="top" in my TD element but for some reason it still doesn't align properly in IE. oh well. someday i will figure it out.

thanks again

leilani