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
212 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
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 52

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

803 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