CSS caption Formatierung wird falsch angezeigt

Reiser · 2 Februar 2010

Hallo,

leider hab ich Probleme mit CSS. :/
Bei mir wird es im IE und Opera richtig angezeigt, aber nicht im FF. Wie markiert fehlt eine Borderline im bottom des Caption-Bereichs. Das eigendliche Problem ist aber, dass das(?) Caption beim FF um ein Pixel nach rechts einrückt. Wenn ich border-left:-1px; setze, dann wird es bei FF korrekt angezeigt aber in den anderen Browsern net.

Kann mir bitte Jemand helfen? :)

Hier der Code der HTML-File:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<title>ThorCP - F1Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="../styles/gsv_grey/admin/css/contend.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<p class="hfont">F1Title</p>
<hr>
<br>
<form name="form1" id="form1" method="POST" action="[MessageBox]">
<table class="stdtable">

<caption>Formular Uno</caption>

<tr>
 <td colspan="2" class="stdtable_clr">
  Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1
 </td>
</tr>

<tr>
 <th>
  Input
 </th>

 <td align="left">
  <input type="text" name="name" id="name" value="Value" size="35">
 </td>
</tr>


</table>
</form>
</body>
</html>

Der CSS-Code:

PHP:

body,p,ul,ol,li,address,blockquote,nobr,th,td,tr,table,caption {
   /*font-family:Tahoma,Verdana,Arial Narrow,Helvetica,Arial;*/
   font-family: "Franklin Gothic Medium", Helvetica, Verdana, Arial, sans-serif;
   font-size: 14px;
   SCROLLBAR-FACE-COLOR: #eaeff3;
   SCROLLBAR-HIGHLIGHT-COLOR: #eaeff3;
   SCROLLBAR-SHADOW-COLOR: black;
   SCROLLBAR-ARROW-COLOR: black;
   SCROLLBAR-BASE-COLOR: #eaeff3;
   scrollbar-3d-light-color: #296e95;
   scrollbar-dark-shadow-color: #000000;
   background-color: transparent;
   border-collapse: collapse;
   border-color: #aaaaaa;
   border-width: 1px;
   border-style: none;
   padding: 0px;
   vertical-align: top;
}

div {
   /*float:right;*/
   display:inline;
}

body {
   margin-top:5;
   /*background-color: #E0E0E0;*/
   background-color: #fefefe;
}

th {
   font-weight: normal;
   text-decoration: none;
}

hr {
   background-color: #cccccc;
   color: #aaaaaa;
   height: 1px;
   border-style: none;
   padding: 0;
   /*border-bottom-color:#cccccc;
   border-bottom-width:1px;
   border-bottom-style:solid;*/
}

input,select {
   border-style: solid;
   border-width: 1px;
   border-color: #aaaaaa;
   background-color: #e3e3e3;
   padding: 1px;
   margin-top: 2px;
   margin-bottom: 2px;
   font-family: Tahoma, Verdana, Arial Narrow, Helvetica, sans-serif, Arial;
   font-size:12px;
   color: #000000;
}

button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  color: GrayText;
}

/*button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}*/

p {
   padding:0;
   position: relative;
   margin-bottom: 10px;
}

A, TD, TH {
   text-decoration: none;
   /*color:#222C8A;*/
   color: #000000;
   /*font-weight:bold;*/
}

A {
   text-decoration: none;
}

A:hover {
   text-decoration: underline;
}

A:active {
   text-decoration: underline;
}

A:visited {
   text-decoration: none;
}

PRE {
   text-decoration: none;
   color: #000000;
   font-size: 10pt;
}

:link IMG, :visited IMG {
   border: #000000 1px hidden;
}

:link hover IMG {
   moz-border: 1px dashed #000000;
}

:hover IMG {
   border: black 1px dashed;
}

:active IMG {
   border: black 1px dashed;
}

:hover IMG {
   moz-border: 1px dashed black;
}

/*Start*/

.stdtable {
   padding: 3px;
   /*vertical-align: middle;*/
}

.stdtable table {
   width: 400px;
   table-layout: fixed;
}

.stdtable caption {
   border-style: solid;
   border-bottom: none;
   /*vertical-align: middle;*/
   background: url(../img/header_bg.gif);
   background-repeat: repeat-x;
   background-position: top;
   margin: 0px;
   margin-left:0px;
   padding: 2px;
   padding-left: 4px;
   padding-right: 4px;
   text-align: left;
   font-weight: bold;
   table-layout: fixed;
}

.stdtable th, td {
   border-style: solid;
   padding-left: 4px;
   padding-right: 4px;
   text-align: left;
   vertical-align: middle;
   table-layout: fixed;
   width: 50%;
}

