Ap Div macht in Firefox Probleme

Woelfin · 19.01.2009

Hallo,

ich habe hier jetzt länger über die Boardsuche gesucht - aber leider wird Ap Div als zu allgemein ausgeblendet, und ich finde bei google auch nichts - irgendwie immer eher das umgekehrte Problem Firefox zeigt alles gut an, IE nicht.

Bei mir ist es jetzt leider so, dass ich eigentlich dachte ich sei "fertig" mit dem Layout (hab ich für den Verein einer Freundin versucht zu entwerfen). Es ist eine geslicste Oberfläche, und in einem Teil der Tabelle steht der Text, als ap div mit
#inhalte{
height: 100%;
overflow: auto;
}
(vielen Dank nochmal, hier habe ich auch schonmal sehr weiter geholfen bekommen).

Nun zeigt mir firefox aber immer dann, wenn der Text scrollbar werden sollte das nicht mehr an, sondern "zerstückelt" die Tabelle und zieht sie super weit auseinander.
Woran liegt das und was kann ich machen dass es auch in FF korrekt angezeigt wird????
Ich habe da keine Ideen, IE zeigt es mir genauso an, wie ich es mir als "fertig" vorstelle...

Danke

LG

Isabelle

tiroler · 19.01.2009

AW: Ap Div macht in Firefox Probleme

wie wäre es mal mit nem Bildchen und dem code ?

Woelfin · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hi,

hier ein Bild:

und da die Tabelle:
(ist nicht gerade "schick" ist halt was mir dw erstellt hat nach dem slicen. Das ist was mir DW nach dem slicen erstellt hat...)
Der Text ist hier so lang, dass es scrollbar werden müsste, auf anderen Teilseiten, auf denen der Text kurz ist, ist die Darstellung ok.

HTML:

[B]<div align="center" valign = "middle">[/B]
 
</head>
<body bgcolor="#051c62" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Obedience.psd) -->
<table id="Table_01" width="1001" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="19">
<img src="Obedience/images/Obedience_01.jpg" width="1000" height="202" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="202" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="Obedience/images/Obedience_02.jpg" width="158" height="41" alt=""></td>
<td colspan="8" rowspan="2">
<a href="index.html"><img src="Obedience/images/Obedience_03.jpg" width="144" height="41" alt=""></a></td>
<td colspan="4">
<img src="Obedience/images/Obedience_04.jpg" width="698" height="27" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Obedience/images/Obedience_05.jpg" width="42" height="14" alt=""></td>
<td rowspan="14" bgcolor="fcf99b">
<div class="Stil1" id="inhalte">
 
<table width="575" border="0" align="center" cellspacing="20">
<tr>
<td class="Stil1">
 
HIER STEHT DER TEXT in der Tabelle in dem ap div "inhalte"
 
 
<td>
</tr>
</table>
</div>
 
