Solved

Getting the some of the text on one line in a table cell to appear on the next line

Posted on 2014-04-01
3
216 Views
Last Modified: 2014-04-02
I posted this question earlier and received a response. I thought it was the solution, however it did not work across all browsers, only in Firefox and Chrome. It did work in Chrome initially, but not all the time.  It also did not work in Safari or IE. My question is this:

I have the following HTML code:

<div align="center">
<p><table width="60%">
  <tbody style= "line-height:12px; font-size:11px">
  <tr>
<th height="20" bgcolor="#f3f3ea" colspan="4" align="left"><div align="center">UAB Terms</div></th>
</tr>
<tr>
      <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/fall-2014" target="_self">Pre-established Fall 2014</a></div></td>
  
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015"target="_self">Pre-established Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015-regular"target="_self">Regular Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/summer-2015"target="_self">Summer 2015</a></div></td>
  </tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
</tbody>
</table>
</p>
</div>

Open in new window

Currently, the value in the third column, "Regular Spring 2015" displays like this:

Regular Spring
2015

I would like to have it be displayed like this:

Regular
Spring 2015

How do I get the word "Spring" to appear on the next line? I don't want the contents in the other cells to change, only for this particular cell. I would also like a solution that will work on all browsers.

Thanks.
0
Comment
Question by:geeta_m9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
ID: 39971008
Me again. Try this -

Regular<br />
Spring&nbsp;2015

Adds a single line break after the Regular and keeps Spring and 2015 together.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39971452
Is this for html5 or html4 or xhtml?

I put it through the validator http://validator.w3.org/ all ways and there was an error of some type in each one.  If you can get the code to be valid, you will have a better chance of browsers display your content in a similar fashion.

I would get rid of the p tag surrounding the table to start. That is not needed.  

I also would add the br tag to the other headings as well.  That will force all headings to act the same.  Don't rely on what you see.  You have the width set to a percent and there will be 1000 different widths from 340px wide to over 2000 px wide.
0
 

Author Closing Comment

by:geeta_m9
ID: 39972769
Thanks, that seemed to do the trick. I ended up having to do the same thing to the rest of cell contents as well but now they are all appearing the way I want them to.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question