.stdtable th {
   color: #444444;
}

.stdtable IMG {
   vertical-align: middle;
}

.stdtable_clr {
   background-color: #e3e3e3;
}

.stdtable_submit {
   text-align: right;
   vertical-align: middle;
   padding: 1px;
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
   padding-bottom: 0px;
   width: 100%;
}

.stdtable_submit IMG {
   border-style: none;
   vertical-align: top;
   padding-top: 2px;
}

#lowinfo {
   color: #444444;
}

#stdtable_name {
   color: red;
   /*color: #444444;*/
   /*font-family:Tahoma,Verdana,Arial Narrow,Helvetica,Arial;
   font-size:14px;*/
   /*font-family: "Franklin Gothic Medium", Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-family: Courier, mono;*/
}

#info_text {
   font-size: 12px;
   color: darkgrey;
}

#required_star {
   color: red;
}

#txtbutn_back, #txtbutn_back A, #txtbutn_back A:hover, #txtbutn_back A:active, #txtbutn_back A:visited {
   color: darkgrey;
}
#txtbutn_back A:hover, #txtbutn_back A:active {
   text-decoration: underline;
}

.blanktable_tbl {
   background-color: transparent;
   border-style: none;
   border-width: 0px;
   padding: 0px;
   padding-top: 3px;
   padding-right: 0px;
   padding-left: 0px;
}

.blanktable_tbl td, .blanktable_tbl th {
   background: url(../img/blank.gif);
   text-decoration: none;
   padding-right: 0px;
   padding-left: 0px;
}

.blanktable, .blanktable2, .blanktable3 {
   background-color: transparent;
   border-style: none;
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   table-layout: fixed;
   vertical-align: middle;
   width: 100%;
}

.blanktable table, .blanktable2 table, .blanktable3 table {
   width: 100%;
   table-layout: fixed;
}

.blanktable td, .blanktable th, .blanktable2 td, .blanktable2 th, .blanktable3 td, .blanktable3 th {
   background-color: transparent;
   background: url(../img/blank.gif);
   text-decoration: none;
   padding: 0px;
   margin: 0px;
   vertical-align: middle;
   table-layout: fixed;
}

.blanktable td, .blanktable th, .blanktable3 td, .blanktable3 th {
   width: 50%;
}

.blanktable2 th {
   width: 80%;
}

.blanktable2 td {
   width: 20%;
}

.blanktable th {
   text-align: left;
   font-weight: normal;
}


.blanktable td {
   text-align: right;
}

.hfont {
   font-size: 20pt;
   font-family: Tahoma, Verdana, Arial Narrow, Helvetica, sans-serif, Arial;
}

Screenshots:
Firefox 3.5.7

Internet Explorer 8.0.7600

Opera 10.10

Efchen · 2 Februar 2010

Reiser schrieb:
Wie markiert fehlt eine Borderline im bottom des Caption-Bereichs.

Im Stylesheet steht "border-bottom:none;".

Das eigendliche Problem ist aber,

dass die Tabelle da am falschen Platz ist. Du hast keine tabellarischen Daten, also gehört da auch keine Tabelle hin.

Für alles weitere bitte einen Link zur Seite.

Was soll denn "div { display:inline; }"? Das ist ja wohl ziemlicher Nonsense! Kennst Du <span>?

margin-top:5; ??? Fünf was?

Mein Tipp: Beseitige erstmal Deine Fehler in HTML- & CSS-Code. Wie kannst Du erwarten, dass ein fehlerbehaftetes Dokument richtig angezeigt wird?

Gilles · 2 Februar 2010

Probier dein Formular mal anedrs aufzubauen. Denn du benutzt eine tabelle, obwohl du keine tabellarischen Daten hast.

probier mal folgende Aufbau:

HTML:

<div class="formular_box">
  <h2>Überschrift</h2>
  <p>dein text</p>
  <span>Input</span>
  <input type="text" name="formvalue" />
</div>

Ich hab mal h2 genommen, da meistens auf der Seite noch eine hauptüberschrift ist. Sollte dem nicht so sein, stimmt h2 natürlich nicht. Pass dir das so an.
Du kannst nun mit CSS das ganze designen.

Code:

.formular_box {
  border: 1px solid #888888;
}

.formular_box h2 {
  border-bottom: 1px solid #888888;
}

usw. Ist halt nur ein Beispiel wie das aussehen könnte

Körnerbrötchen · 2 Februar 2010

Zwischen <table> und <tr> gehört sowieso überhaupt erst einmal kein Content, von daher kann es ja nicht klappen.

Efchen · 2 Februar 2010

