DOCTYPE und display: inline von Benny, 25.08.2005 11:38

DOCTYPE und display: inline

Benny 25.08.2005 10:49

Moin,

welchen DOCTYPE muss ich verwenden um XHTML Konform zu bleiben
und zu erreichen, dass der IE6.0 (der einzige eingesetzte Browser
in meinem Intranet) nach einem <div>-Block keinen Zeilenumbruch
macht?

Ich will mehrere <div>-Blöcke nebeneinander anordnen, also z.B.:

  
<div style="display: inline">  
  Spalte 1  
</div>  
<div style="display: inline">  
  Spalte 2  
</div>  
...

Ich hab jetzt mal einfach alles weggelassen, was nicht
für das Beispiel wichtig ist.

Wenn ich keine DOCTYPE-Deklaration vornehme ist das Resultat
korrekt (also so wie ich es haben möchte). Mache ich eine
dann bricht der IE (ich will einen anderen BROWSER!!!) nach
jedem Block um (Warum nur?).

Hier noch mein verwendeter DOCTYPE

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD xhtml1-transitional.dtd">

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

schwarze Piste 25.08.2005 11:22

– Informationen zu den Bewertungsregeln

Tachchen!

Mache ich eine
dann bricht der IE (ich will einen anderen BROWSER!!!) nach
jedem Block um (Warum nur?).

Also ich kann das Problem nicht nachvollziehen.

Daher vermute ich, dass das Problem sehr wohl im nicht geposteten Code liegt.
Ist evetl. das Elternelement so schmal, dass die DIVs umbrechen müssen?

Gruß

Die schwarze Piste

--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

Benny 25.08.2005 11:38

– Informationen zu den Bewertungsregeln

Daher vermute ich, dass das Problem sehr wohl im nicht geposteten Code liegt.

Ist evetl. das Elternelement so schmal, dass die DIVs umbrechen müssen?

Nein, der einzige Unterschied zwischen meinen beiden Versionen ist
lediglich die Zeile mit dem DOCTYPE. Nehme ich diese raus, funktioniert es.

Sehr merkwürdig, naja ich bin wenigstens nicht der einzige mit
diesem Problem...

mfg Benny

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

Cheatah 25.08.2005 11:43

– Informationen zu den Bewertungsregeln

Hi,

Nein, der einzige Unterschied zwischen meinen beiden Versionen ist
lediglich die Zeile mit dem DOCTYPE. Nehme ich diese raus, funktioniert es.

das bedeutet, dass die gewünschte Darstellung derzeit nur durch einen Fehler erzielt wird.

Cheatah

--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

Benny 25.08.2005 12:25

– Informationen zu den Bewertungsregeln

Hi,

Nein, der einzige Unterschied zwischen meinen beiden Versionen ist
lediglich die Zeile mit dem DOCTYPE. Nehme ich diese raus, funktioniert es.

das bedeutet, dass die gewünschte Darstellung derzeit nur durch einen Fehler erzielt wird.

Cheatah

Meiner Meinung nach ist der IE DER Fehler... naja.

Angler hat das gleiche Problem. Er hat auch mehr Code gepostet.
Ausserdem beschreibt er, dass es in Mozilla damit keine Probleme gibt. Liegt wohl einzig am IE

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

Cheatah 25.08.2005 12:49

– Informationen zu den Bewertungsregeln

Hi,

Meiner Meinung nach ist der IE DER Fehler... naja.

da stimme ich Dir zu. In den Quirks-Mode zu wechseln bedeutet allerdings, den Browser fehlertoleranter zu machen[1] - wenn etwas nur dann funktioniert, liegt dies augenscheinlich an einem Codefehler.

Cheatah

[1] Im Falle des IE bedeutet es zusätzlich, dass er mehr Fehler als gewöhnlich macht. Nun ja, und ein oder zwei Fehler fehlen auch im Quirks-Mode. Insgesamt betrachtet wird ohne günstigen DOCTYPE das Chaos aber in die schlimmere Richtung verlagert.

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline

benny 25.08.2005 13:00

– Informationen zu den Bewertungsregeln

Sodale,

hier die 2 Dateien die ich geschrieben hab, der DOCTYPOE ist hier
schon rausgenommen:

Die HTML-Datei:

  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />  
    <title>  
      Personen suchen  
    </title>  
    <script type="text/vbscript">  
      <!-- #include file="connectDB.asp" -->  
    </script>  
    <link rel="stylesheet" type="text/css" href="../style/global.css" />  
  </head>  
  <body>  
    <%  
      '*********************  
      '* Suchen  
      '*********************  
      Dim searchItemString  
      Dim sqlString  
  
      searchItemString = Request.Form("searchPerson")  
  
      sqlString = "SELECT AnredeID, TitelID, Vorname, Nachname, MitarbeiterID " _  
        & "FROM tab_base_Mitarbeiter " _  
        & "WHERE ((Nachname LIKE '%" & searchItemString & "%')" _  
        & " OR (Vorname LIKE '%" & searchItemString & "%'));"  
  
      sqlString = "SELECT tab_base_Mitarbeiter.Mitarbeiter_ID, tab_base_Mitarbeiter.Einstellung, tab_base_Person.* " _  
        & "FROM tab_base_Mitarbeiter INNER JOIN tab_base_Person ON tab_base_Mitarbeiter.Person_ID = tab_base_Person.Person_ID " _  
        & "WHERE tab_base_Person.Nachname_FirmenName LIKE '%" & searchItemString & "%' " _  
        & " OR tab_base_Person.Vorname_Firmenzusatz LIKE '%" & searchItemString & "%';"  
  
      conn.Open connString  
  
      'SQL-Select ausführen und Ergebnis in Recordset speichern  
      Dim rs  
  
      Set rs = Server.CreateObject("ADODB.Recordset")  
      rs.Open sqlString, conn, 3, 3  
  
      'Recordset auslesen  
    %>  
    <h1>  
      Suchergebnisse zu "<%=searchItemString%>"  
    </h1>  
    <hr />  
    <%  
      Do While Not rs.EOF  
    %>  
    <div class="divPanel">  
      <div class="LabelRow">  
        <div>  
          Anrede, Titel:  
        </div>  
        <div>  
          Vorname:  
        </div>  
        <div>  
          Nachname:  
        </div>  
      </div>  
      <div class="ResultRowSmall">  
        <div class="ResultSmallInline">  
          <%=rs.Fields("Anrede_ID").Value%>  
        </div>  
        <div class="ResultSmallInline">  
          <%=rs.Fields("Titel_ID").Value%>  
        </div>  
        <div class="ResultMedium">  
          <%=rs.Fields("Vorname_Firmenzusatz").Value%>  
        </div>  
        <div class="ResultMedium">  
          <%=rs.Fields("Nachname_Firmenname").Value%>  
        </div>  
      </div>  
      <div class="LabelRow">  
        <div>  
        </div>  
        <div>  
        </div>  
        <div>  
          Geburtstag:  
        </div>  
      </div>  
      <div class="ResultRowSmall">  
        <div>  
        </div>  
        <div>  
        </div>  
        <div class="ResultSmall">  
          <%=rs.Fields("Geburtstag").Value%>  
        </div>  
      </div>  
    </div>  
    <%  
        rs.MoveNext  
      Loop  
  
      'Ressourcen freigeben  
      rs.close  
      conn.close  
    %>  
  </body>  
</html>