</td>
<td rowspan="16">
<img src="Obedience/images/Obedience_07.jpg" width="57" height="571" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="Obedience/images/Obedience_08.jpg" width="118" height="41" alt=""></td>
<td colspan="11">
<a href="Obedience.html"><img src="Obedience/images/Obedience_09.jpg" width="197" height="41" alt=""></a></td>
<td rowspan="15">
<img src="Obedience/images/Obedience_10.jpg" width="29" height="557" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="Obedience/images/Obedience_11.jpg" width="96" height="42" alt=""></td>
<td colspan="6">
<a href="ths.html"><img src="Obedience/images/Obedience_12.jpg" width="106" height="42" alt=""></a></td>
<td colspan="6" rowspan="2">
<img src="Obedience/images/Obedience_13.jpg" width="113" height="88" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="Obedience/images/Obedience_14.jpg" width="66" height="46" alt=""></td>
<td colspan="7">
<a href="Agility.html"><img src="Obedience/images/Obedience_15.jpg" width="136" height="46" alt=""></a></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Obedience/images/Obedience_16.jpg" width="53" height="38" alt=""></td>
<td colspan="11">
<a href="begleithund.html"><img src="Obedience/images/Obedience_17.jpg" width="191" height="38" alt=""></a></td>
<td colspan="3" rowspan="3">
<img src="Obedience/images/Obedience_18.jpg" width="71" height="126" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="Obedience/images/Obedience_19.jpg" width="34" height="390" alt=""></td>
<td colspan="8">
<a href="welpen.html"><img src="Obedience/images/Obedience_20.jpg" width="158" height="42" alt=""></a></td>
<td colspan="4">
<img src="Obedience/images/Obedience_21.jpg" width="52" height="42" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td colspan="10">
<a href="erziehung.html"><img src="Obedience/images/Obedience_22.jpg" width="176" height="46" alt=""></a></td>
<td colspan="2">
<img src="Obedience/images/Obedience_23.jpg" width="34" height="46" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="13">
<a href="trainingszeiten.html"><img src="Obedience/images/Obedience_24.jpg" width="234" height="36" alt=""></a></td>
<td colspan="2" rowspan="9">
<img src="Obedience/images/Obedience_25.jpg" width="47" height="302" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="13">
<a href="trainer.html"><img src="Obedience/images/Obedience_26.jpg" width="234" height="40" alt=""></a></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="termine.html"><img src="Obedience/images/Obedience_27.jpg" width="145" height="43" alt=""></a></td>
<td colspan="6" rowspan="3">
<img src="Obedience/images/Obedience_28.jpg" width="89" height="127" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="5">
<a href="shop.html"><img src="Obedience/images/Obedience_29.jpg" width="112" height="40" alt=""></a></td>
<td colspan="2" rowspan="2">
<img src="Obedience/images/Obedience_30.jpg" width="33" height="84" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="5">
<a href="links.html"><img src="Obedience/images/Obedience_31.jpg" width="112" height="44" alt=""></a></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="11">
<a href="gaestebuch.html"><img src="Obedience/images/Obedience_32.jpg" width="188" height="41" alt=""></a></td>
<td colspan="2" rowspan="4">
<img src="Obedience/images/Obedience_33.jpg" width="46" height="99" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<a href="impressum.html"><img src="Obedience/images/Obedience_34.jpg" width="176" height="47" alt=""></a></td>
<td rowspan="3">
<img src="Obedience/images/Obedience_35.jpg" width="12" height="58" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Obedience/images/Obedience_36.jpg" width="599" height="27" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="Obedience/images/Obedience_37.jpg" width="176" height="11" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td>
<img src="Obedience/images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="599" height="1" alt=""></td>
<td>
<img src="Obedience/images/spacer.gif" width="57" height="1" alt=""></td>
<td></td>
</tr>
</table>

Vielen vielen Dank!

Isabelle

mfgleo · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hallo,

Du darfst nicht

#inhalte{
height: 100%;
overflow: auto;
}

schreiben.

Besser wäre die ermittelst die Höhe des Bereichs und schreibst dann
#inhalte{
position: absolute;
overflow: auto;
height: 450px;
}

Herr_D · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Boah...

Den Tipp über mir vergiß mal ganz schnell, das ist Blödsinn...

Langfristig solltest du den gesammten Code in die Tonne kloppen, html+css lernen und neu anfangen

Kurzfristig:

an dieser Stelle:

Code:

<td rowspan="14" bgcolor="fcf99b">
<div class="Stil1" id="inhalte">

<table width="575" border="0" align="center" cellspacing="20">
<tr>
<td class="Stil1">

HIER STEHT DER TEXT in der Tabelle in dem ap div "inhalte"


<td>
</tr>
</table>
</div>

</td>

Liegt das Problem

Du baust das div in eine td, die keine Höhenangabe hat... wovon soll es 100% haben?

Dann setzt du eine leere Tabelle ein (eine spalte, eine zeile, wozu?)

Versuch mal folgendes:

Code:

#inhalte{
height: 400px; /* Höhe anpassen */
width:575px; /* Weite anpassen */
overflow: auto;
}

und im html-Bereich:

HTML:

<td rowspan="14" bgcolor="fcf99b">
<div class="Stil1" id="inhalte">

HIER STEHT DER TEXT in der Tabelle in dem ap div "inhalte"

</div>

</td>

sokie · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hallo Isabelle,
Du hast eine überflüssige Tabelle in deinem Code:

Code:

<td rowspan="14" bgcolor="fcf99b">
<div class="Stil1" id="inhalte">

[COLOR=Red][B]<table width="575" border="0" align="center" cellspacing="20">
<tr>
<td class="Stil1">[/B][/COLOR]

HIER STEHT DER TEXT in der Tabelle in dem ap div "inhalte"
[COLOR=Red][B]

<td>
</tr>
</table>[/B][/COLOR] 
</div>


</td>

Diese Tabelle muss raus, dann funktioniert es auch mit deinen Inhalten.

PS: ap div ist kein Begriff sondern ein Ausdruck der in Dreamweaver absolut positionierte DIVs bezeichnet. deswegen hat er für die Welt ausserhalb von Dreamweaver eigentlich keine Bedeutung.

PPS: welche Formatierungen sind unter .Stil1 gemacht?

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Mein persönlicher Tipp an dich: LERNEN!
Hier gibt es ein wunderbares Tutorial: mediaevent.de :: CSS und XHTML :: Einführung in XHTML / HTML

Woelfin · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hi,

ich glaub ich versteh es nicht so ganz.
wenn ich die Tabelle rausnehme, ist der Text so eng am Rand. Deswegen hab ich eine Tabelle mit 20 Pixeln Freiraum am Rand reingesetzt.
Allerdings hab ich es jetzt mal zum testen geändert und die Tabelle rausgenommen und trotzdem ist es noch genauso "verstückelt" in Fire Fox.

das mit dem ap div hab ich heut nacht bei google auch rausgefunden, und dachte ups peinlich schon der erste Fehler in der Überschrift

In Stil 1 hat Dreamweaver Farbe und größe festgesetzt - hab ich "von Hand" gemacht - naja die Farbe steht eh im stylesheet - aber Stile hab ich keine angelegt - damit ärgert mich Dreamweaver dauernd...

@Herr_D: das ganze ist mittig zentriert. Wenn ich da eine feste Pixelangabe für das Div Feld mache, dann steht es von egal bei welcher Bildschirmauflösung an der gleichen stelle, dabei sollte es *eigentlich* zentriert sein.

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Google mal nach Firebug. Das ist eine Erweiterung für den Firefox mit dem man solchen Problemen im nu auf den Grund gehen kann. Da kannst du auch in Realtime andere CSS-Zuweisungen testen.

Hab mir gerade deinen Code oben angesehen... was zum Teufel sucht ein DIV im Head-Bereich???

PS: Für Abstände benutze CSS(Margin, Padding)

sokie · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Woelfin schrieb:
ich glaub ich versteh es nicht so ganz.
wenn ich die Tabelle rausnehme, ist der Text so eng am Rand. Deswegen hab ich eine Tabelle mit 20 Pixeln Freiraum am Rand reingesetzt.

das habe ich mir auch schon gedacht

Die Idee dafür eine weitere Tabelle zu bemühen ist aber (wie du selbst bemerkt hast nicht die günstigste Lösung.
der div für den Text hat ja nun schon eine id und über die ID auch eine Formatierung. aus Deinem vorangegangenen Beitrag:

Code:

#inhalte{
height: 100%;
overflow: auto;
}

statt einer neuen Tabelle erweiterst du diese Formatierungen einfach um deine Ränder rechts und links zB.

Code:

#inhalte{
  height: 100%;
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
}

Damit bekommst du deine Zeilen von Rand weg.

das class="Stil1" solltest du am div inhalte entfernen, und alle Formateirungen ausschliesslich über das #inhalte vornehmen.

Woelfin · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hallo,

als erstes mal vielen vielen Dank an alle die mir hier Helfen:

@BasicSix: mir ist schon klar, dass ich noch viel lernen muss - aber trotzdem hab ich schon angefangen zu "basteln" weil wenn ich dabei so gar nix praktisches mache, dann vergess ich es bis ich es anwenden kann...

also ich habe das div im headbereich entfernt und die Ausrichtung, die es bewirkt hat mit in die tabelle genommen.

Das firebugs hab ich installiert - ich seh zwar da jetzt wo zum ersten mal ein Fehler in der Darstellung auftritt - aber ich kann leider nix damit anfangen - bzw versteh nicht wieso das falsch ist!

