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?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings brucegust, , not sure I can help wid this, because you have 19 style files (.css) loaded with this, and the problem may be because of some CSS style in one or more of those.
One thing that you have in your table "style" that is very incorrect, is you have the table height as 240px, then you define the two <td> height as 174px;, this is incorrect, you can NOT have empty space in a table, the difference between the table 240 and the cells 174. you need to eliminate either the table height or the cells height, you should not have both in a single row table. Tables are designed to shrink or grow to fit the cell's contents, so if you have the image as height 174, then the table and both cells will all be 174 high.

What I do in cases like this is to start with a table that has NO style added at all, none , like this -
<table><tbody>
<tr>
<td><img alt="komen" src="http://greyghost5k.com/wp-content/uploads/2014/08/komen-300x217.jpg" style="width:240px; height:174px;" /></td>
<td>
<h3>This year we will be offering a commemorative “pink” Grey Ghost shirt for an extra $5.
<br />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

and see how that looks in the page display.  THEN only add style, or table modifiers, IF the display need to be changed. . .

as to the background color being white, I can not see how that happens, perhaps it has to do with other .css files? But I would not think so.you can try -
<div class='avia_textblock' style='background:#57626f;'>
in the surrounding div if the table background has the color as white when you add the style to it
0
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Following will solve
html :
<table id="front_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


css:
#front_table tr {
background: none;
}

Open in new window


Optional
<tr style="backround:none;>

Open in new window



Regards,
Abhijit
0
brucegustPHP DeveloperAuthor Commented:
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
What is the point of the table?
Why not just use

<h3 style="color: rgb(255, 255, 255); padding-top: 40px;">
<img width="240" height="174" alt="komen" src="http://greyghost5k.com/wp-content/uploads/2014/08/komen-300x217.jpg" style="float: left; margin-top: -25px;">
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 <a href="http://www.greyghost5k.com/event-registration">register</a>.
</h3>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
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

0
brucegustPHP DeveloperAuthor Commented:
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!
0
GaryCommented:
Nothing to do with any other css, tables are just messy.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.