Firefox hui, IE pfui!!??

Calexico · 30.11.2004, 16:46

Hejhej!

Ich hab mit ner Page angefangen, dich ich mit jetzt zum ersten mal komplett mit css und layern gestalten will (also ohne Tabellen). Jetzt hab ich das ganze Design erstmal entworfen und im Firefox getestet. Sieht dort wunderbar aus!!
So nun das ganze auf dem IE und was rauskommt ist der letzte Müll.
Beim Firefox musste ich width-Angaben machen und dabei die breite der border abziehen, d.h. jeweils 2px. Beim IE brauche ich das anscheinend nicht zu machen, denn jetzt ist alles komplett verschoben nicht mehr breit genug etc. Außerdem scheint der IE Abstände rein zu machen zwischen 2 Layern, die er nicht machen soll!!

Wie kann ich das ganze vielleicht so hinbekommen, dass es sowohl beim Firefox als auch beim IE so aussieht wie's soll??

DANKE!

Calexico

30.11.2004, 16:57

http://css4you.de/wslayout1/index.html

also bei mir sieht das immer in beiden browsern gleich aus (naturtalent^^), deswegen kann ich dir außer dem link nichts empfehlen

agrajag · 30.11.2004, 17:20

Das liegt am kaputten Box-Modell im IE. Der Firefox macht's so wie es das w3c vorschlägt der IE macht mal wieder irgendwas.
Wenn du also mit festen Breietn arbeitest wirst du dich damit noch eine Weile rumschlagen müssen....

Such mal bei Google & Co. nach "Box-Model hack" (oder ähnlich). Es gibt da einige mehr oder weniger gute Ansätze um den Bug im IE zu umgehn.

viel Glück dabei
werbegeschenk

30.11.2004, 19:54

Boah, das ist echt zum Haare ausreissen, das Problem hatte ich auch mal... habs dann aufgegeben :/
VIelleicht gibt mir der Thread hier wieder was Schwung.

fantast · 30.11.2004, 21:42

ja, das sollte er. ich hab mich auch grade durch die selbe problematik gekaempft, aber wenn man lange genug probiert, haut das mehr oder weniger hin

ie6 is uebrigens sauber, das problem is der ie 5(.5) zur not (aber nur wenns nich anders geht) schreibst du ne browserweiche...

Calexico · 30.11.2004, 22:08

ne, auf ne browserweiche hab ich keine lust..........und durch rumprobieren bin ich auch nicht weiter gekommen. ich weiß nur, dass das gleiche design mit tabellen in beiden browsern perfekt aussieht.....

(

toscho · 01.12.2004, 18:53

Um bei Opera, Safari, IE Mac und Mozilla das W3C-Boxmodel zu gewährleisten (auch im Quirksmodus), schreib:

Code:

#box {
    box-sizing:  content-box;
    -moz-box-sizing: content-box;
    width: 10em;
    padding: 1em;
}

Den IE 6 versetzt du am besten auch in den Quirksmodus, damit er sich beim Boxmodel wie die früheren Versionen verhält. Einfach einen leeren Kommentar an den Anfang des HTML-Dokumentes setzen, dann ist das erledigt.
Dann schreibst du eine Regel, die nur der IE Win liest:

Code:

* html #box {
    /* Dieser Kommentar hält den IE Mac draußen. \*/
    width: 12em;
    /* */
}

Ist doch ganz einfach. ;)
Hmm … vielleicht sollte ich dazu mal ein ausführlicheres Demo schreiben …

Gruß
Thomas

Calexico · 01.12.2004, 20:42

ja schreib mal ein ausführliches demo, weil ich krieg's nicht richtig hin. hab jetzt in den head-bereich als style type="text/css" das reingeschrieben:

PHP-Code:

  <style type="text/css">

* html #box {

    /* Dieser Kommentar hält den IE Mac draußen. \*/

    width: 12em;

    /* */

}

 #box {

    box-sizing:  content-box;

    -moz-box-sizing: content-box;

    width: 10em;

    padding: 1em;

}

