Fixed TD Höhe Eigenschaft in HTML


3

Ich kann nicht td "Date" zu feste Höhe haben. Wenn im Bereich "Body" weniger td vorhanden ist, ist das Datumselement größer als es sein sollte - selbst wenn ich "Date height" auf 10% und "Body height" auf 90% setze. Irgendwelche Vorschläge?

<tr> 
    <td class="Author" rowspan="2"> 
    <a href="#">Claude</a><br /> 
    <a href="#"><img src="Users/4/Avatar.jpeg" style="border-width:0px;" /></a>   
    </td> 
    <td class="Date"> 
    Sent: 
    <span>18.08.2008 20:49:28</span> 
    </td> 
</tr> 
<tr> 
    <td class="Body"> 
    <span>Id lacinia lacus arcu non quis mollis sit. Ligula elit. Ultricies elit cursus. Quis ipsum nec rutrum id tellus aliquam. Tortor arcu fermentum nibh justo leo ante vitae fringilla. Pulvinar aliquam. Fringilla mollis facilisis.</span> 
    </td> 
</tr> 

Und mein CSS für jetzt ist:

table.ForumThreadViewer td.Date { 
    text-align: left; 
    vertical-align: top; 
    font-size: xx-small; 
    border-bottom: solid 1 black; 
    height: 20px; 
} 

table.ForumThreadViewer td.Body { 
    text-align: left; 
    vertical-align: top; 
    border-top: solid 1 black; 
} 

table.ForumThreadViewer td.Author { 
    vertical-align: top; 
    text-align: left; 
} 

Es ist für FF arbeiten, aber nicht für den Internet Explorer. :(

  0

Bitte posten Sie Ihre CSS auch so jemand Ihnen helfen können. 23 sep. 082008-09-23 19:31:25

2

Oli hat recht! Geben Sie dann den Screenshot, den Sie gepostet haben, mit dem falschen Markup. Sie könnten etwas mehr wie folgt verwenden:

<div class="post"> 
    <div class="author"> 
    <a href="#">Claude</a><br /> 
    <a href="#"><img src="Users/4/Avatar.jpeg" /></a>   
    </div> 
    <div class="content"> 
    <div class="date">Sent: 18.08.2008 20:49:28</div> 
    <div class="body"> 
     This is the content of the message. 
    </div> 
    </div> 
    <div class="clear">&nbsp;</div> 
</div> 

mit CSS wie folgt aus:

div.post { 
    border: 1px solid #999; 
    margin-bottom: -1px; /* collapse the borders between posts */ 
} 
div.author { 
    float: left; 
    width: 150px; 
    border-right: 1px solid #999; 
} 
div.content { 
    border-left: 1px solid #999; 
    margin-left: 150px; 
} 
div.date { 
    border-bottom: 1px solid #999; 
} 
div.clear { 
    clear: both; 
    height: 0; 
    line-height: 0; 
} 
  0

Vielen Dank! :) 24 sep. 082008-09-24 04:33:54


0

CSS

.Date { 
    height: 50px; 
} 
  0

Funktioniert für FF, aber nicht für IE. 23 sep. 082008-09-23 19:49:17

  0

Funktioniert nicht für IE, weil IE es als eine Min-Höhe behandelt. Siehe: http://stackoverflow.com/questions/56658/how-do-i-specify-in-html-or-css-the-absolute-minimum-width-of-a-table-cell#56738 24 sep. 082008-09-24 03:36:44


0

ich Ihre Frage nicht vollständig verstehen, Sie sagen, wenn Sie verwenden diese:

.Date { 
height: 10% 
} 
.Body { 
height: 90%; 
} 

Dass die .Date td größer ist als es sein sollte wie? Weißt du, wie groß es sein sollte, ohne eine absolute Höhe einzustellen? Nimmst du Ränder und Abstände in Betracht?

Sie konnten versuchen, colspan="2" derhinzuzufügenoder ein zusätzliches <td> Element mit nur einem geschützten Bereich (&nbsp;)


6

Wenn Sie Prozentsätze verwenden, sind sie relativ zu ihrem Container, und selbst dann funktioniert das nur bei bestimmten Elementtypen. Ich stelle mir vor, damit dies funktioniert, müssen Sie die Höhe auf die <tr> s, und geben Sie die <table> eine Höhe. Wenn die Höhe <table> ebenfalls relativ ist, müssen Sie auch dem Container eine Höhe geben.

Aber mit Blick auf Ihre Daten, sind Sie wirklich sicher, Sie sollten eine Tabelle überhaupt verwenden ?!

  0

Was nicht arbeitest du nicht? Einverstanden, das sieht für mich nicht wie Tabellendaten aus! 23 sep. 082008-09-23 19:53:25