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!
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>
I visits and get bneficial information from it.Thanks for this post.
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
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!
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.