</style>

klappt aber nicht. wie mach ich denn den leeren kommentar??

toscho · 01.12.2004, 21:31

Zitat:

Zitat von Calexico

klappt aber nicht. wie mach ich denn den leeren kommentar??

Code:

<! -- --><!DOCTYPE html>

Dann sollte es genau so gehen, wie ich beschrieben habe.

Gruß
Thomas

Calexico · 02.12.2004, 14:26

irgendwie geht's bei mir nicht:
ich hab das ganze so eingebaut:

PHP-Code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Timo in Grau</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

* html #box {

    /* Dieser Kommentar hält den IE Mac draußen. \*/

    width: 12em;

    /* */

}

 #box {

    box-sizing:  content-box;

    -moz-box-sizing: content-box;

    width: 10em;

    padding: 1em;

}

</style>

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
Fehler bei Übergabe von Variablen aus MySQL in Firefox	jensoweber	Datenbanken	0	13.07.2008 13:14
Firefox / IE - ungeahnte Statistik	pepe24	Off-Topic Diskussionen	10	30.04.2007 16:46
Firefox will mein 3-spaltiges Layout mit Footer nicht (CSS)!	vampsoftchef	HTML, Usability und Barrierefreiheit	1	28.02.2007 00:22
templates oder css mit firefox	rbs_phoenix	HTML, Usability und Barrierefreiheit	1	30.10.2006 15:24
[code]-Darstellung Firefox und Mozilla	Magic	Off-Topic Diskussionen	9	21.01.2006 01:15
[Erledigt] window.location.href mit firefox		HTML, Usability und Barrierefreiheit	15	18.11.2005 17:49
window.open mit firefox		HTML, Usability und Barrierefreiheit	3	14.11.2005 17:04
Problem mit Firefox	Diego1978	HTML, Usability und Barrierefreiheit	9	11.09.2005 21:17
[Erledigt] shiftKey bei Firefox abfragen		HTML, Usability und Barrierefreiheit	2	05.08.2005 15:08
Deer Park Alpha 1 (=Mozilla Firefox 1.1)		Off-Topic Diskussionen	15	09.07.2005 02:32
[Erledigt] verfluchter Firefox		HTML, Usability und Barrierefreiheit	5	08.07.2005 22:51
RGB im IE anders als im Firefox !	Cyberbob_at_tot	HTML, Usability und Barrierefreiheit	9	29.06.2005 17:47
[Erledigt] Script Interpretaion läuft falsch im Firefox		PHP-Fortgeschrittene	23	11.05.2005 19:01
FireFox :: php.net als Suchmaschine	Guradia	Off-Topic Diskussionen	14	07.12.2004 13:29
Browser FireFox --hast du das gewusst??		Off-Topic Diskussionen	11	23.09.2004 19:09

30.11.2004, 16:46
Calexico Erfahrener Benutzer Registriert seit: 08.11.2003 Beiträge: 139	Firefox hui, IE pfui!!?? Hejhej! Ich hab mit ner Page angefangen, dich ich mit jetzt zum ersten mal komplett mit css und layern gestalten will (also ohne Tabellen). Jetzt hab ich das ganze Design erstmal entworfen und im Firefox getestet. Sieht dort wunderbar aus!! So nun das ganze auf dem IE und was rauskommt ist der letzte Müll. Beim Firefox musste ich width-Angaben machen und dabei die breite der border abziehen, d.h. jeweils 2px. Beim IE brauche ich das anscheinend nicht zu machen, denn jetzt ist alles komplett verschoben nicht mehr breit genug etc. Außerdem scheint der IE Abstände rein zu machen zwischen 2 Layern, die er nicht machen soll!! Wie kann ich das ganze vielleicht so hinbekommen, dass es sowohl beim Firefox als auch beim IE so aussieht wie's soll?? DANKE! Calexico


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

