[Erledigt] DIV über TABLE: IE zeigt Border über der DIV

saibot · 05.01.2012, 17:03

Hallo,

ich hänge grad mal wieder an einem kleinen Darstellungsunterschied zwischen Firefox und IE9. folgendes Problem: Ich hab eine Tabelle, und in dieser Tabelle soll ein Div erstellt werden, welches aber seitlich über die Tabelle hinaus ragen soll (zur Bildanzeige). Über einen negativen margin der Div funktioniert das prinzipiell auch. Nur zeigt mir der IE den Rahmen der darunter liegenden Tabelle trotzdem an, als ob die Div transparent wäre. Im firefox ist es so wie ich es erwartet hatte (DIV über Tabelle)

Wenn ich das border-collapse:collapse; entferne, wird es richtig angezeigt, aber das kann ich wegen meiner Tabelle nicht machen, sonst passen da die Grafiken usw nichtmehr.

Hat jemand eine Idee wie ich das mit dem überlappenden Div sonst noch machen kann mit css?

So siehts aus:
http://joomtest.cwsurf.de/test.htm

Code:

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

<body>

<div align="center">
  <table style="border: 1px solid red; border-collapse: collapse;"  width="950">
  	<tr>
  	<td>
        <p>&nbsp;</p>     
        <div style="margin:0px -65px; background-color:#FF0; border:1px #0f0 solid;">DIV1</div>
        <p>&nbsp;</p>    					
  	</td>
  	</tr>
  </table>
</div>

</body>
</html>

Seradus · 06.01.2012, 19:35

Ich würde das ganze mit z-index lösen.

Siehe: http://de.selfhtml.org/css/eigenscha...ng.htm#z_index

Damit kannst du dem Browser explizit sagen welches Element über welchem liegt.

Dark Guardian · 06.01.2012, 20:15

Beachte bitte auch Webkit Browser. Zumindest Chrome zeigt das gleiche Problem wie dein IE9.

Auf border-collapse kannst du verzichten indem du mit border-spacing den Abstand zwischen den Rahmen der Zellen auf 0 setzt.

Für ältere Browser kannst du das veraltete HTML Attribut cellspacing verwenden.

saibot · 06.01.2012, 23:37

Super, danke für die Tipps. border-spacing hat nicht das gleiche Ergebnis gebracht wie border-collapse. Habe jetzt position:relative verwendet statt dem margin und einen z-index angegeben. Jetzt gehts

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Group über zwei Felder und Sortierung	mcules	Datenbanken	6	21.06.2011 21:24
Datenbank über Notepad bearbeiten.	Anthony70	PHP Einsteiger	4	21.04.2011 21:43
VB-Prog mit COM-Objekt über shell_exec aufgerufen bricht ab	emtiqor	PHP-Fortgeschrittene	5	04.04.2011 20:17
[Erledigt] Grundsatzfrage über Tabellenstruktur und SQL Statement	Bravestar2010	Datenbanken	2	04.02.2011 11:49
Sperren von ips über admin menü	mikeJ	PHP Tipps 2010	12	03.08.2010 16:03
[Erledigt] Summation über Unterabfragen - Mysql	jume	Datenbanken	20	30.05.2010 09:58
AD zugriff über PHP	jared566	PHP Tipps 2010	6	12.05.2010 11:32
Über PHP User in Tabelle eintragen	Twixus	Datenbanken	1	05.02.2010 13:26
[Erledigt] create Table über php	Rutor	PHP Tipps 2009	7	13.01.2010 10:29
[Erledigt] Table erstellen mit variablem Name	Rutor	PHP Tipps 2009	10	07.01.2010 12:52
[Erledigt] PHP-DB2 und REORG TABLE	Desian	Datenbanken	2	21.08.2009 18:27
Projekt: User über Intranetpage erstellen, auf einen VoIP-Server	beta1234	PHP Tipps 2009	2	22.07.2009 13:21
[Erledigt] Einzelnen DB-Eintrag über ID anzeigen	Knutschi	PHP Tipps 2009	6	26.03.2009 09:56
Javascript über Javascript erstellen		HTML, Usability und Barrierefreiheit	2	19.11.2004 18:02
Umleitung über Meta-Angaben im Header abhängig vom Host		PHP Tipps 2004	7	14.06.2004 12:34

05.01.2012, 17:03
saibot Erfahrener Benutzer Registriert seit: 14.07.2005 Beiträge: 118	[Erledigt] DIV über TABLE: IE zeigt Border über der DIV Hallo, ich hänge grad mal wieder an einem kleinen Darstellungsunterschied zwischen Firefox und IE9. folgendes Problem: Ich hab eine Tabelle, und in dieser Tabelle soll ein Div erstellt werden, welches aber seitlich über die Tabelle hinaus ragen soll (zur Bildanzeige). Über einen negativen margin der Div funktioniert das prinzipiell auch. Nur zeigt mir der IE den Rahmen der darunter liegenden Tabelle trotzdem an, als ob die Div transparent wäre. Im firefox ist es so wie ich es erwartet hatte (DIV über Tabelle) Wenn ich das border-collapse:collapse; entferne, wird es richtig angezeigt, aber das kann ich wegen meiner Tabelle nicht machen, sonst passen da die Grafiken usw nichtmehr. Hat jemand eine Idee wie ich das mit dem überlappenden Div sonst noch machen kann mit css? So siehts aus: http://joomtest.cwsurf.de/test.htm Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head></head> <body> <div align="center"> <table style="border: 1px solid red; border-collapse: collapse;" width="950"> <tr> <td> <p> </p> <div style="margin:0px -65px; background-color:#FF0; border:1px #0f0 solid;">DIV1</div> <p> </p> </td> </tr> </table> </div> </body> </html> Geändert von saibot (05.01.2012 um 19:58 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.01.2012, 19:35
Seradus Neuer Benutzer Registriert seit: 29.11.2011 Beiträge: 11 PHP-Kenntnisse: Fortgeschritten	Ich würde das ganze mit z-index lösen. Siehe: http://de.selfhtml.org/css/eigenscha...ng.htm#z_index Damit kannst du dem Browser explizit sagen welches Element über welchem liegt. __________________ Dev-Setup: Xubuntu 11.04, NetBeans 7.0 Framework: Symfony 1.4 Webhosting: Wuchthosting

06.01.2012, 20:15
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Beachte bitte auch Webkit Browser. Zumindest Chrome zeigt das gleiche Problem wie dein IE9. Auf border-collapse kannst du verzichten indem du mit border-spacing den Abstand zwischen den Rahmen der Zellen auf 0 setzt. Für ältere Browser kannst du das veraltete HTML Attribut cellspacing verwenden. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

06.01.2012, 23:37
saibot Erfahrener Benutzer Registriert seit: 14.07.2005 Beiträge: 118	Super, danke für die Tipps. border-spacing hat nicht das gleiche Ergebnis gebracht wie border-collapse. Habe jetzt position:relative verwendet statt dem margin und einen z-index angegeben. Jetzt gehts