margin / padding Problem

Buhmann · 03.08.2006, 21:55

Hallo,
Ich bin gerade dabei mir ein neues Design zusammenzuzimmern und dabei auf ein Problem gestoßen (wie sollte es auch anders sein).

Das Design kann man sich hier anschauen: Klick

Im FF stimmt alles soweit, nur der IE hat probleme mit der Div-Breite, da er das padding zu der Breite hinzuzählt (margin ebenso). Dadurch sind die Div's unterschiedlich breit.

Gibt es eine möglichkeit das Problem zu lösen, ohne den den Div's eine Fixe breite zu geben?

robo47 · 03.08.2006, 23:11

hmm denke das wird man so nicht wirklich unter kontrollebringen, da man ja bei css nicht sagen kann, breite -xx px, vieleicht JS ? vieleicht kann man mit JS nachträglich die breite um xx pixel verändern ? denke aber das willst du nicht oder ?

mfg
robo47

Buhmann · 03.08.2006, 23:15

Javascript möchte ich am liebsten rauslassen, stimmt schon. Ich kann mir blos nicht vorstellen, dass es für so ein Problem keinen üblichen Trick gibt ... ich meine es ist ja kein Problem auch ohne js dem ie anderen css code vorzusetzen, da muss es doch ein möglichkeit geben ....

mr1st · 04.08.2006, 13:45

Hallo,

es bestünde die Möglichkeit, in jeder HTML-Datei für'n IE einen eigenen CSS-Code einzufügen:

Code:

...
<head>
...
<!--[if IE]>
 <style type="text/css" media="screen">
 /* CSS-Code */
 </style>
<![endif]-->
</head>

Genaueres findest Du bei hier.

MfG

thrawn · 05.08.2006, 21:54

Um das Schreiben einer extra-datei für den IE zu vermeiden, verwende ich oftmals das !important, welches die Priorität einer Angabe erhöht.

Da der IE diese import-regel ignoriert, wendet der IE die zuletzt genannte Zuweisung an, während sich FF und Co am important orientieren:

Bsp:

PHP-Code:

  div#main {

    padding:10px !important;

    padding:14px;

}

Der Div-Container mit der ID "main" hat nun ein padding von 10px. Die darauffolgenden 14px werden ignoriert. Im IE hätte der Container ein pading von 14px, da er, wie bereits erwähnt, die Important-Anweisung nicht kennt.

Buhmann · 05.08.2006, 23:05

Ich glaube ihr habt meinen Post missinterpretiert

Zitat:

es ist ja kein Problem auch ohne js dem ie anderen css code vorzusetzen

Ich wüsste nur nicht, was für angaben man dem geben sollte.

btw.: Ich mache es mit dem _ :

Code:

div#main {
    padding:10px;
    _padding:14px;
}

Aber was soll man dem den sagen, was das Problem löst?

$traight-$hoota · 07.08.2006, 13:00

Zitat:

Zitat von Buhmann

btw.: Ich mache es mit dem _ :

Code:

div#main {
    padding:10px;
    _padding:14px;
}

das ist ungünstig, weil du damit keinen validen css code hast. ff & co ignorieren zwar unbekannte eigenschaften, aber dennoch ist dieser code einfach falsch...

MrNiceGuy · 07.08.2006, 21:48

Also entweder hat er den Code in den Griff bekommen oder bei mir zeigen einfach Opera, FF und der IE trotz des Fehlers bei ihm alle das Gleiche an...

Achso, bevor ich es vergesse: Hier nochmal ein paar Informationen zum Box-Model-Fehler: http://de.selfhtml.org/css/formate/box_modell.htm Vielleicht hilft das ja auch ohne die tollen Hacks da oben ^^ das Layout gerade zu biegen, habe da mal irgendwann was von Divs in Divs gehört, die das Problem umgehen sollen.

Buhmann · 07.08.2006, 22:48

Ich habe da nichts verändert und im IE funzts bei mir auch nicht auf einmal .... welche version hast du?

Werde mir den Link mal anschauen, wusste garnicht das es sowas bei selfhtml gibt, danke.

JumperII · 07.08.2006, 22:58

Naja ... in der CSS die Underline-Version eingeführt ist nun nicht gerade nichts .....

Aber schön ist es nicht mit der Zeichensatzkodierung gibt es ein zusätzliches Problem ...

Gruß,
Jumper, the II.

MrNiceGuy · 08.08.2006, 06:04

Meine IE-Version: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

Sieht halt in allen 3 Browsern gleich aus oder sollen die Unterschiede so minimal sein, dass man sie nicht erkennen kann auf den ersten Blick?

Buhmann · 08.08.2006, 10:30

Der Underscore Hack war von Anfang an drin, werde in bei gelegenheit aber gegen die Version mit !important austauschen.
@MrNiceGuy bei mir macht der IE (gleiche version wie bei dir) den unteren div kleiner als den Oberen an (also die weiße Box mit Lorem Ipsum drin ist kleiner als die darüberliegende Box mit dem anderen Blindtext drin).

