4
Contributors
5
Replies
10
Views
5 Years
Discussion Span
Last Post by JorgeM
0

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

0

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

0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.