Jump to content

Recording Service: Bug im CSS


girst

Recommended Posts

Ein kleiner (aber lästiger) Bug im CSS des Recording Service 1.33.2: Die Senderlogos driften in der "Programm"-Ansicht von der Programmspalte ab.  (Siehe screenshot)

 

Fix: tvguide.css, Zeile 67 border-right von 1px auf 2px erhöhen

 

(problem taucht im firefox und chrome linux auf, fix funktioniert mit beiden)

 

Screenshot_2017-03-04_14-43-01.thumb.png.3f5b4bd97c9115529aa52687b05e5fb6.png

Link to comment
Quote

Fix: tvguide.css, Zeile 67 border-right von 1px auf 2px erhöhen

 

Mit dem Fix sind die Spalten hier in Firefox unter Windows 7 verschoben. Ohne nicht. ;)

 

Das ist ein sehr unübersichtliches Problem. Hier ging es (unter anderem) schon mal um das Thema. Das kann man drehen und wenden wie man will: Irgendwo passt es immer nicht. Z.B. bewirken verschiedenen Zoomstufen in Firefox (Strg + Mausrad / Ansicht Menü) oder Schriftgrößen in Windows unterschiedliche Ergebnisse (siehe hier). Die Windows-Version kann auch eine Rolle spielen.

 

Du kannst dir gerne noch etwas die Zähne daran ausbeißen :) Eventuell muss die Seite neu designed werden, um das in den Griff zu kriegen, aber dafür fehlt gerade die Zeit.

Link to comment
  • 4 years later...

Hallo,

 

ich wollte einfach das Thema mal wieder aufnehmen, da es mich auch nach jedem Update nötigt die tvguide.css manuell zu bearbeiten. Da meine Lösung von der obigen abweicht und ich bei meinen Versuchen ein differenziertes Verhalten bei Firefox und MS Edge nicht feststellen konnte, gebe ich hier mal den Inhalt meiner tvguide.css zum Besten (Änderungen markiert in Zeile 13 und 30):

Spoiler