WarrenFaith · 08.08.2006, 12:28

gleiche IE-Version wie MrNiceGuy und ebenfalls kleineres Div unten...

JumperII · 08.08.2006, 12:37

Okok ... jetzt habe ich es gesehen ... Wieso es der IE macht, weiß ich nicht ....

HTML-Code:

.content div.body {
        padding: 8px;
        _width: 100%;
}

Sollte das Problem lösen ...

// Edit: oder alternativ die Breitenangabe aus den head wegnehmen?
// Edit^2: Und natürlich den Underscore vergessen

Gruß,
Jumper, the II.

Bookworm · 08.08.2006, 14:21

Also ich hab ja nur die IE7 Beta zum testen, aber ich kann MrNiceGuy nur zustimmen. BEi mir sieht alles gleich aus, mal von der extrem häßlichen Schriftinterpretation des IE abgesehen

MrNiceGuy · 08.08.2006, 17:12

Ich muss mich korrigieren, bei mir ist tatsächilch der untere Div schmaler, als der darüber, es war halt bei mir nur so wenig, dass mir das nicht direkt aufgefallen ist, sorry.

@bookworm: Dass es bei dir ok ist liegt wahrscheinlich daran, dass MS den Box-Model-Bug in der 7er Version beheben wollte und offenbar auch geschafft hat!?

Bookworm · 08.08.2006, 19:27

Zitat:

@bookworm: Dass es bei dir ok ist liegt wahrscheinlich daran, dass MS den Box-Model-Bug in der 7er Version beheben wollte und offenbar auch geschafft hat!?

Was?! Wo ich dieser primitiven Art, CSS zu interpretieren, doch gerade den richtigen Charme abgewinnen konnte? Das ist jetzt aber echt nicht fair... *rofl*

03.08.2006, 21:55	Nach oben #1
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 115	margin / padding Problem Hallo, Ich bin gerade dabei mir ein neues Design zusammenzuzimmern und dabei auf ein Problem gestoßen (wie sollte es auch anders sein). Das Design kann man sich hier anschauen: Klick Im FF stimmt alles soweit, nur der IE hat probleme mit der Div-Breite, da er das padding zu der Breite hinzuzählt (margin ebenso). Dadurch sind die Div's unterschiedlich breit. Gibt es eine möglichkeit das Problem zu lösen, ohne den den Div's eine Fixe breite zu geben? __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to build bigger and better idiots. So far, the universe is winning.

03.08.2006, 23:11	Nach oben #2
robo47 Benjamin Steininger Registriert seit: 02.06.2005 Ort: weiher im tiefsten Odenwald Beiträge: 1.204	hmm denke das wird man so nicht wirklich unter kontrollebringen, da man ja bei css nicht sagen kann, breite -xx px, vieleicht JS ? vieleicht kann man mit JS nachträglich die breite um xx pixel verändern ? denke aber das willst du nicht oder ? mfg robo47 __________________ - Onlinetools - Mein Blog endlich mit RSS-Feed

03.08.2006, 23:15	Nach oben #3
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 115	Javascript möchte ich am liebsten rauslassen, stimmt schon. Ich kann mir blos nicht vorstellen, dass es für so ein Problem keinen üblichen Trick gibt ... ich meine es ist ja kein Problem auch ohne js dem ie anderen css code vorzusetzen, da muss es doch ein möglichkeit geben .... __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to build bigger and better idiots. So far, the universe is winning.

04.08.2006, 13:45	Nach oben #4
mr1st Benutzer Registriert seit: 08.02.2005 Ort: Wien Beiträge: 86	Hallo, es bestünde die Möglichkeit, in jeder HTML-Datei für'n IE einen eigenen CSS-Code einzufügen: Code: ... <head> ... <!--[if IE]> <style type="text/css" media="screen"> /* CSS-Code / </style> <![endif]--> </head> Genaueres findest Du bei hier. MfG __________________ Kosmetik Hobby*

05.08.2006, 21:54	Nach oben #5
thrawn Benutzer Registriert seit: 29.12.2005 Ort: Hamburg Beiträge: 44	Um das Schreiben einer extra-datei für den IE zu vermeiden, verwende ich oftmals das !important, welches die Priorität einer Angabe erhöht. Da der IE diese import-regel ignoriert, wendet der IE die zuletzt genannte Zuweisung an, während sich FF und Co am important orientieren: Bsp: PHP-Code: `div#main { padding:10px !important; padding:14px; }` Der Div-Container mit der ID "main" hat nun ein padding von 10px. Die darauffolgenden 14px werden ignoriert. Im IE hätte der Container ein pading von 14px, da er, wie bereits erwähnt, die Important-Anweisung nicht kennt.

