nicht angemeldet
cellspacing="0" in CSS überschreiben
0 0 0 
TS
0
cellspacing="0" in CSS überschreiben
Tabellenkalk
Gunnar Bittersmann
Matthias ApselHallo liebe Community,
ich bin gerade dabei eine html Seite mithilfe eines Stylesheets etwas schöner zu gestalten. Das große Problem ist aber, dass ich keine Änderungen direkt in der html-Datei der Seite vornehmen kann, sondern lediglich das Stylesheet ändern kann.
Nun möchte ich aber die einzelnen Tabellensegment umrahmen lassen und zwischen den einzelnen Segmenten einen kleinen Abstand haben.
In der html-Datei steht:
<table class="formlist_table" cellspacing=0 cellpadding=0 border=0>
<tr class="list1">
<td class="list1">
Zelle
</td>
<td class="list1">
Zelle
</td>
</tr>
<tr class="list1">
<td class="list1">
Zelle
</td>
<td class="list1">
Zelle
</td>
</tr>
</table>
Im Stylesheet habe ich dann geschrieben:
table.formlist_table{
border-collapse: separate;
border-spacing: 10px;
}
.list1{
border: 1px solid #006fff;
}
Aber da in der html-Datei bei table "cellspacing=0" steht, wird das "border-spacing: 10px" irgendwie ignoriert glaube ich.
Hat jemand eine Idee wie ich es hinbekomme einen Abstand zwischen den einzelnen Tabellensegmenten zu haben, ohne die html-Datei selbts zu verändern, da ich da wie gesagt nicht kann.
Vielen Dank schon einmal
-
Moin!
Da "cellspacing=0 cellpadding=0 border=0" die letzten Anweisungen sind wird Dein Vorhaben wohl scheitern. Freilich könnte man den Murks mit Javascript noch verschlimmern, aber ich nehme an, das darfst Du auch nicht.
Das Beispiel zeigt sehr schön, warum die verschiedenen Methoden zum Herstellen des Layouts nicht durchmischt werden sollten. Etwas wie "cellspacing=0 cellpadding=0 border=0" gehört also nicht in die Webseite wenn CSS verwendet werden soll.
Jörg Reinholz
-
Hallo,
wenn ich mir mit deinen Angaben eine Webseite erstelle wird der Zellenabstand angezeigt. Das Problem muss also in dem Teil des Quelltextes liegen, den du uns verschweigst.
Stell' die Seite bitte online, damit das Problem auch sichtbar ist.
Gruss
MrMurphy
-
Hallo MrMurphy,
das Problem ist, dass die Seite keine öffentliche Seite ist sondern nur in unserem Intranet funktioniert. Deswegen kann ich euch die Seite nicht zeigen, da ihr keinen Zugriff auf diese habt.
Aber ich habe gerade gesehen, dass die html-Datei vom Typ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ist.
Bei html 5.0 funktioniert der code den ich hier veröffentlicht habe, wie du richtgig angemekrt hast. Wenn die html-Datei jedoch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ist, funktioniert es nicht.
Dann funktioniert es nur wenn man cellspacing="0" rauslöscht, was ich jedoch leider nicht tun kann.
Gibt es nun wirklich keine Möglcihkeit, es so anzuopassen wie ich gerne hätte, ohne die html-Datei zu verändern, so wie Jörg Reinholz meinte?
-
Hallo,
Bei html 5.0 funktioniert der code den ich hier veröffentlicht habe, wie du richtgig angemekrt hast. Wenn die html-Datei jedoch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ist, funktioniert es nicht.
Dann funktioniert es nur wenn man cellspacing="0" rauslöscht, was ich jedoch leider nicht tun kann.
Nö, das ist so nicht nachvollziehbar. Padding erscheint problemlos.
Du musst noch mehr Rahmenbedingungen preisgeben. Browser, OS, ...
Wird überhaupt dein zusätzliches Stylesheet verwendet?Gruß
Kalk-
@@Tabellenkalk
Bei html 5.0 funktioniert der code den ich hier veröffentlicht habe, wie du richtgig angemekrt hast. Wenn die html-Datei jedoch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ist, funktioniert es nicht.
Nö, das ist so nicht nachvollziehbar.
Doch, das ist es.
<!DOCTYPE html>⇒ Standard-Modus.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">ohne system identifier (URI) ⇒ Quirks-Modus.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo,
Nö, das ist so nicht nachvollziehbar.
Doch, das ist es.
<!DOCTYPE html>⇒ Standard-Modus.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">ohne system identifier (URI) ⇒ Quirks-Modus.hm, soll ich präzisieren: das konnte ich so nicht nachvollziehen, weil bei mir trotz doctype html 4.o transitional das CSS-Padding zur Anwendung kam?
Gruß
Kalk-
Hallo Tabellenkalk,
<!DOCTYPE html>⇒ Standard-Modus.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">ohne system identifier (URI) ⇒ Quirks-Modus.hm, soll ich präzisieren: das konnte ich so nicht nachvollziehen, weil bei mir trotz doctype html 4.o transitional das CSS-Padding zur Anwendung kam?
wahrscheinlich hast du keinen IE verwendet.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
-
-
-
Hallo und guten Morgen,
ich bin gerade dabei eine html Seite mithilfe eines Stylesheets etwas schöner zu gestalten. Das große Problem ist aber, dass ich keine Änderungen direkt in der html-Datei der Seite vornehmen kann, sondern lediglich das Stylesheet ändern kann.
Nun möchte ich aber die einzelnen Tabellensegment umrahmen lassen und zwischen den einzelnen Segmenten einen kleinen Abstand haben.
In der html-Datei steht:
<table class="formlist_table" cellspacing=0 cellpadding=0 border=0> <tr class="list1"> <td class="list1"> Zelle </td> <td class="list1"> Zelle </td> </tr> <tr class="list1"> <td class="list1"> Zelle </td> <td class="list1"> Zelle </td> </tr> </table>Im Stylesheet habe ich dann geschrieben:
table.formlist_table{ border-collapse: separate; border-spacing: 10px; } .list1{ border: 1px solid #006fff; }Aber da in der html-Datei bei table "cellspacing=0" steht, wird das "border-spacing: 10px" irgendwie ignoriert glaube ich.
Hat jemand eine Idee wie ich es hinbekomme einen Abstand zwischen den einzelnen Tabellensegmenten zu haben, ohne die html-Datei selbts zu verändern, da ich da wie gesagt nicht kann.
Da CSS die Formatierungsattribute von HTML überschreibt, kann es also nur daran liegen, WO Du dein CSS plaziert hast.
Da Du ja schreibst, dass Du am HTML nichts ändern kannst, mussen die CSS-Klassen-Attribute also schon enthalten gewesen sein. Daraus schließe ich nun, dass es für die Seite schon CSS-Angaben gibt. Wenn Du nun dein eigenes CSS vor dem vorhandenen einbindest, dann kann es sein, dass das dein eigenes wieder überschreibt. Da gilt dann nämlich: letzte Angabe gilt.
Grüße
TS -
Oke da ich euch die Seite nicht freigeben kann schicke ich euch hier jetzt einfach mal den ganezn Quellcode der Seite. Ich hoffe es ist einigermaßen verständlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta name="Author" content="Koblank GmbH"> <meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8"> <META HTTP-EQUIV ="expires" Content="0"> <link rel="stylesheet" href="instyle.css" type="text/css"> <title>ideeNet: Vasarhelji, Robert: Auftrag zu Idee-Nr. (IM-Nr.) 20114093 - Optimieren des Ideenet-Prozesses</title> <script language="JavaScript"> <!-- function Seite_laden (sSeite) { location.href=sSeite; } function neues_Fenster2(sSeite, sName2) { var RPTWindow; var lHeight; var lHeight2; var lWidth; var lWidth2; lWidth = 710;lHeight = 430;lWidth2 = Math.round((screen.width / 800) * lWidth);lHeight2 = Math.round((screen.height / 600) * lHeight);RPTWindow = window.open(sSeite,"","width=" + lWidth2 + ",height=" + lHeight2 + ",top=42,left=30,resizable=yes,scrollbars=yes,menubar=yes,toolbar=yes");RPTWindow.window.focus(); } function Form_open(lFormNr) { document.Form1.elements['Gutachtenformular'].value=lFormNr; document.Form1.elements['LiGd'].value='5'; document.Form1.submit(); } function Link_del() { if (confirm('Diese Datei wirklich löschen?')) { document.forms[0].LiGd.value='1'; document.forms[0].submit(); }} function Form_del(sFrage2) { var sFrage1 = 'Dieses Formular wirklich löschen?'; if (sFrage2) sFrage1=sFrage2; if (confirm(sFrage1)) { document.forms[0].LiGd.value='2'; document.forms[0].submit(); } } function GAWL_Hinweis() { if (document.forms[0].GutachterWlZl.value!='0') { document.getElementById('rbGAWl').className='sichtbar'; } else { document.getElementById('rbGAWl').className='unsichtbar'; } } var win; function FensterModal(sHTMSeite, lWidth, lHeight, lLeft, lTop){win = window.open(sHTMSeite,"wModal2","width=" + lWidth + ",height=" + lHeight + ",resizable=yes,scrollbars=no,top=" + lTop + ",left=" + lLeft + "");} function FensterModalR(sHTMSeite, lWidth, lHeight, lTop, lRightDiv ){var lLeft2; lLeft2 = screen.width - lWidth - 10 - lRightDiv; win = window.open(sHTMSeite,"wModal2","width=" + lWidth + ",height=" + lHeight + ",resizable=yes,scrollbars=no,top=" + lTop + ",left=" + lLeft2 + "");} function FensterModal_Scrollbar(sHTMSeite, lWidth, lHeight, lLeft, lTop, lAutoZoom){var lHeight2; var lWidth2; lWidth2=lWidth; lHeight2=lHeight; if (lAutoZoom=='2') {lWidth2 = Math.round((screen.width / 800) * lWidth);} if (lAutoZoom=='1' || lAutoZoom=='2') {lHeight2 = Math.round((screen.height / 600) * lHeight);}win = window.open(sHTMSeite,"wModal2","width=" + lWidth2 + ",height=" + lHeight2 + ",resizable=yes,scrollbars=yes,top=" + lTop + ",left=" + lLeft + "");} var win; function FensterModal2(sHTMSeite, lWidth, lHeight, lLeft, lTop){var lHeight2;lHeight2 = Math.round((screen.height / 600) * lHeight);win = window.open(sHTMSeite,"wModal2","width=" + lWidth + ",height=" + lHeight2 + ",top=" + lTop + ",left=" + lLeft + ",resizable=yes,scrollbars=yes,menubar=no,toolbar=no");}function FensterModal3(sHTMSeite, lWidth, lHeightDiv, lLeft, lTop){var lHeight2;lHeight2 = (screen.height - lHeightDiv);win = window.open(sHTMSeite,"wModal2","width=" + lWidth + ",height=" + lHeight2 + ",top=" + lTop + ",left=" + lLeft + ",resizable=yes,scrollbars=yes,menubar=no,toolbar=no");}function FensterModal3R(sHTMSeite, lWidth, lHeightDiv, lTop, lRightDiv){ var lHeight2; var lLeft2; lHeight2 = (screen.height - lHeightDiv); lLeft2 = screen.width - lWidth - 10 - lRightDiv; win = window.open(sHTMSeite,"wModal2","width=" + lWidth + ",height=" + lHeight2 + ",top=" + lTop + ",left=" + lLeft2 + ",resizable=yes,scrollbars=yes,menubar=no,toolbar=no");} function NoErrorModalClose() { return true; } function ModalClose() { window.onerror = NoErrorModalClose; if (win) { if (win.document.forms['Form1']) { if (win.document.forms['Form1'].elements['FocusMe']) {win.focus();return true;} } if (win.win) { if (win.win.document.forms['Form1']) { if (win.win.document.forms['Form1'].elements['SaveMe']) {win.win.SaveAll();} if (win.win.document.forms['Form1'].elements['SaveMeNoClose']) {win.win.SaveAll();return true;} } if (!(win.win.closed)){win.win.close();} } if (win.document.forms['Form1']) { if (win.document.forms['Form1'].elements['SaveMe']) {win.SaveAll();} if (win.document.forms['Form1'].elements['SaveMeNoClose']) {win.SaveAll();return true;} } if (!(win.closed)){;win.close();win=false;} } } function MASuchDel(lTyp, sZaehlerFeld) { var lBisher; lBisher = 0; if (sZaehlerFeld != '') { lBisher = document.Form1.elements[sZaehlerFeld].value; } FensterModal_Scrollbar('memsearch.aspx?typ='+ lTyp + '&bisher=' + lBisher + '&nsdy=42199,3975401968',700,480,30,80,0) } function AutoSubmit2(){ window.setTimeout('AutoSubmit2()',2660000); lWinDummyLeft = (screen.width - 310) / 2; lWinDummyTop = (screen.height - 200) / 2; sWinDummy = window.open('','winDummy','width=300,height=200,resizable=no,top=' + lWinDummyTop + ',left=' + lWinDummyLeft); sWinDummy.document.write ('<html><head><title>ideeNet</title></head><body><div class="modal"><table border=0 cellspacing=0 cellpadding=0 height=100% width=100%><tr><td align="center" style="font-family: arial; font-size: 9pt;">Bitte warten...</td></tr></table><script>location.href = "selfclose.aspx";</script></div></body></html>'); } window.setTimeout('AutoSubmit2()',2660000); function Hilfe_anzeigen(sHilfeseite) { var helpwin; var helpLeft; var helpHeight; var helpWidth = 580; var helpTop = 0; helpHeight = screen.height - 150; helpLeft = screen.width - helpWidth - 10; helpwin = window.open(sHilfeseite,"Hilfe","width="+helpWidth+",height="+helpHeight+",top="+helpTop+",left="+helpLeft+",resizable=yes,scrollbars=yes"); helpwin.window.focus(); } function ScrollDropdown() { if (event.wheelDelta) { window.scrollBy(0,(-0.3)*event.wheelDelta); } return false; } // --> </script> <style type="text/css"> <!-- .main, body.popup, body.popup_framemenu {background-image: none; background-color: #FFFFFF; } table.menu {background-color: #0099FF;} td.menu {color: #0000FF; font-weight: bold; } a.menu {color: #FFFFFF; font-weight: bold; } a.menu:link {color: #FFFFFF;} a.menu:visited {color: #FFFFFF;} a.menu:active {color: #FFFFFF;} --> </style> <link rel="stylesheet" href="ideeNet-styles.css" type="text/css"> <link rel="stylesheet" href="ideeNet-styles02.css" type="text/css"> <script type="text/javascript" src="add-ons/ideeNet-javascript.js"></script> </head> <body class="popup evaluate" onfocus="ModalClose()"><style type="text/css"> input.schalter2{font: bold 11px/14px Arial, sans-serif; position: relative;} </style> <table cellpadding=0 cellspacing=0 border=0 width=100%> <tr><td class="hIN">Vasarhelji, Robert: Auftrag zu Idee-Nr. (IM-Nr.) 20114093 - Optimieren des Ideenet-Prozesses</td></tr> </table> <hr class="line1"> <form name="Form1" action="evaluate.aspx?Zl=-62408" method="post"><div id="GAAlles" class="sichtbar"><input type="hidden" name="LiGd" value="9"> <table cellspacing="0" cellpadding="0" width="400"> <tr> <td> <b>Allgemeine Hinweise zur Erledigung von Aufträgen:</b> <ul> <li>Bitte verwenden Sie zur Begutachtung/Stellungnahme die unten aufgeführten Formulare!. <li>Verwenden Sie ggf. als Hilfe für Gutachten/Stellungnahmen den unten auf der Seite aufgeführten Link . </ul> </td> </tr> </table> <b>Nur Kurz-Hinweise an weitere Gutachter!!!</b>:<br> <table cellpadding=0 cellspacing=0 border=0><tr><td width=410>Hallo Robert,<br>bitte Idee begutachten. Rücksprache bitte mit H. Elsacker!<br><br>MfG</td></tr> </table> <p/><p class="formlist"><b>Prämierung - Stellungnahme/Gutachten - Ablehnung</b>:<br> <input type="hidden" name="Gutachtenformular" value=""> <table class="formlist_table" cellspacing=0 cellpadding=0 border=0> <tr class="formlist_row listpy"> <td class="list1 formlist_col1"><a href="javascript:Form_open(1);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(1);">Gutachten/Stellungnahme oder Ablehnung</a></td> </tr> <tr class="formlist_row"> <td class="list1 formlist_col1"><a href="javascript:Form_open(2);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(2);">Prämienklasse 1 - 7 Qualität</a></td> </tr> <tr class="formlist_row listpy"> <td class="list1 formlist_col1"><a href="javascript:Form_open(3);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(3);">Prämienklasse 1 - 7 Ergonomie</a></td> </tr> <tr class="formlist_row"> <td class="list1 formlist_col1"><a href="javascript:Form_open(4);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(4);">Prämienklasse 1 - 7 Arbeitssicherheit</a></td> </tr> <tr class="formlist_row listpy"> <td class="list1 formlist_col1"><a href="javascript:Form_open(5);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(5);">Prämienklasse 1 - 7 Umweltschutz</a></td> </tr> <tr class="formlist_row"> <td class="list1 formlist_col1"><a href="javascript:Form_open(6);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(6);">Prämienklasse 1 - 7 sonstige Verbesserungen</a></td> </tr> <tr class="formlist_row listpy"> <td class="list1 formlist_col1"><a href="javascript:Form_open(7);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(7);">Prämienklasse 8 - 10 Einsparung berechenbar</a></td> </tr> <tr class="formlist_row"> <td class="list1 formlist_col1"><a href="javascript:Form_open(8);" class="radio"></a></td> <td class="list1 formlist_col2"><a class="formlist_link" href="javascript:Form_open(8);">Berechnungshilfe für berechenbare Ideen</a></td></tr> </table>** <a target="_blank" href="http://www.zf-world.com/ml/T/TP/FRD/fkst606_FP/TPTI/TPTI1/Hilfs-_und_Infounterlagen_zum_Ideenprozess/index.html">Link zu den Anlagen der BV IM mit den Bewertungs- bzw. Prämierungsvorgaben<br> </a> </body></html>Das Stylesheet, welches ich schreibe heißt "ideeNet-styles.css". Deswegen sollte es das Stylesheet "instyle.css", welches bereit existiert hat, eigentlich überlagern. Weitere Stylesheets existieren nicht.
Es handelt sich um die Tabelle ganz am Ende zwischen den zwei großen Lücken, welche ich mit Rahmen und Abständen formatieren möchte.
-
Hallo Alexander,
schau dir deine Seite mit den Entwicklertools deines Browsers (meist [F12]) an. So kannst du prüfen, welche CSS-Deklarationen angewendet werden.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias,
danke für den Tipp.
Ich habe mal nachgeschaut und die gewünschte CSS-Deklaration wird auch angewendet, nur werden die auswirkungen trotzdem nicht angezeigt. Aber ich habe geshen, dass wenn ich den Dokumentenmodus auf IE9 umstelle, anstatt auf Quriks zu lassen, wir es von Anfang an war, dann wird es richtig angezeigt. Nur wie stelle ich das ein, damit es Standartmäßig im Dokumentenmodus IE9 angezeigt wird. Geht das überhaupt ohne die html-Datei zu bearbeiten? Und wenn nicht, was müsste man dann genau in die html Datei schreiben und wo?
Hier sind mal noch zwei Bilder wie es aussieht wenn es falsch und richtig ist.
-
-
Hallo,
<body class="popup evaluate" onfocus="ModalClose()"><style type="text/css"> input.schalter2{font: bold 11px/14px Arial, sans-serif; position: relative;}
</style>
Du hast im Body ein Style-Element, das gehört da nicht hin. Verwende einen Validator um das HTML zu bereinigen, dann kannst du auch den Quirksmodus verlassen.
Gruß
Kalk-
Hallo,
<body class="popup evaluate" onfocus="ModalClose()"><style type="text/css"> input.schalter2{font: bold 11px/14px Arial, sans-serif; position: relative;}
</style>
Du hast im Body ein Style-Element, das gehört da nicht hin. Verwende einen Validator um das HTML zu bereinigen, dann kannst du auch den Quirksmodus verlassen.
Gruß
KalkHallo Kalk,
vielen Dank für deine Antwort.
Das heißt sobald ich das HTML bereinigt habe, wird es automatisch nicht mehr im Quirksmodus ausgeführt? Oder muss ich dann noch etws anderes machen, dass es nicht im Quriksmodus ausgeführt wird.
Und kann man das nicht auch einfach erzwingen, dass das HTML nicht im Quirksmodus geöffnet wird, sondern in IE9 ?
-
Hallo,
Das heißt sobald ich das HTML bereinigt habe, wird es automatisch nicht mehr im Quirksmodus ausgeführt? Oder muss ich dann noch etws anderes machen, dass es nicht im Quriksmodus ausgeführt wird.
Siehe Glossar
Und kann man das nicht auch einfach erzwingen, dass das HTML nicht im Quirksmodus geöffnet wird, sondern in IE9 ?
Nein, du kannst es nicht erzwingen, mit welchem Browser die Nutzer Webseiten öffnen.
Gruß
Kalk -
@@Alexander
Oder muss ich dann noch etws anderes machen, dass es nicht im Quriksmodus ausgeführt wird.
Wie ich schon geschrieben hab, führt eine HTML-4-Transitional-DOCTYPE-Angabe ohne system identifier (URI) zum Quirks-Modus.
Eine HTML-4-Transitional-DOCTYPE-Angabe mit system identifier (URI) schickt den Browser in den Standard-Modus, ebenso eine HTML-4-Strict-DOCTYPE-Angabe.
Nichts davon ist empfehlenswert. Verwende die HTML5-Angabe
<!DOCTYPE html>.Und kann man das nicht auch einfach erzwingen, dass das HTML nicht im Quirksmodus geöffnet wird, sondern in IE9 ?
Es gibt den Kompatibilitätsmodus. Auch nicht wirklich empfehlenswert.
Am besten, du bereinigst das HTML und schmeißt alle darstellungsbezogenen Attribute (und Elemente) raus.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-