[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 144
  • Last Modified:

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?
0
brucegust
Asked:
brucegust
3 Solutions
 
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
 
brucegustAuthor 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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
 
brucegustAuthor 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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now