Problem:CP TEXT MIT BILD u. Querscroll im IE [solved]

kukki · Post by **kukki** » Sun 14. Oct 2007, 19:00

Ich lasse mich gerne belehren oder auf Fehler meinerseits hinweisen, aber ich weiß mir im Moment nicht zu helfen.
Das Problem von http://www.phpwcms.de/forum/viewtopic.php?t=15815 ist immer noch nicht 100%ig gelöst. Ich habe die gleiche Reaktion nun auch bei meiner Website JG300.de )V.1.3.5 vom 2.10.2007) versucht zu lösen, aber ohne einen Erfolg

So langsam werde ich unruhig, denn den gleichen Fehler wiederholt man ja gerne auch bei anderen Projekten. Aber hier stehe ich wirklich ohne eine Lösungsvariante im Regen. Bei der Benutzung des CP TEXT MIT BILD
und der Positionierung

habe ich immer noch das Problem, dass der Text nach rechts weggleitet.
Liegt hier wirklich ein Denkfehler meinerseits vor?

Nur mit dem CCS-Code [overflow-x] für den mainBlock

Code: Select all

#mainBlock { 
    text-align: left;
    position: relative;
    background-color: #FFFFFF;  
    height: 420px;
    padding-top:  5px;
    padding-left: 10px;
    padding-right:10px;
    overflow: auto;
    overflow-x: hidden;}

läßt sich Abhilfe schaffen, aber das ist mir einfach doch zu blöd, denn es muß einen elegantere Lösung geben!
Wer hat hier einen Vorschlag der mich weiterbringt?
Layout ist 1000x 600, zentriert, position: relative, keine CSS-seitige absolute Positionierung in frontend.css, leftBlock feste Breite, rightBlock feste Breite ... Header des Dokuments mit

Code: Select all

<!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">

[Zur Demo dieses Effektes habe ich die Einstellung für Overflow zurückgestellt.]

Und ein weiterer Layout-Fehler, allerdings habe ich hier noch nicht im Board gesucht, beim Anreißertext mit Bild ist kein Haken in LIGHTBOX, trotzdem wird diese aber benutzt.

Post by **Oliver Georgi** » Sun 14. Oct 2007, 20:10

es wäre schön hier einen nachvollziehbaren Link zu haben.

So ist es wie Glaskugel-Lesen.

Oliver

kukki · Post by **kukki** » Sun 14. Oct 2007, 20:15

Oliver Georgi wrote:es wäre schön hier einen nachvollziehbaren Link zu haben.
So ist es wie Glaskugel-Lesen.

Oliver

Ich war gerade dabei, dies zu tun!

Post by **Oliver Georgi** » Sun 14. Oct 2007, 20:18

Bitte Direktlink auf die Problemseite.

Oliver

kukki · Post by **kukki** » Sun 14. Oct 2007, 20:24

Oliver Georgi wrote:Bitte Direktlink auf die Problemseite.

Oliver

http://www.jg300.de/index.php?id=75,53,0,0,1,0 [ im Hauptartikel DEMO]

Post by **update** » Sun 14. Oct 2007, 20:38

Hey Kukki

ein Auszug aus Deinem Html-Code:

Code: Select all

...
...
<div align="center"><font size="4"><strong>Messerschmitt Bf 109G-10/U4, Produktion & Operational Service</strong></font></div>
</div>
<div class="articleText"><table border="0" cellpadding="5" cellspacing="1" width="99%" align="left">
    <tbody>
        <tr>
            <td valign="top" width="50%"><font color="#808080"><strong><img style="width: 15px; height: 10px;" src="/picture/upload/image/GB.gif" alt="" border="0" height="10" hspace="5" width="15">1/ Time of the snap.</strong>  <br>
...
...

In der Tabelle steht jetzt ein align="left" und schon geht's mit der Nachbarin (vorausgesetzt, die hat FF)
Probier's mal aus in real...

Post by **Oliver Georgi** » Sun 14. Oct 2007, 21:36

ich denke das alles hat nichts mit dem ursprünglich von Dir beschriebenen Problem zu tun.

Wo kommt das das Bild zum Einsatz und vor allem wo passt es nicht.

Oliver

kukki · Post by **kukki** » Mon 15. Oct 2007, 09:04

Nun, ich habe für den Fall 1 die Einstellung zurückgestellt, damit man das nachvollziehen kann, dieser Effekt tritt nur - ich betone dies - nur beim IE 5,6,7 auf, alle anderen Browser stellen dieses sauber dar. Es sieht nach eine Rechenfehler in der Breitendarstellung aus, ich kann aber keinen finden

Fall-1 (- mit direkten Link auf die Seite; V. 1.3.0, selbstzentrierende Seite 800x600, rightBlock: feste Breite, mainBlock: Breite:auto), anbei der CSS-Part zu diesem Teil:

Code: Select all

[Doktype:] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

#mainBlock { position: relative;
    text-align: left;
    line-height: 135%;
    background-color: rgb(214,233,255);
    height: 445px; 
    padding: 5px 10px 5px 5px;;
    margin-right: 200px;
    margin-left:  3px;
    overflow:auto}

- der erste Artikel wurde mit dem CP TEXT MIT BILD erstellt, der Text umfließt das Bild rechtsseitig:

- der dritte Artikel wurde mit gleichem CP erstellt, allerdings wurde Bild links freistellen benutzt:

Auf der Website zeigt sich durch den dritten Artikel ein zusätzlicher Quer-Scrollbalken, der nur mit

Code: Select all

overflow-x: hidden;

bei IE beseitigt werden kann.

Benutze ich hier wie oben den Part Bild mit rechtumfließender Text, verschwindet der Querscrollbalken im IE!
-----------------------------------------------------------------------------
Fall-2 (- mit direkten Link auf die Seite; V. 1.3.5, selbstzentrierende Seite 1000x600, rightBlock+leftBlock: feste Breite, mainBlock: Breite:auto), anbei der CSS-Part zu diesem Teil:

Code: Select all

[DOKTYPE]= dito oben;
----------------------------
#mainBlock { 
    text-align: left;
    position: relative;
    background-color: #FFFFFF;  
    height: 420px;
    padding-top:  5px;
    padding-left: 10px;
    padding-right:10px;
    overflow: auto;
    /*overflow-x: hidden;*/}

Hier der gleiche/ ähnliche Effekt wie oben beschrieben. Der IE stellt einen Querscrollbalken dar, alle anderen Browser nicht. Der Querbalken scheint die Breite des Längstscrollbalkens "anzuzeigen"

und diese Seite wurde von 1.2.6 auf 1.3.5 1:1 geupdated! Nur farbliche Veränderungen und H1-Formatierungen wurden geändert!
Diesen Effekt habe ich erst bemerkt ab der Version 1.3.0. Vorher kannte ich diese Effekte auch, aber konnte sie ohne diesem overflow-x/y beseitigen. Da waren es wirklich Rechenfehler in der Breitenangabe.

Nachtrag: ich habe da noch eine wirlich unbehandelte Version 1.3.3 (die soll erst 2008 als neue Website freigegeben werden) als Testversion auf meinem Server, die zeigt die gleiche Reaktion!

kukki · Post by **kukki** » Mon 15. Oct 2007, 09:21

@claus: Mein Problem ist der IE, der diese Zicken macht und ich nicht verstehen kann, warum. Mit fehlt da irgendwo ein Rädchen am Getriebe

Post by **Oliver Georgi** » Mon 15. Oct 2007, 10:30

Es gibt im IE ein Border-box Problem - suche mal danach. Dadurch werden bei - ich glaube margin - die Breiten/Höhen falsch berechnet. Aus 200px müssen dann 100px gemacht werden usw.

Eventuell ist dies Dein Problem.

Oliver

Post by **update** » Mon 15. Oct 2007, 10:32

Mein Problem ist der IE

...das schien ich in der Tat schon wieder vergessen zu haben - sorry
hast Du dem mainblock mal eine feste Breite gegeben?

Post by **juergen** » Mon 15. Oct 2007, 10:34

Bis einschl. IE 5.5 ist das schon mal hier: http://de.selfhtml.org/css/formate/box_modell.htm

kukki · Post by **kukki** » Mon 15. Oct 2007, 17:33

Ok, es scheint sich dann hier um zwei verschiedene Problechen zu handeln. Mit dem Border-Box-Problem werde ich mich mal auseinander setzen.

Aber unabhängig davon, es bleibt noch das Problem mit dem CP TEXT MIT BILD, wo es das Problem gibt, dass bei Freistellen des Bildes (links oder rechts - Tabelle) einen Überhang gibt, der u.U. rechts unter dem Scrollbalken liegt. Bei Nutzung von Bild umfließen (links oder rechts) tritt dieses Problem nicht auf. Auch bei Nutzung von

Code: Select all

overflow-x: hidden;

bleibt dieses nach rechts verschieben erhalten!

Siehe bitte Fall 1, die Beispielbildchen

Post by **Oliver Georgi** » Mon 15. Oct 2007, 18:12

da das eine Tabelle ist, sperrt das nach Lust und Laune auf! Desweiteren arbeitet die Tabelle mit Breite in %, die sich automatisch aus dem übergeordneten CSS ergeben kann, was dann unter anderem zu der Mißratenen Darstellung führen kann.

Du hast schlichtweg keine Breite für Dein DIV oder das darüberliegende vorgegeben. Dadurch holt sich die Tabelle, was diese denkt zu brauchen. Und denk an padding, Border-Box Problem usw. Für mich sieht es genau danach aus. Der Überhang dürfte der Breite der Paddings entsprechen.

Oliver

kukki · Post by **kukki** » Mon 15. Oct 2007, 18:56

Ich habe jetzt (wieder) eine Breite von 565px in diesem Fall eingesetzt, mit dem Ergebnis, dass es keine Rolle spielt, ob da 500px oder 565px oder gar nichts im mainBlock angegeben sind.
body hat margin und padding auf Null!
Der container als oberster DIV-Part hat eine definitive Breite von 780px mit padding:0 schon immer gehabt.

Ich kriege es bei relativer Positionierung im Moment nicht gebacken.

So etwas nennt man auch Betriebsblindheit

Im Moment hilft mir nur Overflow-x: hidden weiter und die Verwendung von freigestellten Bildern nicht zu verwenden!
Aber das ist doch nicht mein Ziel gewesen! Bullsh....Bullsh....Bullsh....