und die zugehörige CSS-Datei, nur relevante Teile

  
/*  
  *********************************  
  * Datenanzeigestyle             *  
  * Verwendet für folgende Seiten *  
  * - 01-A-00.asp                 *  
  * - 01-B-00.asp                 *  
  *********************************  
*/  
.divPanel  
{  
  font-family:      arial;  
  font-size:        10pt;  
  width:            55em;  
  background-color: #E0E0E0;  
  border:           0;  
  border-top-width: 0.2em;  
  border-color:     #FF0000;  
  border-style:     solid;  
  margin:           0.5em;  
  margin-bottom:    1em;  
  padding:          0.3em;  
}  
.divPanelSmall  
{  
  font-family:      arial;  
  font-size:        10pt;  
  width:            47em;  
  background-color: #E0E0E0;  
  border:           0;  
  border-top-width: 0.2em;  
  border-color:     #FF0000;  
  border-style:     solid;  
  margin:           0.5em;  
  margin-bottom:    1em;  
  padding:          0.3em;  
}  
.divPanel h4  
{  
  font-family:      arial;  
  font-size:        12pt;  
  font-weight:      bold;  
  margin:           0;  
}  
.divPanelSmall h4, .divPanelSmall form  
{  
  font-family:      arial;  
  font-size:        12pt;  
  font-weight:      bold;  
  margin:           0;  
}  
.LabelRow  
{  
  font-family:      arial;  
  font-size:        10pt;  
  font-weight:      bold;  
  display:          inline;  
  width:            10em;  
  margin:           0;  
  padding:          0;  
}  
.LabelRow div  
{  
  font-family:      arial;  
  font-size:        10pt;  
  width:            12em;  
  height:           1.9em;  
  margin:           0.05em;  
  padding:          0;  
  font-weight:      bold;  
  border-width:     0.1em;  
  border-style:     solid;  
  border-color:     #E0E0E0;  
}  
.ResultRow  
{  
  font-family:      arial;  
  font-size:        10pt;  
  display:          inline;  
  width:            21em;  
  margin:           0;  
  padding:          0;  
}  
.ResultRowSmall  
{  
  font-family:      arial;  
  font-size:        10pt;  
  display:          inline;  
  width:            15em;  
  margin:           0;  
  padding:          0;  
}  
.Result  
{  
  font-family:      arial;  
  font-size:        10pt;  
  display:          inline;  
  width:            17.55em;  
  height:           1.9em;  
  margin:           0.05em;  
  padding:          0;  
  padding-left:     0.3em;  
  background-color: #EFEFEF;  
  border-width:     0.1em;  
  border-color:     #808080;  
  border-style:     solid;  
}  
.ResultMedium  
{  
  font-family:      arial;  
  font-size:        10pt;  
  display:          inline;  
  width:            11.4em;  
  height:     1.9em;  
  margin:           0.05em;  
  padding:          0;  
  padding-left:     0.3em;  
  background-color: #EFEFEF;  
  border-width:     0.1em;  
  border-color:     #808080;  
  border-style:     solid;  
}  
.ResultSmall  
{  
  font-family:      arial;  
  font-size:        10pt;  
  width:            5.6em;  
  height:           1.9em;  
  margin:           0.05em;  
  padding:          0;  
  padding-left:     0.3em;  
  background-color: #EFEFEF;  
  border:           0.1em;  
  border-color:     #808080;  
  border-style:     solid;  
}  
.ResultSmallInline  
{  
  font-family:      arial;  
  font-size:        10pt;  
  width:            5.6em;  
  height:           1.9em;  
  display:          inline;  
  margin:           0.05em;  
  padding:          0;  
  padding-left:     0.3em;  
  background-color: #EFEFEF;  
  border:           0.1em;  
  border-color:     #808080;  
  border-style:     solid;  
}  
.Result input, .ResultInline input, .ResultMedium input, .ResultSmall input, .ResultSmallInline input,  
{  
  font-family:      arial;  
  font-size:        10pt;  
  display:          inline;  
  margin:           0;  
  padding:          0;  
  background-color: #EFEFEF;  
  border-width:     0;  
  border-color:     #EFEFEF;  
  border-style:     solid;  
}  
.ButtonRight  
{  
  font-family:      arial;  
  font-size:        10pt;  
  float:            right;  
  width:            4em;  
  height:           1.9em;  
  margin:           0;  
  padding:          0;  
  border-width:     0;  
  border-style:     solid;  
  border-color:     #EFEFEF;  
}  
.ButtonRightSmall  
{  
  font-family:      arial;  
  font-size:        10pt;  
  float:            right;  
  width:            2em;  
  height:           1.9em;  
  margin:           0;  
  padding:          0;  
  border-width:     0;  
  border-style:     solid;  
  border-color:     #EFEFEF;  
}

mfg Benny

Beitrag melden

– Informationen zu den Bewertungsregeln

DOCTYPE und display: inline
schwarze Piste 25.08.2005 11:48

css
– Informationen zu den Bewertungsregeln
Tachchen!

Sehr merkwürdig, naja ich bin wenigstens nicht der einzige mit
diesem Problem...

Wer hat es denn noch?

Ich empfehle trotzdem, die Seite mal irgendwo anschaubar zu machen. ;-)

Gruß

Die schwarze Piste

--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen
Beitrag melden

–
Informationen zu den Bewertungsregeln

DOCTYPE und display: inline
Elya Homepage des Autors 25.08.2005 11:58

css
– Informationen zu den Bewertungsregeln
Hallo Benny,
Ich will mehrere <div>-Blöcke nebeneinander anordnen, also z.B.:
<div style="display: inline">
Spalte 1
</div>
<div style="display: inline">
Spalte 2
</div>
...
```
>   
  
Wie breit sind die divs? Hast Du ihnen mal eine Border verpaßt, um festzustellen, von wo bis wo sie sich erstrecken?  
  
  
Gruß aus Köln-Ehrenfeld,  
  
Elya

-- 
![](http://www.visuelya.de/selfpics/belehredenneuling1.jpg)
```
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Benny: DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline

DOCTYPE und display: inline