30.11.2004, 16:57
Gast Beiträge: n/a	http://css4you.de/wslayout1/index.html also bei mir sieht das immer in beiden browsern gleich aus (naturtalent^^), deswegen kann ich dir außer dem link nichts empfehlen

30.11.2004, 17:20
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Das liegt am kaputten Box-Modell im IE. Der Firefox macht's so wie es das w3c vorschlägt der IE macht mal wieder irgendwas. Wenn du also mit festen Breietn arbeitest wirst du dich damit noch eine Weile rumschlagen müssen.... Such mal bei Google & Co. nach "Box-Model hack" (oder ähnlich). Es gibt da einige mehr oder weniger gute Ansätze um den Bug im IE zu umgehn. viel Glück dabei werbegeschenk __________________ Today you...Tomorrow me.

30.11.2004, 19:54
Gast Beiträge: n/a	Boah, das ist echt zum Haare ausreissen, das Problem hatte ich auch mal... habs dann aufgegeben :/ VIelleicht gibt mir der Thread hier wieder was Schwung.

30.11.2004, 21:42
fantast Erfahrener Benutzer Registriert seit: 14.01.2004 Beiträge: 2.543	ja, das sollte er. ich hab mich auch grade durch die selbe problematik gekaempft, aber wenn man lange genug probiert, haut das mehr oder weniger hin ie6 is uebrigens sauber, das problem is der ie 5(.5) zur not (aber nur wenns nich anders geht) schreibst du ne browserweiche... __________________ Was ist validität?

30.11.2004, 22:08
Calexico Erfahrener Benutzer Registriert seit: 08.11.2003 Beiträge: 139	ne, auf ne browserweiche hab ich keine lust..........und durch rumprobieren bin ich auch nicht weiter gekommen. ich weiß nur, dass das gleiche design mit tabellen in beiden browsern perfekt aussieht.....(

01.12.2004, 18:53
toscho Erfahrener Benutzer Registriert seit: 26.09.2004 Beiträge: 430	Um bei Opera, Safari, IE Mac und Mozilla das W3C-Boxmodel zu gewährleisten (auch im Quirksmodus), schreib: Code: #box { box-sizing: content-box; -moz-box-sizing: content-box; width: 10em; padding: 1em; } Den IE 6 versetzt du am besten auch in den Quirksmodus, damit er sich beim Boxmodel wie die früheren Versionen verhält. Einfach einen leeren Kommentar an den Anfang des HTML-Dokumentes setzen, dann ist das erledigt. Dann schreibst du eine Regel, die nur der IE Win liest: Code: * html #box { /* Dieser Kommentar hält den IE Mac draußen. \/ width: 12em; / */ } Ist doch ganz einfach. ;) Hmm … vielleicht sollte ich dazu mal ein ausführlicheres Demo schreiben … Gruß Thomas

01.12.2004, 20:42
Calexico Erfahrener Benutzer Registriert seit: 08.11.2003 Beiträge: 139	ja schreib mal ein ausführliches demo, weil ich krieg's nicht richtig hin. hab jetzt in den head-bereich als style type="text/css" das reingeschrieben: PHP-Code: `<style type="text/css"> * html #box { /* Dieser Kommentar hält den IE Mac draußen. \/ width: 12em; / */ } #box { box-sizing: content-box; -moz-box-sizing: content-box; width: 10em; padding: 1em; } </style>` klappt aber nicht. wie mach ich denn den leeren kommentar??

02.12.2004, 14:26
Calexico Erfahrener Benutzer Registriert seit: 08.11.2003 Beiträge: 139	irgendwie geht's bei mir nicht: ich hab das ganze so eingebaut: PHP-Code: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Timo in Grau</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> * html #box { /* Dieser Kommentar hält den IE Mac draußen. \/ width: 12em; / */ } #box { box-sizing: content-box; -moz-box-sizing: content-box; width: 10em; padding: 1em; } </style>`