asked on

Why is this not working?

Head out to http://www.greyghost5k.com. There's a section of text beneath the scrolling pictures that I'm trying to set up using a table configuration like this:

<table style="border-colllapse: collapse; background-color: #57626f; height: 240px;">
<tbody style="background-color: #57626f;">
<tr>
<td style="vertical-align: vertical; width: 240px; height: 174px;"><img alt="komen" src="http://greyghost5k.com/wp-content/uploads/2014/08/komen-300x217.jpg" width="240" height="174" /></td>
<td style="vertical-align: vertical; height: 174px;">
<h3 style="color: #ffffff;">This year we will be offering a commemorative “pink” Grey Ghost shirt for an extra $5. The Grey Ghost will donate that $5 to Race for a Cure. Simply indicate your desire to make a donation when you register.</h3>
</td>
</tr>
</tbody>
</table>

Open in new window

Pretty straight forward, right? Thing is, it looks great within the editing infrastructure, but live, it's got a white background and the alignment's all over the place and I can't figure out what to do differently.

Any suggestions?

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Abhijeet Rananaware

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Abhijit and webmatrixpune!

First off thanks for your time and counsel.

Webmatrixpune, I went through your logic and steps and concluded that you're right. There's probably some formatting in other style sheets that need to be "overridden" in order to achieve what I need.

Abhijit, I have used the HTML and CSS exactly as you recommended and we're close, but still not there. Check out the page at http://greyghost5k.com

What do you think?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

One other adjustment you may want to add is a media query to drop the text down for mobiles so you don't have a tall narrow block of text.

@media (max-width: 400px) {
	.post-entry-2251 h3 img {
		display:block;
		margin: 0 auto;
	}
}

Open in new window

Bruce Gust

ASKER

So by putting the image within the h3 style, I get the end result I was looking for. Before, I was positioning the image first and then adding my h3 text and the result was always such where I had a bunch of left over space at the top, which is why I was gravitating towards a table, thinking I could better control the alignment.

Your suggestion worked perfectly, in part, I'm thinking, because the the table dynamic was being effected by other formatting in other css files, yes?

Don't know, but by steering clear of all that, I got what I needed!

Thanks!

Gary

Nothing to do with any other css, tables are just messy.