Körnerbrötchen schrieb:
Zwischen <table> und <tr> gehört sowieso überhaupt erst einmal kein Content, von daher kann es ja nicht klappen.

Falsch. Da gehört genau das hin, was da steht: <caption>.
SELFHTML: HTML/XHTML / Tabellen / Tabellenbeschriftung und Tabellenausrichtung

Reiser · 3 Februar 2010

Danke! :)
Bin jetzt einfach mal auf Div und Span umgestiegen, obwohl ich mich an die Tabellen eigendlich schön gewöhnt hab. :/

Nun folgendes Problem:
Ich will das Formular aufbauen, es klappt aber nicht:
Das Problem ist, das der Label und die dazugehörende Input-Box nicht nebeneinander angezeigt werden, sobald ich padding-right: auf 5px beim Label setze.

Hier die Screenshots:

So schauts mit padding-right: 5px; aus:

Nochmal das ganze mit border, damit man den Pfusch sieht:

So schauts mit padding-right: 0px; aus:

Hier der Code:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<title>ThorCP - F1Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
.sform {
  padding: 3px;
  min-width: 400px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  /*vertical-align: middle;*/
}

.sform table {
  /*color: #000;
  background-color: #cc9;
  border: 1px solid #666;
  table-layout: fixed;*/
}

/* Gen. header-container */
.sform_h {
  border: 1px solid #aaaaaa;
  /*border-bottom: 1px solid #cccccc;*/
  border-bottom: 2px solid #aaaaaa;
  /*vertical-align: middle;*/
  background: url(../img/header_bg.gif);
  background-repeat: repeat-x;
  background-position: top;
  margin: 0px;
  margin-left:0px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  table-layout: fixed;
}

/* Text-section of header-container */
.sform_h span {
  text-align: left;
  font-weight: bold;
}

/* Define boarder for containers */
.sform_l, .sform_r1, .sform_r2 {
  border: 1px solid #aaaaaa;
  border-top: none;
  border-collapse: collapse;
}

/* Label container */
.sform_l {
  clear: both;
  padding: 2px 0px;
  background-color: #e3e3e3;
}

/* Label container -- text */
.sform_l_txt {

}

/* Std row containers */
.sform_r1, .sform_r2 {
  overflow: hidden;
  clear: none;
  /*padding: 2px 0px;*/
}

/* Std row container #1 only */
.sform_r1 {
  /*background-color: grey;*/
  background-color: #eeeeee;
}

/* Std row container #2 only */
.sform_r2 {
  background-color: #eeeeee;
}

/* Std row containers -- Labels */
.sform_r1_lbl, .sform_r2_lbl {
  float: left;
  width: 50%;
  padding-top: 3px;
  padding-right: 5px;
  text-align: right;
  clear: none;
}

/* Std row containers -- Inputs */
.sform_r1_inp, .sform_r2_inp {
  float: right;
  width: 50%;
  text-align: left;
  clear: none;
}
</style>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<div style="body2">
<p class="hfont">F1Title</p>
<hr>
<br>
<div class="sform">

<form name="form1" id="form1" method="POST" action="[MessageBox]">
  <div class="sform_h">
    <span>Formular Uno</span>
  </div>

  <div class="sform_l">
    <span class="sform_l_txt">Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1</span>
  </div>

  <div class="sform_r1">
    <span class="sform_r1_lbl">Input</span>
    <span class="sform_r1_inp"><input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \></span>
  </div>

  <div class="sform_r1">
    <span class="sform_r1_lbl">Input</span>
    <span class="sform_r1_inp"><input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \></span>

  </div>

  <div class="sform_r1">
    <span class="sform_r1_lbl">Input</span>
    <span class="sform_r1_inp"><input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \></span>
  </div>

  <div class="sform_r1">
    <span class="sform_r1_lbl">Input</span>

    <span class="sform_r1_inp"><input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \></span>
  </div>

</form>
</div>
</div>
</body>
</html>

Wie krieg ich des hin, das Label und Input-Bereich nebeneinander angezeigt werden, bei padding-right: 5px; ?

Efchen · 3 Februar 2010

Reiser schrieb:
Bin jetzt einfach mal auf Div und Span umgestiegen, obwohl ich mich an die Tabellen eigendlich schön gewöhnt hab.

1. Tabellen sind auch nicht böse. Sobald Du tabellarische Daten auszeichnen willst, wirst Du wieder eine Tabelle brauchen.
2. Und wozu hast Du das allgemeine Inline-Element <span> nun eingesetzt? Das ist da völlig sinnfrei. Ich seh auch, dass GILLES Dir das falsch beigebracht hat :-) Da gehört nämlich ein <label> hin.

