Member Avatar for mel01

Having a problem with how Google Chrome is displaying a simple table.

All other borwsers look fine. Chrome has inconsistent heights between table td cells.

See here: http://www.careerlinkbc.com/newsite/webtest/index.php and look at the workshop calendar

Thanks in advance!

  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Good catch by and . The uneven cell heights in Chrome come from the <hr> you placed inside some cells. In Blink/WebKit, <hr> is a block-level element with default top/bottom margins and a border, so any cell containing one becomes taller than its siblings. That is why the issue disappears when you remove it, and why forcing no-wrap only masks the symptom. Also, <hr> is meant for a thematic break; if you just need a visual rule, CSS is the better tool. (developer.mozilla.org)

Two reliable fixes you can drop in:

/* Option A: keep <hr>, but neutralize its extra space inside table cells */
td hr {
  margin: 0;              /* remove default top/bottom margin */
  border: 0;
  border-top: 1px solid #ccc;  /* draw a thin rule */
  height: 0;
}
/* Option B: replace <hr> with a lightweight divider via CSS */
td .event + .event {
  border-top: 1px solid #ccc;
  margin-top: 6px;
  padding-top: 6px;
}
<!-- In each cell -->
<div class="event">Workplace Etiquette <span class="time">1pm-3pm</span></div>
<div class="event">Communication in the Workplace <span class="time">1pm-3pm</span></div>

Option B follows best practice: use CSS for the line and keep <hr> for semantic breaks, not layout. (developer.mozilla.org)

A couple of extras that help calendars like this stay consistent across browsers:

  • Avoid fixed pixel heights on <td>; content will naturally push rows taller. Instead, let the cell size itself or wrap content in an inner block if you want a minimum height.
  • If your columns jitter as content changes, set a table width and table-layout: fixed; to keep column widths predictable while text wraps. (developer.mozilla.org)

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

When I visit your link above, yes with Chrome there appears to be some type of issue. However, when I copy your table related mark-up and CSS into a dedicated htm file, the table renders perfectly as expected. Not sure what the issue is at this moment, as I am short on time, will try to look into it a bit deeper. But in the mean time, you have quite a bit of styles so go back and start looking into what else could be causing this issue.

Here is the code I used and the image is how it displayed in Chrome, locally..

<!DOCTYPE html>
<html>

<style>
#lmifp {width:480px;background:transparent; border:1px #fff solid; text-align:left; font-size:1em; line-height:150%; display:inline-block; margin:30px 20px 0 0px; margin:30px 20px 0 0\8;}
#lmifp h2{font-size:20px;}
#lmifp h3{font-size:20px; padding:10px 0 0 0; padding:3px 0 0 0\9;}
#lmifp img{border:1px #000 solid; }
#lmifp .fr{float:right; vertical-align:text-top; padding:10px 0 10px 0; margin:0 0 0 10px;}
#lmifp p{font-size:1em; line-height:150%;}
#lmifp li{font-size:1em; line-height:150%;}
#lmifp table{width:510px; border-spacing:0; border-collapse:collapse;}
#lmifp caption{width:100%; color:#f37621; background:#369; font-size:2em; letter-spacing:2px; padding:10px 0 10px 0; border-bottom:1px #fff solid;}
#lmifp thead{width:100%; color:#fff; background:#369; font-size:1em; border:#369 1px solid;}
#lmifp th{padding:10px 0 10px 5px; text-align:center;}
#lmifp td{width:19%; height:50px; border:1px #369 solid; text-align:left; padding:10px 5px 10px 10px; vertical-align:top; font-size:0.8em; line-height:120%;}
#lmifp .fr{float:right; margin:-15px 0 0 0; color:#369;}
#lmifp hr{width:80%;}
</style>
<body>

<div id="lmifp">
<table><caption>January 2013</caption><thead><tr><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th></tr></thead><tr><td><span class="fr">21</span><br /></td><td><span class="fr">22</span><br /><span title="This workshop is designed for people who are just entering or recently returned to the workplace. Topics include:
*Establishing and maintaining good workplace relationships
*Dealing with workplace gossip and other inappropriate behaviour
*Using telephone and social media in a professional manner" class="wsmaintenance"><a href="javascript:pop(4);">Workplace Etiquette</a></span><br /><span class="thetime">1pm-3pm</span><hr /></td><td><span class="fr">23</span><br /><span title="Employers identify communication as one of the top skills needed in today?s workplace. Workshop topics include:
*Establishing Rapport with Employers & Coworkers
*Dealing with Difficult People
*Building Confidence at Work" class="wsmaintenance"><a href="javascript:pop(5);">Communication in the Workplace</a></span><br /><span class="thetime">1pm-3pm</span><hr /></td><td><span class="fr">24</span><br /><span title="- Learn the secrets of delivering a resume securely into employers' hands" class="wsjobsearch"><a href="javascript:pop(6);">Mastering the Art of Applying for Jobs Online</a></span><br /><span class="thetime">1pm-3pm</span><hr /></td><td><span class="fr">25</span><br /><tr><td><span class="fr">28</span><br /></td><td><span class="fr">29</span><br /><span title="This three-day workshop helps job seekers jumpstart their job search. Topics include:
*Creating a Leads List
*Searching the Online Job Banks
*Marketing Yourself to Employers
*How to Shine in Interviews
*Managing Your Motivation
*And more!" class="wsjobsearch"><a href="javascript:pop(7);">My Next Job</a></span><br /><span class="thetime">10am-3:30pm</span><hr /></td><td><span class="fr">30</span><br /><span title="This three-day workshop helps job seekers jumpstart their job search. Topics include:
*Creating a Leads List
*Searching the Online Job Banks
*Marketing Yourself to Employers
*How to Shine in Interviews
*Managing Your Motivation
*And more!" class="wsjobsearch"><a href="javascript:pop(18);">My Next Job</a></span><br /><span class="thetime">10am-3:30pm</span><hr /></td><td><span class="fr">31</span><br /><span title="This three-day workshop helps job seekers jumpstart their job search. Topics include:
*Creating a Leads List
*Searching the Online Job Banks
*Marketing Yourself to Employers
*How to Shine in Interviews
*Managing Your Motivation
*And more!" class="wsjobsearch"><a href="javascript:pop(19);">My Next Job</a></span><br /><span class="thetime">10am-3:30pm</span><hr /><td></td></tr></table>
</div></body>
</html>

Capture46

Member Avatar for sudhir22

I visits and get bneficial information from it.Thanks for this post.

Member Avatar for Biiim

It's the content of the top row making the first row expand to fit it, adding this shows the rows going to standard size

#lmifp td {
    white-space:nowrap;
}

maybe make the td larger to fit the text and have overflow:hidden; would solve it but thats your say on what to do :P

Member Avatar for mel01

Hello,

Thanks to all for your responses. On further inspection it seems to be a result of the <hr /> tag between the workshop listings that is causing the problem. Once remove the <td> tags render fine in all browsers.

Will have to find another method to separate each workshop listing.

Resolved this by replacing the <hr /> tag with a <div> tag that included a bottom-border.

Cheers and Thank you all again!

Edited by mel01
Member Avatar for JorgeM

Thanks for posting an update. that is helpful to others that may be having a similar issue. If the problem is resolved, feel free to mark it as such.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.