✔ CSS formatierte Tabelle

[kabar]

Hallo,

ich habe ein CSS-Problem,
das ich einfach nicht in Griff bekomme.

Hier der Link:
http://www.schmidbauer-kachelofen.de/test/headline_fehler.html


Das Problem: ich soll eine Tabelle mit 2 Spalten
per CSS formatieren. Im Textfeld soll unterschiedlich viel
Text stehen. Steht nun sehr wenig Text im Textfeld,
wird das Feld für die Headline viel zu hoch -
im Internet Explorer 6.0 und 7.0 -
im Firefox wird es (siehe eingebetteter Screesnhot)
ganz richtig dargestellt.

max-height:22px wird von Internet Explorer 6.0 nicht unterstützt.

.teaserhead {
background:#DEDAD3 none repeat scroll 0%;
height: 22px; 
font-family: Verdana, Helvetica, Arial, sans-serif; font-weight:bold; font-size: 11px; color: #6D6D6D; padding-left:13px; 
line-height: 22px;
overflow: hidden;
}

<div class="contentbox50"><table border="0" cellspacing="0" cellpadding="0" class="teaserbox50">
  <tr> 
    <td rowspan="2" class="teaserimg"><img src="teaserbild1.jpg" width="139" height="103"></td>
      <td height="22" class="teaserhead">Headline</td>
  </tr>
  <tr> 
    <td class="teasertext"><p>Neque porro ... </p></td>
  </tr>
</table></div>

Gruß
kabar

 

[Maik]

Hi,

in diesem Fall empfiehlt es sich, die Klasse .teaserhead an ein DIV zu übergeben:

<td valign="top"><div class="teaserhead">Headline</div></td>

 

[kabar]

Vielen herzlichen Dank!
Man lebt & lernt

 

[Maik]

Aternativ zum DIV könntest du auch ein Überschriftenelement einsetzen

<td valign="top"><h1 class="teaserhead">Headline</h1></td>

 

[kabar]

ja, das ist eleganter.

 

[Maik]

Hab ich mir auch im nachhinein gedacht