Go Premium for a chance to win a PS4. Enter to Win

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

Colgroup in Chrome

I am trying to line up a table, and it displays as expected in Firefox but not in Chrome.  All three columns are bumped up against each other.

HTML:
<div id='JKL'>
	<table class="warning">
		<tr>
			<colgroup>
			<col class="col1" />
			<col class="col2" />
			<col class="col3" />
			</colgroup>
			<td><img src="../images/arrowdown.gif"></td>
			<td>Don't stop here!<br><span class="secondline">Now</span></td>
			<td><img src="../images/arrowdown.gif"></td>
		</tr>
	</table>
</div>

Open in new window


CSS:
#JKL .warning table
{
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
	margin-left:auto;
	margin-right:auto;
	height: 30px;
}
#JKL .warning td
{
    font-size: 16px;
	font-weight:bold;
	padding-top: 10px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	vertical-align: center;
}
#JKL .warning .col1 .col3
{
    width: 60px;
}
#JKL .warning .col2
{
    width: 90%;
}

#JKL .warning td .secondline
{
    font-size: 12px;
	padding: 5px;
	margin-left: 2px;
	vertical-align:top;
	height: 30px;
}

Open in new window

0
kkbenj
Asked:
kkbenj
  • 2
1 Solution
 
s8webCommented:
Your CSS selectors should be:

#JKL table.warning
0
 
s8webCommented:
#JKL  table.warning
{
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
	margin-left:auto;
	margin-right:auto;
	height: 30px;
}
#JKL table.warning td
{
    font-size: 16px;
	font-weight:bold;
	padding-top: 10px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	vertical-align: center;
}
#JKL table.warning .col1, #JKL table.warning .col3
{
    width: 60px;
}
#JKL table.warning .col2
{
    width: 90%;
}

#JKL table.warning td span.secondline
{
    font-size: 12px;
	padding: 5px;
	margin-left: 2px;
	vertical-align:top;
	height: 30px;
}

Open in new window

0
 
kkbenjAuthor Commented:
Perfect.  Thank you.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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