Strange word-wrap behaviour

**anjanesh** · Sep 3, 2007 13:13

Hi

Code CSS:

.tbl1 th span
 {
        font-weight:normal;
        float:right;
        margin:0 3px 0 0;
        position:relative;
        text-align:right;
        padding-right:5px;
        white-space: nowrap;
 }

I have this in a table (class name tbh1)'s th :

Code HTML4Strict:

<span>Batch : <a href="http://localhost/folder1/link1.html">2000</a></span>

but it spans in 2 lines (inspite of white-space:nowrap):

Code:

Batch :
2000

Just to test, I changed href to href1 (so that a href attribute isnt present)

Code HTML4Strict:

<span>Batch : <a href1="http://localhost/folder1/link1.html">2000</a></span>

and its in one line !

Code:

Batch : 2000

Hows that ?

**DaveWoods** · Sep 4, 2007 01:04

I've tested this and can't replicate what you're saying with the code you've provided so there must be something else that's effecting this.

This uses the code you've provided plus the rest of the table etc and it works as I'd expect.

Although I'd also question why you need position: relative and float: right within this style as I doubt they're doing anything?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tbl1 th span
 {
        font-weight:normal;
        float:right;
        margin:0 3px 0 0;
        position:relative;
        text-align:right;
        padding-right:5px;
        white-space: nowrap;
 }
</style>
</head>
<body>
<table class="tbl1">
             <tr>
                      <th><span>Batch : <a href="http://localhost/folder1/link1.html">2000</a></span></th>
                     <th><span>Batch : <a href="http://localhost/folder1/link1.html">2000</a></span></th>
             </tr>
             <tr>
                      <td>Some data</td>
                     <td>Some more data</td>
             </tr>
</table>
</body>
</html>

**anjanesh** · Sep 4, 2007 02:11

I seem to have messed up the anchor css - because, if I comment them its all fine.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tbl1
 {
        width:100%;
        margin:0 0px 5px 0px;
        font-family:Arial;
        font-size:13px;
        border-bottom:1px dotted black;
 }
 
.tbl1 th
 {
        text-align:left;
        padding:2px 0 3px 10px;
 }
 
.tbl1 th span
 {
        font-weight:normal;
        float:right;
        margin:0 3px 0 0;
        position:relative;
        text-align:right;
        padding-right:5px;
        white-space: nowrap;
 }
 
.tbl1 th span a:link
 {
        float:left;
        font-size:14px;
        color:blue;
        font-family:Arial;
 }
 
.tbl1 th a:link
 {
        float:left;
        font-size:14px;
        color:#000;
        font-family:Arial;
 }
 
.tbl1 th a:visited
 {
        color:blue;
 }
 
.tbl1 th a:hover
 {
        text-decoration:underline;
 }
</style>
</head>
<body>
        <table class="tbl1">
        <tr>
        <th colspan="5">
        <a href="http://localhost/folder1/link1.html">Data Line 1</a>
        <span>Batch : <a href="http://localhost/folder1/link8.html">2000</a></span>
        </th>
        </tr>
 
        <tr>
        <td rowspan="5" style="vertical-align:top; width:160px; text-align:center;">
        <a href="http://localhost/folder1/link7.html">
        <img src="http://localhost/folder1/photo.jpg" style="border:1px solid gray; width:150px; height:125px" alt="Photo"/>
        </a>
        </td>
        <td>Data Line 2, <i>Data Line 3</i></td>
        </tr>
 
        <tr><td>in <a href="http://localhost/folder1/link2.html">Data Line 4</a>, <a href="http://localhost/folder1/link3.html">Data Line 5</a>, <a href="http://folder1/link4.html">Data Line 5</a></td></tr>
        <tr><td>CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.</td></tr>
        </table>
</body>
</html>

**DaveWoods** · Sep 4, 2007 02:30

Ok, this bit of code doesn't seem to be doing anything apart from causing problem.

Code:

.tbl1 th span a:link
 {
        float:left;
        font-size:14px;
        color:blue;
        font-family:Arial;
 }
 
.tbl1 th a:link
 {
        float:left;
        font-size:14px;
        color:#000;
        font-family:Arial;
 }

Remove that and your link will display on one line, however it will also drop a line below your text on the left, if you want them both to appear on the same line then the easiest solution is to swap round these two lines of your code.

Code:

<a href="http://localhost/folder1/link1.html">Data Line 1</a>
<span>Batch : <a href="http://localhost/folder1/link8.html">2000</a></span>

To this,

Code:

<span>Batch : <a href="http://localhost/folder1/link8.html">2000</a></span>
<a href="http://localhost/folder1/link1.html">Data Line 1</a>

Or alternatively you could just apply a class to the left link and float that left which would have the same effect.

Hope that helps.

**anjanesh** · Sep 4, 2007 04:35

1. I need both on the same line.
2. Cant afford to swap because Data Line 1 is most important and Batch : 2000 is related.
3. I thought th a:link is like applying a class to the left link, because I've specifically defined th span a:link. Im looking for more properties to define in the latter because I think some inherited property is causing the trouble.

I know how css gurus speak of word tableless a lot, an Im going in that track - but frankly speaking, tables dont create small issues like this - alignment is much faster.
If I split it using 2 separate ths, it works.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tbl1
 {
        width:100%;
        margin:0 0px 5px 0px;
        font-family:Arial;
        font-size:13px;
        border-bottom:1px dotted black;
 }
 
.tbl1 th
 {
        text-align:left;
        padding:2px 0 3px 10px;
 }
 
.tbl1 th span
 {
        font-weight:normal;
        margin:0 3px 0 0;
        position:relative;
        text-align:right;
        padding-right:5px;
        white-space: nowrap;
        float:right;
 }
 
.tbl1 th span a:link
 {
        color:blue;
 }
 
.tbl1 th a:link
 {
        color:#000;
 }
 
.tbl1 th a:visited
 {
        color:blue;
 }
 
.tbl1 th a:hover
 {
        text-decoration:underline;
 }
</style>
</head>
<body>
        <table border=1 class="tbl1">
        <tr>
        <th colspan="4" style="width:150px">
        <a href="http://localhost/folder1/link1.html">Data Line 1</a>
        </th>
        <th>
        <span>Batch : <a href="http://localhost/folder1/link8.html">2000</a></span>
        </th>
        </tr>
        <tr>
        <td rowspan="5" style="vertical-align:top; width:150px; text-align:center;">
        <a href="http://localhost/folder1/link7.html">
        <img src="http://localhost/folder1/photo.jpg" style="border:1px solid gray; width:150px; height:125px" alt="Photo"/>
        </a>
        </td>
        <td colspan="5">Data Line 2, <i>Data Line 3</i></td>
        </tr>
        <tr><td colspan="5">in <a href="http://localhost/folder1/link2.html">Data Line 4</a>, <a href="http://localhost/folder1/link3.html">Data Line 5</a>, <a href="http://folder1/link4.html">Data Line 5</a></td></tr>
        <tr><td colspan="5">CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.</td></tr>
        </table>
</body>
</html>

User Tag List

Thread: Strange word-wrap behaviour

Thread Tools

Display

Strange word-wrap behaviour

Bookmarks

Bookmarks

Posting Permissions