@sokie:
vielen vielen Dank

jetzt siehts so aus wie vorher nur ohne Tabelle

Aber trotzdem wird es mir in Fire Fox immer noch so komisch angezeigt.
Woran könnte das jetzt noch liegen?
Keine Stile mehr in der Datei, keine Tabellen im div.

Vielen vielen Dank

Isabelle

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Das Schöne am Firebug ist, dass du den Mauszeiger auf Elemente des HTML Codes legen kannst und der Firebug diese Elemente im Rendering farbig anzeigt. Besonders schön ist, dass er nicht nur das Element selbst farbig anzeigt, sondern auch den Innenabstand(Padding) und den Außenabstand(Margin) in jeweils anderen Farben. Daran erkennt man zum Beispiel recht schnell wenn ein Element zu groß für das Elternelement ist und kann entgegenwirken. Zum Beispiel wenn man den Außen- oder Innenabstand verringert.

Am besten kann man dir übrigens helfen wenn du die Seite hochlädst und uns die URL dazu gibts. Dann lässt sich das Problem meistens in recht kurzer Zeit herausfiltern.

PS: Verwende bitte auch einen korrekten Doctype. Evtl. ist das Problem der Box-Model-Bug im Quirks-Mode.

sokie · 20.01.2009

AW: Ap Div macht in Firefox Probleme

ich könnte mir vorstellen,dass es am code liegt, vielleicht postest du mal, was du da bisher hast.

Woelfin · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hi,

ich habe eine Beispielseite bei mir hochgeladen. Bei der ich alles korrigiert habe, was ihr mir davor geschrieben habt.

die Bilder dazu liegen unter falls das wichtig ist.

LG& Danke

Isabelle

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Es würde funktionieren wenn du den TD's mit dem Style Attribut eine Höhe zuweist. Also <td colspan="2" style="height: 15px;"></td>.
Die Höhe müsste dabei der Höhe der Grafik entsprechen.

Allerdings würde ich dir raten nochmal neu anzufangen und das Design komplett ohne Tabellen umzusetzen. Das hat sehr viele Vorteile und das Tutorial das ich weiter oben gepostet habe wird dir helfen. Und wenn es Probleme gibt wird dir hier im Forum sicher geholfen.

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Anmerkung: Inline CSS ist allerdings fast genauso unsauber wie Tabellenkonstrukte für Designs. Die sauberste Möglichkeit ist wie gesagt ein tabellenfreies Design mit CSS(externe CSS Datei, kein Inline CSS).

sokie · 20.01.2009

AW: Ap Div macht in Firefox Probleme

hallo Isabelle

setz mal tabellenzelle um das div inhalte auf eine höhe von ca 540, dann sollte es funktionieren.

Code:

<td [B][COLOR=Red]height="540"[/COLOR][/B] rowspan="14" bgcolor="#fcf99b">
        
        <div id="inhalte">
          <p>&nbsp;</p>
          <p><strong>Begleithundprüfung  mit Verhaltenstest (BH/VT)</strong><br>
            &nbsp;<br>
            <br>

ich würde dir auch empfehlen die Seite bei Gelegenheit zu überarbeiten, und dann ganz ohne Tabellen umzusetzen.

Woelfin · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Hallo,

erst einmal 1000 Dank für eure Hilfe!!!
Ich werde mich einlesen wie man das ohne Tabellen machen kann - nur bin ich froh dass ich vorab erst mal die Seite so zum "laufen" dann bekomme!

Vielen Dank - aber ich werde mich bemühen und mich da einarbeiten.

Noch eine Frage an sokie: wie kamst du da jetzt drauf? Ich hatte gar keine Ahnung WO ich suchen soll.

Danke

LG

Isabelle

BasicSix · 20.01.2009

AW: Ap Div macht in Firefox Probleme

Das Problem war einfach, dass dein Div mit dem Content zu hoch war und dadurch der Rest verzerrt wurde. Um das zu vermeiden muss man eine Höhe angeben. Dies kann man so machen wie von sokie beschrieben oder aber auch als Style-Anweisung direkt dem Div statt der Tabellenzelle zuordnen.