CSS Bootstrap: Leerzeilen tauchen auf, ohne Boostrap alles ok

[smallwall]

Hi,

ich habe eine Problem mit dieser Seite:

http://devphp.de/pgnrewrite/openings.php?m00=d4&m01=d6

Ohne Bootstrap sieht sie wie gewollt aus, mit Boostrap sind rechts seltsame "Leerzeilen". Das Diagramm mit den grau/schwarzen Balken sollte eigentlich diese "Leerzeilen" nicht haben. Die ersten 3 Zeilen sind ok, danach werden diese "Leerzeilen" angezeigt, die Summen sind aber (wie gewollt) seltsamerweise ohne Leerzeilen. Wenn ich es mit dem Inspector anschaue, sehe ich nicht, wieso dort Leerzeilen zustande kommen. Könnt ihr es sehen? Was läuft dort schief? Was ändert Boostrap dort?

mfg

 

[rg88]

Also ohne mich da jetzt groß reinzuarbeiten, mein Inspektor ist zumindest nicht der Meinung, dass alles passt

 

[smallwall]

Na das sag ich ja, OHNE Bootstrap sieht die Seite aus wie sie soll, seitdem ich Bootstrap eingebunden habe...

 

[rg88]

na dann beheb doch erst mal die offensichtlichsten Fehler?

 

[smallwall]

Ok, einen Fehler habe ich behoben, das Quellübergreifende balbla bleibt erstmal und wird ignoriert. Aber das ist terribly unrelated to this topic.

 

[funkmasterflow]

Die <div>-Elemente mit der Klasse "table" bekommen von Bootstrap ein "margin-bottom: 20px".
Das willst Du ja offenbar nicht.
Lade nach dem Bootstrap-CSS dein eigenes Stylesheet und setze "margin-bottom: 0"

 

[smallwall]

Wow, danke, da wär ich nie drauf gekommen.

 

[funkmasterflow]

Bitte. Guck' dir mal an wie die Dev-Tools z.B. im Chrome funktionieren.
Da ist das relativ leicht nachzuvollziehen, was da passiert.

 

[smallwall]

Wieso wird es im Firefox nicht angezeigt, aber im Chrome? Wtf...

 

[Skaro]

Anhang anzeigen 548567
Wieso wird es im Firefox nicht angezeigt, aber im Chrome? Wtf...

Rechts bei den Regeln mal durchscrollen?


Edit: yup

 

[smallwall]

Wieso wird das nicht grafisch angezeigt, wie in Chrome? Wieso sollte ich die Regeln durchlesen?

 

[funkmasterflow]

Verstehe die Frage nicht. Willst Du wissen, welches CSS da was verändert, oder nicht? Wenn ja, dann musst Du je nach Browser die Dev-Tools kennenlernen und verstehen (lernen). Das macht halt jeder Hersteller etwas anders?

 

[smallwall]

Wieso wird das nicht grafisch angezeigt? Im Chrome sieht man es doch auf den ersten Blick, wenn man den Quelltext durchblättert. Im Chrome sind dort beige Flächen für margin.

 

[funkmasterflow]

Im Firefox siehst Du das nicht so schön, das stimmt.
Da musst Du in den Dev-Tools auf "Box-Modell" stellen.


Du musst doch eh Cross-Browser testen. Dann nimm Firefox für die Entwicklung und Chrome für's (zusätzliche) debugging.