Rahmen um einzelnes Zeichen innerhalb table will nicht gelingen

[css noob]

Hallo Gemeinde,

wer kann mir helfen? Bin am verzweifeln. Eine relativ simple Aufgabenstellung sollte man meinen.
Mir reicht auch wenn das ganze im ie und firefox funktioniert.

Ein kleines eingerahmtes Plus Symbol und daneben ein kleiner Text...

Einzige Bedingung: Ich kann die table aussen nicht weglassen und vernünftigerweise durch ein <div> ersetzen, sonst müsste ich alles umbauen was schon da ist....

Es will mir nicht gelingen.

Hier mein letzter Versuch, der zumindest im firefox schon annähernd funktioniert hat, aber bei weitem nicht pixelgenau war:

  
<table>  
 <tr style='display:table-row; vertical-align: middle; text-align:center; border:1px solid red;'>  
  <td style='cursor:pointer; vertical-align: middle; text-align:center;'>  
   <div style='border: 1px solid black; height: 10px; width:10px; float:left; text-align: center; vertical-align: middle;overflow: hidden;'>  
    <div style='line-height: 10px; height: 10px; left: clear;'>+</div>  
   </div>  
   <div style='float:left; text-align: center; vertical-align: middle; margin-left: 5px;'>Text</div>  
  </td>  
 </tr>  
</table>  

Wie bekomme ich das "<div>" und innerhalb des divs das "+" in die Mitte.
Und das auch beim IE.

Wäre super wenn jemand Rat hat.

Danke und Grüße der Verzweifelte

[Der Martin]

Hi,

Ein kleines eingerahmtes Plus Symbol und daneben ein kleiner Text...

also ein einzelnes Zeichen im Fließtext?

Einzige Bedingung: Ich kann die table aussen nicht weglassen und vernünftigerweise durch ein <div> ersetzen, sonst müsste ich alles umbauen was schon da ist....

Das kann ich nicht glauben.

<div style='border: 1px solid black; height: 10px; width:10px; float:left; text-align: center; vertical-align: middle;overflow: hidden;'>

<div style='line-height: 10px; height: 10px; left: clear;'>+</div>
   </div>
   <div style='float:left; text-align: center; vertical-align: middle; margin-left: 5px;'>Text</div>

  
Wieso packst du die Textstücke dann in Block-Elemente? Und dann noch doppelt?  
Steck das Pluszeichen einfach in ein span-Element und gib dem den Rahmen. Fertig.  
  
Ciao,  
 Martin  

-- 
[Warum](http://community.de.selfhtml.org/zitatesammlung/zitat1208) können wir heute so sicher sagen, dass Gott keine Frau sein kann?  
Weil dann nach "Es werde Licht" der nächste Satz "Wie sieht denn das hier aus?!" gewesen wäre.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[css noob]

Hi,

super, erstmal Danke für den Tipp!
Aber wie bekomme ich die Unförmigkeit weg?
Hätte da gerne ein Quadrat drum rum - also gleiche Kantenlänge.

Und woher kommt der 1px Abstand (oben und links innerhalb der row)?

• ist nur im Firefox so.

<table>
 <tr style='display:table-row;'>
  <td style='cursor:pointer; border:1px solid red;'>
         <span style='border: 1px solid black;'>+</span>Text
  </td>
 </tr>
</table>

Grüße Florian

[Gunnar Bittersmann]

@@css noob:

nuqneH

Aber wie bekomme ich die Unförmigkeit weg?
Hätte da gerne ein Quadrat drum rum - also gleiche Kantenlänge.

Wenn du das Element auf 'display: inline-block' setzt, kannst du ihm Höhe und Breite zuweisen.

<tr style='display:table-row;'>

Was soll das denn? tr-Elemente haben von sich aus schon diesen Wert 'table-row'; kein Grund, den nochmals anzugeben.

<td style='cursor:pointer; border:1px solid red;'>
         <span style='border: 1px solid black;'>+</span>Text

Stilangaben gehören nicht ins HTML (inline @style), sondern ins Stylesheet.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, css noob!

<div style='line-height: 10px; height: 10px; left: clear;'>+</div>

left: clear; ist ungültiges CSS.

Ansonsten gilt, was Martin schrieb.

Matthias

[css noob]

Hi,

super, erstmal Danke für den Tipp!
Aber wie bekomme ich die Unförmigkeit weg?
Hätte da gerne ein Quadrat drum rum - also gleiche Kantenlänge.

Und woher kommt der 1px Abstand (oben und links innerhalb der row)?

• ist nur im Firefox so.

  
<table>  
 <tr style='display:table-row;'>  
  <td style='cursor:pointer; border:1px solid red;'>  
	 <span style='border: 1px solid black;'>+</span>Text  
  </td>  
 </tr>  
</table>  

Grüße Florian

[ichbinich]

Hallo,

Ein kleines eingerahmtes Plus Symbol und daneben ein kleiner Text...

Pack den Text in ein Element (bspw. <p>) und formatiere es mit CSS:
p:before { content:"\229E"; }

vg ichbinich