07.08.2006, 21:48	Nach oben #8
MrNiceGuy Lutz Registriert seit: 14.08.2005 Ort: Nienburg / Weser Beiträge: 687	Also entweder hat er den Code in den Griff bekommen oder bei mir zeigen einfach Opera, FF und der IE trotz des Fehlers bei ihm alle das Gleiche an... Achso, bevor ich es vergesse: Hier nochmal ein paar Informationen zum Box-Model-Fehler: http://de.selfhtml.org/css/formate/box_modell.htm Vielleicht hilft das ja auch ohne die tollen Hacks da oben ^^ das Layout gerade zu biegen, habe da mal irgendwann was von Divs in Divs gehört, die das Problem umgehen sollen. __________________ Paradox ist, wenn jemand für seinen Alkoholkonsum geradestehen soll Geändert von MrNiceGuy (07.08.2006 um 21:54 Uhr)

07.08.2006, 22:48	Nach oben #9
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 115	Ich habe da nichts verändert und im IE funzts bei mir auch nicht auf einmal .... welche version hast du? Werde mir den Link mal anschauen, wusste garnicht das es sowas bei selfhtml gibt, danke. __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to build bigger and better idiots. So far, the universe is winning.

07.08.2006, 22:58	Nach oben #10
JumperII Erfahrener Benutzer Registriert seit: 27.02.2006 Beiträge: 159	Naja ... in der CSS die Underline-Version eingeführt ist nun nicht gerade nichts ..... Aber schön ist es nicht mit der Zeichensatzkodierung gibt es ein zusätzliches Problem ... Gruß, Jumper, the II.

08.08.2006, 06:04	Nach oben #11
MrNiceGuy Lutz Registriert seit: 14.08.2005 Ort: Nienburg / Weser Beiträge: 687	Meine IE-Version: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 Sieht halt in allen 3 Browsern gleich aus oder sollen die Unterschiede so minimal sein, dass man sie nicht erkennen kann auf den ersten Blick? __________________ Paradox ist, wenn jemand für seinen Alkoholkonsum geradestehen soll

08.08.2006, 10:30	Nach oben #12
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 115	Der Underscore Hack war von Anfang an drin, werde in bei gelegenheit aber gegen die Version mit !important austauschen. @MrNiceGuy bei mir macht der IE (gleiche version wie bei dir) den unteren div kleiner als den Oberen an (also die weiße Box mit Lorem Ipsum drin ist kleiner als die darüberliegende Box mit dem anderen Blindtext drin). __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to build bigger and better idiots. So far, the universe is winning.

08.08.2006, 12:28	Nach oben #13
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.653	gleiche IE-Version wie MrNiceGuy und ebenfalls kleineres Div unten... __________________ I did it my way - Senseless-Blog Weihnachtsgeschenk? Schülern helfen - Bodypainting Kalender für 2009

08.08.2006, 12:37	Nach oben #14
JumperII Erfahrener Benutzer Registriert seit: 27.02.2006 Beiträge: 159	Okok ... jetzt habe ich es gesehen ... Wieso es der IE macht, weiß ich nicht .... HTML-Code: .content div.body { padding: 8px; _width: 100%; } Sollte das Problem lösen ... // Edit: oder alternativ die Breitenangabe aus den head wegnehmen? // Edit^2: Und natürlich den Underscore vergessen Gruß, Jumper, the II. Geändert von JumperII (08.08.2006 um 12:40 Uhr)

08.08.2006, 14:21	Nach oben #15
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Also ich hab ja nur die IE7 Beta zum testen, aber ich kann MrNiceGuy nur zustimmen. BEi mir sieht alles gleich aus, mal von der extrem häßlichen Schriftinterpretation des IE abgesehen __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

08.08.2006, 17:12	Nach oben #16
MrNiceGuy Lutz Registriert seit: 14.08.2005 Ort: Nienburg / Weser Beiträge: 687	Ich muss mich korrigieren, bei mir ist tatsächilch der untere Div schmaler, als der darüber, es war halt bei mir nur so wenig, dass mir das nicht direkt aufgefallen ist, sorry. @bookworm: Dass es bei dir ok ist liegt wahrscheinlich daran, dass MS den Box-Model-Bug in der 7er Version beheben wollte und offenbar auch geschafft hat!? __________________ Paradox ist, wenn jemand für seinen Alkoholkonsum geradestehen soll

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit dem Verständnis: padding	Garnele	HTML, XML und CSS	5	28.02.2007 07:54
[CSS] <div> ignoriert margin: 0px auto;	WarrenFaith	HTML, XML und CSS	7	23.10.2006 14:05
Inkompatibilitätsprobleme beim Internet Explorer	Chr!s	HTML, XML und CSS	4	13.10.2006 19:37
WebDesigner: individueller Skin für WikiMedia Wiki	Ben	Gesuche	0	26.05.2006 03:27
Bilder haben ein padding, obwohl padding: 0px	Lars	HTML, XML und CSS	2	01.11.2005 21:59