html, body {
	height:100%;
	overflow:hidden;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
table, image {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	border-right:1px solid #0286c6; /* eingefuegte Zeile */
}
.link {
	font-weight:bold;
	color:#003388;
	font-size: 12px;
}
a.aentry:link, a.aentry:active, a.aentry:visited {
	color:#000;
	text-decoration: none;
}
.time {
	font-weight: bold;
	font-size: 11px;
}
.cellData {
	border-left:1px solid #0286c6;
/*	border-right:1px solid #0286c6;    Zeile deaktiviert */
	width: 148px;
}
.cellDiv {
	width: 140px;
	padding:1px 4px;
	overflow-x: auto;
	word-wrap:break-word; 
	margin-bottom: 4px;
	font-size: 11px;
	color: #000000;
}
.chlogo {
	width:144px;
	height:50px;
	padding:2px;
	line-height: 17px;
	font-size:16px; 
	font-weight: bold;
	color:white;
}
.current {
background:#FFFF88;
}
.istimer {
border:2px solid #FF0000;
padding:1px 2px;
}
#table_b .cellDiv:hover {
	background-color:#C3DBF6;
	cursor:pointer;
}
.hover {
	background-color:#C3DBF6;
	cursor:pointer;
}
.ChannelCell {
	border-left:1px solid #0286c6; 
	border-right:1px solid #0286c6; 
	cursor:pointer;
	overflow: hidden;
	width: 148px;
	text-align:center;
	vertical-align:middle;
}
.even{
	background-color:#EFF5F9;
}
.logopanel {
	position: absolute;
	top: 0px; left: 0px; right: 0px;
	height: 60px;
	color:#003366;
	padding:0;
}
.logopanel2 {
	position: absolute;
	top: 60px; left: 0px; right: 0px;
	height: 54px;
	overflow: hidden;
}
.contentbody {
	position: absolute;
	top: 114px; left: 0px; bottom: 0px; right: 0px;
	overflow: auto;
	height: auto;
}
.logopanel .label { 
	font-size: 14px; 
	font-weight: bold;
	color: white;
}
.logopanel .inputfield { 
	width: 100%;
	border:1px solid #7f9db9;
	color:#003366;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.4) inset;
	font-size: 12px; 
	font-weight: bold;
}
.logopanel .button {
	overflow: visible;
	padding: 1px 5px;
	width: 100%;
	font-size: 12px; 
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	vertical-align: middle;
}
.logopanel .button, .button:link, .button:visited {
	background: url("../gfx/btnGradient.png");
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background-position: 0 0;
	background-repeat: repeat-x;
	background-color: #5078B4;
background: -moz-linear-gradient(top,  rgba(182,199,224,1) 0%, rgba(165,186,216,1) 24%, rgba(110,143,193,1) 76%, rgba(90,127,184,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(182,199,224,1)), color-stop(24%,rgba(165,186,216,1)), color-stop(76%,rgba(110,143,193,1)), color-stop(100%,rgba(90,127,184,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(182,199,224,1) 0%,rgba(165,186,216,1) 24%,rgba(110,143,193,1) 76%,rgba(90,127,184,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(182,199,224,1) 0%,rgba(165,186,216,1) 24%,rgba(110,143,193,1) 76%,rgba(90,127,184,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(182,199,224,1) 0%,rgba(165,186,216,1) 24%,rgba(110,143,193,1) 76%,rgba(90,127,184,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(182,199,224,1) 0%,rgba(165,186,216,1) 24%,rgba(110,143,193,1) 76%,rgba(90,127,184,1) 100%); /* W3C */
	border-color: #BBB #444 #444 #BBB;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
	color: #FFFFFF;
}
.logopanel .button:hover {
	background-image: none;
}
.logopanel .button:active {
	box-shadow: none;
}
.td45{
	text-align:center;
	vertical-align:middle;
	width:45px;
	padding-left:10px;
}
.td40{
	text-align:center;
	vertical-align:middle;
	width:35px;
	padding-left:10px;
}
.td65{
	text-align:center;
	vertical-align:middle;
	width:75px;
	padding-left:10px;
}
.td115{
	width:121px;
	padding-left:16px;
}
.row1 {
	list-style-type: none;
	padding:0px;
	height:25px;
	width:100%;
	margin:0px;
	margin-top:7px;
	vertical-align: middle;
	overflow:hidden;
}
.row1 li{
	display:inline-block;
	padding-left:10px;
	vertical-align:middle;
}
.row2 {
	list-style-type: none;
	padding:0px;
	width:100%;
	height:25px;
	margin:0px;
	vertical-align: middle;
	overflow:hidden;
	padding-top:2px;
}
.row2 li{
	display: inline-block;
	vertical-align:middle;
}
.oldentry{
	color:#888888 !important;
}
#epgdetails{font-size: 14px !important;font-family: Arial, Helvetica, sans-serif !important;}
.epgitalic {color: #0000FF; font-style: italic;}
a.alink:link, a.alink:active, a.alink:visited {color:#105895;text-decoration: none;}
.cluetip * { font-size: 14px !important;font-family: Arial, Helvetica, sans-serif !important; }
.bgblue {background-color:#C3DBF6;margin-top: 8px;}
.logobg {
background: url('../gfx/dvbv_header_bg.gif') top; /* Old browsers */
background: -moz-linear-gradient(top,  rgba(80,117,180,1) 0%, rgba(133,184,245,1) 3%, rgba(81,118,182,1) 8%, rgba(86,126,190,1) 36%, rgba(104,152,217,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,117,180,1)), color-stop(3%,rgba(133,184,245,1)), color-stop(8%,rgba(81,118,182,1)), color-stop(36%,rgba(86,126,190,1)), color-stop(100%,rgba(104,152,217,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(80,117,180,1) 0%,rgba(133,184,245,1) 3%,rgba(81,118,182,1) 8%,rgba(86,126,190,1) 36%,rgba(104,152,217,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(80,117,180,1) 0%,rgba(133,184,245,1) 3%,rgba(81,118,182,1) 8%,rgba(86,126,190,1) 36%,rgba(104,152,217,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(80,117,180,1) 0%,rgba(133,184,245,1) 3%,rgba(81,118,182,1) 8%,rgba(86,126,190,1) 36%,rgba(104,152,217,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(80,117,180,1) 0%,rgba(133,184,245,1) 3%,rgba(81,118,182,1) 8%,rgba(86,126,190,1) 36%,rgba(104,152,217,1) 100%); /* W3C */
}

 

Ich würde mich freuen, wenn dies mal von jemandem geprüft werden könnte.

 

Bestesten Dank im Voraus!

?

Edited by Griga
Spoiler Tags ergänzt
Link to comment
1 hour ago, havo1974 said:

Ich würde mich freuen, wenn dies mal von jemandem geprüft werden könnte.

 

Danke für den Beitrag. Wird geprüft.

 

Bitte längliche Setup- oder Log-Dateien sowie länglichen Code als Datei anhängen (eventuell gezippt) oder zumindest in Spoiler-Tags setzen, um Lesern Scrollen zu ersparen.

 

Link to comment

P.S. Kurz unter Windows 8 in Firefox überprüft: Es gibt bei ausreichend vielen Sendern in einer Kategorie immer noch einen leichten Versatz zwischen Senderlogos und Programmspalte, wenn man bei 150% Textgröße in Windows oder verkleinerter Textdarstellung im Browser ganz nach rechts scrollt. Aber die Lösung scheint besser zu sein als das, was wir bisher hatten.

 

Bei nächster Gelegenheit folgt ein Test unter Windows 10.

 

Link to comment

Hallo Griga,

 

vielen Dank für die schnelle Reaktion sowie den ersten Test.

Danke auch für den Hinweis mit den Spoiler-Tags - Hab's mir gemerkt - Sorry, hätte ich auch selbst drauf kommen können.

 

Es würde mich freuen, wenn ich vielleicht zu einer zukünftig optimierteren Anzeige habe beitragen können.

?

Link to comment

Mit der geänderten tvguide.css gibt es auf der Programm-Seite bei der Standard-Spaltenbreite keinen Versatz zwischen Senderlogos und Programmspalte mehr, solange man nicht an der Textgröße in Windows oder im Browser dreht. Insofern ist das ein Fortschritt.

 

Es geht aber immer noch in allen Browsern deutlich daneben, sobald man die Spaltenbreite mit den Buttons [-] und [+] oben rechts auf der Programm-Seite ändert. Eine Rückkehr zur vorherigen Breite bringt es nicht in Ordnung. Man muss erst zusätzlich die Seite mit F5 neu laden.

 

Vielleicht hat jemand mit HTML/CSS-Bastlermentalität Lust, sich des Problems anzunehmen.... ich verschiebe das Thema mal in die Media Server-Abteilung, wo es eigentlich hingehört.

 

Link to comment

Ich selbst habe zwar keinen DVBViewer (und auch keine DVB Karte mehr direkt am Windows Rechner angeschlossen), muss mich aber täglich mit so einem CSS Kram herumschlagen. Besonders scrollbare Tabellen, die einen festen Kopf haben sollen, sind immer wieder (!) ein Späßchen. Eigentlich muss man "nur" die Breiten von Kopf und Inhalt fixieren/synchronisieren, aber der Teufel liegt dabei oft im Detail - gerade aber nicht nur wenn ein dynamischer Scrollbar dazukommt, der auch mal weg sein kann.

 

Hier ist etwa schon (ohne den Fix) eigenartig (kann mich auch täuschen, alles auf die Schnelle), dass die Breite von .cellData.cellDiv (ich vermute, das ist für den Text) 140px (width) + 2 * 4px (padding-left/-right) + 1px (border-left) = 149px beträgt, der von .chlogo (ich vermute, das ist für das Logo) nur 144px + 2 *2px +0 (OHNE den Fix) = 148px.

 

Bei dem +/- Umschalten vermute ich, dass hier .td45 et al angewendet werden und beim Zurückschalten einfach irgendwie das Logo eine CSS Klasse zu viel erhält, die eigentlich entfernt werden sollte. Aber das ist wirklich reine und wilde Spekulation.

 

Ich könnte mir das evtl. mal anschauen, wenn mal jemand drei MHTML Archive (Save As...) postet, am besten aus der Originalversion. Einmal nach dem Starten, dann mit [+] und dann (kaputt) mit [-]. Versprechen will ich aber nicht zu viel, aber schaden tut es vermutlich auch nicht ?

 

Jochen

Link to comment

UPS: Sorry, scrollt vertikal natürlich falsch!!! Ich schaue mir das nachher nochmal an!

 

UPDATE: Ich muss es erst mal aufgeben. Die aktuelle Lösung sieht im Chrome/Edge ganz zu aus, im Firefox aber übel und im IE gar nicht (beim scrollen). Ich hatte gehofft, das mit nur CSS hinzubekommen, ich befürchte aber ohne ein bisschen JS Code wird man es nicht so hinbekommen wie es aktuell aussieht.


SEUFZ: Noch ein letzter Versuch mit einer Zeile JavaScript Code. IE11 spinnt aber immer noch herum - R.I.P.? FireFox zickt immer noch leicht mit den Scrollbars, wenn alle Sender horizontal auf die Seite passen.

 

Ich habe "zum Gucken" grob mal was gebastelt: https://downloads.psimarron.net/Debug/epgdvbviewer.html - Fuellen drücken und mit der Auswahl der Breite spielen. Im IE geht es leider nicht richtig, da erscheint der Scrollbar nicht. Ich muss aber ehrlich gestehen, dass ich den schon seit vielen Jahren nicht mehr bedient habe.

 

Wenn man auf dem Textinhalt ein ordentliches overflow:hidden haben will, dann müsste man noch ein zusätzliches div einfügen und mit margin statt padding arbeiten. Da ich aber nicht weiß, ob überhaupt jemand das brauchen kann, habe ich mir das erspart. So geht der Text halt bis zum rechten Rand. 

 

image.png.55951a807300dee3d2aedd993dec1824.png

 

In den HTML Datei ist alles drin - <script /> zum Füllen und Umschalten der Breite und auch <style /> mit dem CSS.

 

Have Fun

 

Jochen

Edited by JMS
Unsinn gemacht
  • Thanks 1
Link to comment
21 hours ago, JMS said:

Ich selbst habe zwar keinen DVBViewer (und auch keine DVB Karte mehr direkt am Windows Rechner angeschlossen)...

 

Danke für deine Bemühungen, aber ohne die Originaldateien ist es hoffnungslos, das Problem zu analysieren. Es sind hauptsächlich drei Webinterface Dateien beteiligt (tvguide.html, css\tvguide.css, js\tvguide.js). Übrigens braucht der DVBViewer nicht mehr unbedingt eine DVB-Karte. Ein Sat>IP Server oder ein Internetanschluss (für Internet TV/Radio) tut es auch.

 

Zunächst einmal: Der Fix von @havo1974 allein bringt es nicht. Er bereinigt die Verschiebung der Spalten nur bei der Standard-Spaltenbreite von 148px. Sobald man diese durch Klicks auf die Buttons [-] und [+] verändert (was Code in der tvguide.js in 5px-Schritten ausführt), geht es schief und bleibt auch nach Rückkehr zur Standardbreite schief, solange man die Seite nicht neu lädt.

 

Mit der ursprünglich installierten tvguide.css ist es genau umgekehrt: Bei der Standard-Spaltenbreite sind die Spalten verschoben, passen aber bei einer veränderten Spaltenbreite. Das bleibt auch so bei einer Rückkehr zur Standardbreite, solange man die Seite nicht neu lädt.

 

Das Bild im ersten Post lässt vermuten, dass es sich um eine Tabelle mit einer Tabellenkopfzeile handelt, in der sich die Senderlogos befinden. Ein Blick in die tvguide.html oder den Inspektor der Browserwerkzeuge zeigt jedoch, dass sich Senderlogos und Text in separaten Tabellen befinden, jede in einem eigenen div-Element.

 

Und da findet sich schon der erste Bug: Das table-Element mit den Logos hat id="table_a", das für den Text id="table_b". Das CSS für table_a entstammt global.css und enthält border-collapse:collapse (d.h. die Ränder zweier benachbarter Zellen werden zu einem zusammengefasst), das CSS für table_b entstammt tvguide.css und fasst die Ränder benachbarter Zellen nicht zusammen. Dadurch sind die Textspalten 1px breiter als die Logospalten.

 

Korrigiert man dies, indem man z.B. in der tvguide.css

#table_b {
    border-collapse:collapse;
}

ergänzt, wirkt das im wesentlichen wie der Fix von @havo1974, ergibt also eine korrekte Darstellung bei der Standard-Spaltenbreite von 148px. Bei veränderter Spaltenbreite geht es durch einen zweiten Bug in tvguide.js schief: var chlogosz = 145 führt zu Logo-Spalten, die 1px zu breit sind (weil das mit 2px Padding an jeder Seite der Logo-divs insgesamt 149px ergibt). Richtig ist var chlogosz = 144. Weitere Erläuterungen erspare ich dem Leser hier. JavaScript-Kundige mögen es selbst herausanalysieren.

 

Das verwirrende Verhalten der Programm-Seite resultiert daraus, dass sich die beiden Bugs unter bestimmten Bedingungen kompensieren, unter anderen zu verschobenen Spalten führen. Es müssen beide Fehler korrigiert werden, dann passt das hinten und vorne! Die ZIP im Anhang enthält die gefixte tvguide.css und tvguide.js - die beiden enthaltenen Ordner js und css einfach in das SVCweb-Unterverzeichnis des DVBViewer-Programmverzeichnisses kopieren. Bitte beachten: Danach mit Strg+F5 ein komplettes Neuladen der Programm-Seite im Browser erzwingen, da dieser sonst die alte tvguide.css und tvguide.js aus seinem Cache verwendet!

 

tvguide.zip

  • Thanks 1
Link to comment

Ja super, habe es gerade getestet.

Also bei mir passen die Spaltenbreiten beider Tabellen (Senderlogos und Programmtext) selbst bei unterschiedlichen Schrift- und Spaltengrößen - und auch beim rechts-links Verschieben ruckelt nichts mehr!

 

Dieser Fix würde für mich bestens funktionieren.

 

Vielen lieben Dank @Griga und @JMS für die eure Zeit und eure Arbeit und die letztendlich klasse Lösung des Problems!

? ?

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...