Hier alles zum Thema anständige Formulare: Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

Das Problem ist, das der Label und die dazugehörende Input-Box nicht nebeneinander angezeigt werden

Du hast keine Labels.
Labels hast Du nur dann, wenn Du auch <label> verwendest.

Deine Elemente sind aber vermutlich deshalb nicht nebeneinander (wozu floatest Du Deine Inline-Elemente überhaupt? Die sind ohnehin nebeneinander und dann würde es auch passen), weil der Platz nicht ausreicht, die beiden Elemente mit fester Größe nebeneinander ins Elternelement zu packen.

Hier die Screenshots:

Ein Link zur Seite ist einfacher und da kann Dir besser geholfen werden.

Jetzt korrigier erstmal Dein HTML. So kann das nicht bleiben.

Reiser · 3 Februar 2010

Super!
Ich habe den linken Bereich vor den Inputs mal Labels genannt. Das hatte bei mir nichts mit einem <label> zu tun! ;)

Jedoch weis ich nicht, wie ich es realisieren soll, das Formular wie folgt anzuzeigen:

Das ist mit meinem alten HTML-Code realisiert worden. Der Trennstrich in der Mitte zwischen Label und Input ist mir egal, jedoch soll rechtsbündig der Label stehen und bei 50% Abstand der Input auch rechtsbündig angezeigt werden wie oben.
Bisher hatte ich noch nicht viel Erfolg.
Kann mir bitte jemand helfen? :)

Hab mich ein bisschen gespielt:

CSS:

PHP:

/* Std row container #1 only */
.sform_r1 {
  /*background-color: grey;*/
  background-color: #eeeeee;
  text-align: center;
}

/* Std row container #2 only */
.sform_r2 {
  background-color: #eeeeee;
  text-align: center;
}

/* Std row containers -- Labels */
.sform_r1 label, .sform_r2 label {
  left: 50%;
  vertical-align: middle;
  padding-left: 3px;
  padding-right: 5px;
}

/* Std row containers -- Inputs */
.sform_r1 input, .sform_r2 input {
  left: 100px;
  text-align: left;
  clear: none;
  border: 1px dashed blue;
}

HTML:

PHP:

<div class="sform">
<form name="form1" id="form1" method="POST" action="[MessageBox]">
  <div class="sform_h">
    <span>Formular Uno</span>
  </div>

  <div class="sform_l">
    <span class="sform_l_txt">Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1 Label1</span>
  </div>

  <div class="sform_r1">
    <label for="name">Input</label>
    <input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \>
  </div>

  <div class="sform_r1">
    <label for="name">Input</label>
    <input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \>
  </div>

  <div class="sform_r1">
    <label for="name">Input</label>
    <input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \>
  </div>

  <div class="sform_r1">
    <label for="name">Input</label>
    <input type="text" name="name" class="sform_r1_inp_txt" id="name" value="Value" size="35" \>
  </div>

</form>
</div>

Efchen · 4 Februar 2010

Reiser schrieb:
Jedoch weis ich nicht, wie ich es realisieren soll, das Formular wie folgt anzuzeigen:

Indem Du meinem Link von Einfach-Für-Alle folgst und das Tutorial durcharbeitest.

Reiser · 4 Februar 2010

Da war ich schon drauf, die Seite ist sehr hilfreich, jedoch werden die Formulare in einer anderen Struktur aufgebaut. Keine Ahnung, wie ich meiner dieser anpassen könnte, dass es ungefähr gleich aufgebaut ist.

Efchen · 4 Februar 2010

Wieso? Die Struktur ist doch die selbe. Es geht immer um ein Label und ein dazugehöriges Eingabefeld.

Das Aussehen ist, wenn die Struktur einmal steht, doch eigentlich gar kein Problem.

Wenn ich Dein Bild ansehe, weiß ich gerade nicht, wo Dein Problem ist. 4 Überschriften, eine davon könnte auch die <legend> sein, 5 Labels, 5 Eingabefelder, ein Submit-Button, ein Text. Und Rahmen.

Da brauchts doch nicht viel:
<form>
<fieldset>
<legend>
<label>
<input>
<p>
<hx>
und evtl. noch <div> zum Gruppieren von Lebel und Eingabefeld.

CSS caption Formatierung wird falsch angezeigt

Reiser

Neues Mitglied

Efchen

Guest

Gilles

Blogger

Körnerbrötchen

Aktives Mitglied

Efchen

Guest

Reiser

Neues Mitglied

Efchen

Guest

Reiser

Neues Mitglied

Efchen

Guest

Reiser

Neues Mitglied

Efchen

Guest

Neueste Beiträge