FF zeigt es so an wie ich will, IE nicht

R

RemoteC

0
Hallo,

ich habe mich letztens ein wenig mit CSS gespielt. Nachdem ich wieder mal auf ZenGarden geschaut habe hat es einfach gekribbelt. Also habe ich zuerst mal in Photoshop ein Design fesgelegt und das dann mehr oder weniger als CSS "abgeschrieben". Hab besonders beim Ausrichten der Objekte usw. regelmäßig im Browser (Firefox) nachgeschaut wie das aussieht und ob das eh passt - und als ich es dann im IE geöffnet habe hat mich der Schlag getroffen. Habe ich das CSS so komplett falsch gemacht (Syntaxfehler), dass nur noch der FF damit klar kommt oder interpretiert der IE das 100% entgegengesetzt?

Hier mal der Link: Test123

Wie gesagt, ist nur ein Entwurf, aber ich finde bis auf das Logo (und natürlich den Content) ist mir das recht gute gelungen. Logo war ne 5-Minuten Sache in Photoshop, mehr wollte ich für diesen Dummy nicht investieren ^^

Kann mir jemand sagen wo das Problem liegt? Hat es überhaupt Sinn an diesem Design weiterzuarbeiten? Weil im IE sollte es schon halbwegs richtig angezeigt werden. Was mir vor allem wichtig war, dass (fast) egal welche Auflösung der User hat die Seite brauchbar ist. So kann man in meinen momentan Entwurf zB das Browserfenster recht klein schieben und am Design an sich ändert sich nicht viel.

Und zu guter letzt noch der direkte Link zum css screen.css

mfg

RemoteC
 
Verpasse dem ganzen erstmal einen vernünftigen DOCTYPE, dann kannst du weiter sehen.

Prinzipiell sieht's momentan doch gar nicht sooo schlecht im IE aus, der Inhaltsbereich ist ein bisschen verschoben und die Seite dafür breiter als benötigt, aber ansonsten schaut's doch verhältnismäßig normal aus.
 
Original von RemoteC
und als ich es dann im IE geöffnet habe hat mich der Schlag getroffen.
Zum Vergrößern anklicken....
Die Frage ist auch, welcher IE? 7 oder 6?
Falls 6, probiers mal im 7, und wenn es da passt, solltest du dir selbst die Frage stellen ob es sich für dich lohnt noch Optimierungen für den 6 vorzunehmen.
Bei einer privaten Seite könnte man das vielleicht vernachlässigen, unter dem Gesichtspunkt das es im Laufe der nahen Zukunft immer weniger IE6 User werden, schon alleine aus dem Grund, da der 7 über WU ausgeliefert wird, und somit zwangläufig der 6 innerhalb eines geringen Zeitraums von der Bildfläche verschwinden wird.

Falls es im 7 nicht passt, würde ich auf Fehler im CSS tippen. Da könntest du das mal im Opera gegenprüfen, denn der ist was CSS angeht wesentlich genauer als z.B. Firefox und eignet sich deshalb gut zum Testen.
 
da läufts mir kalt den rücken runter wenn ich mir dein source-code ansehe^^
(bitte net falsch verstehen, erklärung folgt :))

div tags sind der größte schrott... es gibt nur fehler mit den teilen...

ich hatte ein ähnliches problem auf unserer community-seite mit den teilen, da wurde der text einfach mitten in ein bild gepackt, anstatt darunter...

ich geb dir n tipp... nutz anständige tabellen, und keine div's :)
 
Original von keksinat0r
div tags sind der größte schrott... es gibt nur fehler mit den teilen...

...

ich geb dir n tipp... nutz anständige tabellen, und keine div's :)
Zum Vergrößern anklicken....
Das kann nicht dein Ernst sein. Du scheinst keine Ahnung von Webdesign zu haben.
 
Original von keksinat0r
div tags sind der größte schrott... es gibt nur fehler mit den teilen...

ich hatte ein ähnliches problem auf unserer community-seite mit den teilen, da wurde der text einfach mitten in ein bild gepackt, anstatt darunter...

ich geb dir n tipp... nutz anständige tabellen, und keine div's :)
Zum Vergrößern anklicken....

Ist das Ironie oder hast du nur einfach keinen Schimmer?
 
Original von Mackz
Original von keksinat0r
div tags sind der größte schrott... es gibt nur fehler mit den teilen...
...
ich geb dir n tipp... nutz anständige tabellen, und keine div's :)
Zum Vergrößern anklicken....
Das kann nicht dein Ernst sein. Du scheinst keine Ahnung von Webdesign zu haben.
Zum Vergrößern anklicken....

*grmpf* jetzt werd ich schon wieder als totaler noob hingestellt, nur weil ich eine andere meinung hab...

erst mal... ich hab ahnung von webdesign... zwar schwerpunkt php und mysql, doch von (x)html und css versteh ich logischerweise auch etwas...

-> div-tags sind lediglich simulierte tabellen

ich verstehe den zweck der div tags auf seiner seite net!?
hintergrundgrafiken kann man auch in echte tabellen einbauen...
 
#logo
{
background-image:url(../images/remo_logo.gif);
background-repeat:no-repeat;
margin:auto;
position:relative;
top:-70px;
right:-40%;
width:298px;
height:112px;
overflow:visible;
z-index:2;
}

right:-40%;
Glaube mich zu erinnern, dass IE dort mit prozentualen Angaben
Schwierigkeiten hatte (hat?). Wirkte sich auf die gesamte Breite aus
soweit ich mich erinnere.
Habe jetzt auf die schnelle aber keinen Link dazu bereit.

Gruss
 
Original von keksinat0r
*grmpf* jetzt werd ich schon wieder als totaler noob hingestellt, nur weil ich eine andere meinung hab...
Zum Vergrößern anklicken....
Könntest du die Meinung schlüssig begründen und auf eine auf Fakten begründete Basis stellen, dann könnte man darüber diskutieren. "DIVs sind Sch*****, weil isso" ist keine solche Argumentation.

ich hab ahnung von webdesign... zwar schwerpunkt php und mysql
Zum Vergrößern anklicken....
PHP und MySQL hat nichts mit Webdesign zu tun.

doch von (x)html und css versteh ich logischerweise auch etwas...
Zum Vergrößern anklicken....
So logisch ist das nicht, und mit der Aussage "div-tags sind lediglich simulierte tabellen" hast du dir auch gleich selbst widersprochen. DIVs sind kontextfreie Container zur Gruppierung von Elementen und als solche geeignet für Layouting. Tabellen hingegen sind Strukturen mit Zeilen und Spalten, um tabellarische Daten darzustellen. Setze dich mal mit den Spezifikationen des W3Cs auseinander, dann sollte dir der Unterschied auch recht schnell auffallen.

Und nur weil du nicht in der Lage dazu bist, ein stabiles Layout mit DIVs und CSS aufzustellen, heißt das noch nicht, dass das Konzept gescheitert ist. Vielleicht liegt es eher daran, dass du dir die Mühe nicht machst, dich damit auseinanderzusetzen, weil Tabellen ja so schön einfach sind. :)
 
... ich reg mich net auf... ich bleib ganz ruhig...
öhm... joa....

zu den div's:
was ist bitteschön der unterschied zwischen simulierten tabellen und containern?

zur seite:
ich kann dir die gleiche seite, mit den gleichen features, mithilfe von tabellen bauen, die garantiert in jedem halbwegs anständigen browser fehlerfrei dargestellt wird...

informier du dich mal über div-tags, du wirst massig material finden in dem steht dass div's (ich vergleiche sie gern mit php's magic_quotes) einfach nur probleme verursachen, da sie von jedem browser aus welchen gründen auch immer anders dargestellt werden, bzw bei bestimmten bedingungen verrückt spielen und das layout zerstören...

nicht so bei tabellen... <table width="100%" background="xyz"...> was spricht dagegen?

beide "funktionen" (auf die " achten bevor sich wieder einer beschwert) können genauso mit anderen mitteln bewältigt werden, die diese probleme nicht hervorrufen...


zu mir und webdesign:
wie soll ich komplette seiten erstellen wenn ich keine ahnung von html hab?

und ob ich in der lage dazu bin das zu tun oder nicht, kannst du ja wohl kaum beurteilen...
ich sag nur: "warum etwas neues und möglicherweise (sogar bestimmt) verbuggtes verwenden nur weil es existiert, anstatt etwas alt-bewährtes von dem man weis dass es funktioniert!"
 
Ein paar Vorteile von Divs gegenüber Tabellen.
1. Trennung von Inhalt und Design
2. Keine Zweckentfremdung von Tabellen
3. Weitaus übersichtlicherer Code
4. Semantischer Aufbau
5. Leichtere Änderung/Korrektur von Code und Design.
"warum etwas neues und möglicherweise (sogar bestimmt) verbuggtes verwenden nur weil es existiert, anstatt etwas alt-bewährtes von dem man weis dass es funktioniert!"
Zum Vergrößern anklicken....
Vielleicht deshalb, weil es ein weitaus besserer Ansatz ist als dieses Table-Gepfusche.
Original von keksinat0r
... ich reg mich net auf... ich bleib ganz ruhig...
öhm... joa....

zu den div's:
was ist bitteschön der unterschied zwischen simulierten tabellen und containern?
Zum Vergrößern anklicken....
DIVs sind _keine_ simulierten Tabellen. Ein Tabelle ist eine Darstellung von Daten in Form von Reihen und Spalten und die typische Anordnung der Elemente von Webseiten ist _nicht_ tabellenförmig.
Divs sind genau dafür gedacht, die Bestandteile von Webseiten entsprechend zu unterteilen, Tabellen jedoch nicht.
 
Mir als Enduser ist es doch völlig egal, wie der Designer/Programmierer der Webseite die bunten Bilder auf die Seite bringt, so lange es mich nicht stört oder behindert. Mir(als Enduser) ist es auch egal wie viel Aufwand der Designer/Programmierer damit hat. Hauptsache es gefällt mir.

Ich als Programmierer/Designer meiner eigenen Page hab mich für Divs entschieden und bis jetzt für alles eine lösung gefunden. :)

Der mir bis heute einzige Grund für den verzicht auf Tabellen sind die Benutzbarkeit für Sehbehinderte Leute, die sich das vorlesen lassen. ?( Ob nun Tabellen oder Divs ist für mich eine Glaubensfrage wie Linux vs. Wondows und FF gegen IE. ;)

MfG
freak
 
macht ihr doch was ihr wollt...

ich bleib weiterhin bei tabellen, die werden zu 100% in jedem vernünftigen browser richtig dargestellt, und lassen sich ebenfalls sehr leicht bearbeiten, vorausgesetzt man hat das layout vernünftig aufgebaut...

in sachen übersichtlichkeit... das argument kann ich überhaupt nicht nachvollziehen... tr und td geben doch an ob es eine spalte oder zeile ist, was will man mehr? da find ich div's wesentlich unübersichtlicher...

aber jedem das seine


eine typische seite ist also nicht tabellarisch aufgebaut...
hmmm... logisch...
oben der header, links die navi und daneben der inhalt...
entspricht ja keineswegs einem tabellarischen aufbau :rolleyes:
 
@ keksinat0r:

LOL ist schon klar, LX hat keine Ahnung von Webdesign, ist ja auch nicht sein Beruf...

Ich an deiner Stelle würde mir mal LX' Homepage anschauen, die ist schlicht aber stylish (trotz <DIV>-Tags afair ;)) und der Quelltext ist gut leserlich!

Man _kann_ es auch mit Tabellen machen, _sollte_ es aber nicht so machen da es "bad practice" ist, wie man so schön sagt.

Wenn du eine Tabelle mit einer Zeile und einer Spalte hast kommt das einem Container schon ziemlich nah. Primär sind Tabellen aber dazu da mehrere Spalten darzustellen.

Zum Thema Übersichtlichkeit: Bei Tabellen werden Elemente die im Browser nebeneinander angezeigt werden im Source untereinander geschrieben. Damit ist die Unübersichtlichkeit proportional zum Volume des Quelltextes ;)
 
Original von keksinat0r
ich kann dir die gleiche seite, mit den gleichen features, mithilfe von tabellen bauen, die garantiert in jedem halbwegs anständigen browser fehlerfrei dargestellt wird...
Zum Vergrößern anklicken....
Ich habe nichts gegenteiliges behauptet. Im Gegenteil, Tabellen sind einfach, jeder kommt damit klar, weil jeder weiß, wie ungefähr eine Tabelle aufgebaut ist. Dennoch ist es Zweckentfremdung, denn eine Webseite ist nicht tabellarisch aufgebaut. "Tabellarisch" bedeutet, dass etwas im gleichen Kontext steht - stell's dir wie eine Datenbanktabelle vor. Jede Zeile enthält einen Datensatz, jede Spalte Werte gleicher Kategorie in den Datensätzen. Und alle Datensätze verbindet, dass sie die gleiche Struktur aufweisen.

Eine Webseite hat aber nichts tabellarisches, du verwechselst "Tabelle" mit "Layout".


div's (ich vergleiche sie gern mit php's magic_quotes)
Zum Vergrößern anklicken....
Bitte WAS?

und ob ich in der lage dazu bin das zu tun oder nicht, kannst du ja wohl kaum beurteilen...
Zum Vergrößern anklicken....
Deinen Aussagen dazu, dass DIVs "total verbuggt" seien und in jedem Browser anders dargestellt werden, entnehme ich, dass du nicht dazu in der Lage bist. Möchtest du dir da widersprechen? :)

Übrigens habe ich lange genug auch mit Tabellen gearbeitet. Dabei kommt man aber nur vom hundersten ins tausendste. Hier fehlt noch was... klar, ich klatsche noch eine Tabelle in eine Zelle rein. Der Schachtelung sind keine Grenzen gesetzt, aber wehe dem armen Schwein, was da dann durchkramen muss, den fehlenden schließenden Tag suchen darf, der in Browser A die Seite zerhaut, von Browser B aber hinzugedacht wird, weil man auch den übelsten Code noch darstellbar machen möchte. Und stell dir mal vor, da fällt dem Seitenbetreiber mal ein, dass er seine Seite umgestalten könnte (etwas mehr als nur Linkfarben zu ändern). Dann darfst du den ganzen Tabellenverhau auseinanderpflücken und neu schachteln...

DIVs haben eine definitiv längere Lernkurve, da man die Eigenheiten der unterschiedlichen Browser (bzw. eigentlich hauptsächlich IE *g) erstmal kennen lernen muss. Aber wenn man sich einmal dran gewöhnt hat, dann kennt man seine Pappenheimer und kommt dennoch damit klar. Von solchen Punkten wie W3C-Konformität, schlankerem Code und Barrierefreiheit fange ich gar nicht erst an...
 
Original von LX
Bitte WAS?
Zum Vergrößern anklicken....
fertig lesen und verstehen...

Original von LXDeinen Aussagen dazu, dass DIVs "total verbuggt" seien und in jedem Browser anders dargestellt werden, entnehme ich, dass du nicht dazu in der Lage bist. Möchtest du dir da widersprechen? :)
Zum Vergrößern anklicken....
lies deinen eigenen text weiter unten... stichwort ie...

Original von LX
Übrigens habe ich lange genug auch mit Tabellen gearbeitet. Dabei kommt man aber nur vom hundersten ins tausendste. Hier fehlt noch was... klar, ich klatsche noch eine Tabelle in eine Zelle rein. Der Schachtelung sind keine Grenzen gesetzt, aber wehe dem armen Schwein, was da dann durchkramen muss, den fehlenden schließenden Tag suchen darf, der in Browser A die Seite zerhaut, von Browser B aber hinzugedacht wird, weil man auch den übelsten Code noch darstellbar machen möchte. Und stell dir mal vor, da fällt dem Seitenbetreiber mal ein, dass er seine Seite umgestalten könnte (etwas mehr als nur Linkfarben zu ändern). Dann darfst du den ganzen Tabellenverhau auseinanderpflücken und neu schachteln...
Zum Vergrößern anklicken....
die lösung heißt organisation...
eine durchschnittliche hp besteht aus 3,4 oder 5 zellen, ein header, ein footer, eine oder zwei navibars und einen content-bereich
diese zellen werden in der master-tabelle angelegt und ab hier werden andere dateien eingebunden...
vorteile:
- übersichtlicher
- leichter zu bearbeiten, da jeder zelleninhalt eine eigene datei besitzt
- wenn das layout geändert werden soll muss NUR die index bearbeitet werden
- fehlersuche einfacher, da beim debuggen net das gesamte script durchlaufen werden muss

wenn du grundsätzlich alles in eine datei packst und 2000 geschachtelte tabellen baust, dann hast DU keine ahnung von tabellen-organisation, und net ich...

und wen gehen meine quellcodes etwas an?
die tags könnten auch alle hintereinander in einer zeile stehen und der browser würds trotzdem verstehen...


Original von LX
DIVs haben eine definitiv längere Lernkurve, da man die Eigenheiten der unterschiedlichen Browser (bzw. eigentlich hauptsächlich IE *g) erstmal kennen lernen muss. Aber wenn man sich einmal dran gewöhnt hat, dann kennt man seine Pappenheimer und kommt dennoch damit klar. Von solchen Punkten wie W3C-Konformität, schlankerem Code und Barrierefreiheit fange ich gar nicht erst an...
Zum Vergrößern anklicken....
barrierefreiheit? wo liegt da der unterschied zwischen <table> und <div> ?!
schlankerer code mag sein, doch tabellen werden zu 100% von jedem browser korrekt dargestellt!
 
Ohne deine sonstigen Ergüsse zu kommentieren:

Original von keksinat0r
barrierefreiheit? wo liegt da der unterschied zwischen <table> und <div> ?!
schlankerer code mag sein, doch tabellen werden zu 100% von jedem browser korrekt dargestellt!
Zum Vergrößern anklicken....

Du weißt nicht, was Barrierefreiheit bedeutet, oder? Screenreader haben sehr wohl Probleme mit Tabellenlayouts.

Dieter Nu*hust*
 
Original von end4win
zurück zum Thema ;(
mach mal float:left bei # navoben raus

Gruss
Zum Vergrößern anklicken....
Dann ist das Design schon im FF verschoben :rolleyes:
Wenn ich das mache wandert das "Inhalt"-div um ~75px hinunter, sprich ist nicht mehr schön anschließend mit dem #navoben und schaut unten schon über die bg-Grafik hinaus.

Um nochmal zu erklären warum ich mich für Divs entschieden habe: Die Seite soll einfach zu warten sein und das Design eindeutig vom Inhalt getrennt sein. Ich besuche u.A. das Freifach "Homepage" in dem wir die Schulwebsite betreuen. Diese Seite ist schon relativ alt und zu 99,99999999% mit Frontpage in der Design-Ansicht erstellt worden - und genau so schaut auch der "Quellcode" aus. Ich habe letztens eine Viertel Stunde gebraucht um zu checken, dass ein Text nicht durch ein div, eine Tabelle oder was auch immer nach rechts begrenzt wird, sondern dadurch, dass alle ~ 10 Wörter ein break ist :rolleyes: Und genau sowas will ich mir ersparen (von den font-, span-, ... tags ganz zu schweigen). Kann sich ja jeder selber ein Bild von diesem "Quellcode" machen: www.ibc.ac.at - das mit den breaks findet man u.A auf dieser Seite

Außerdem habe ich diese Seite auch als Übung erstellt, weil ich mich mehr mit CSS beschäftigen will. Wenn ich zB ein Design für unsere Klassenhompage (Joomla) erstellen will, das einzigartig ist, sollte ich auch CSS ziemlich gut beherrschen. Bei einem CMS ist es wohl absolute Priorität Design von Inhalt zu trennen.

Und nochmal zu den Tabellen und dem Design so wie ich es momentan habe: Wie könnte ich zB das Logo mit einem z-index machen mit Tabellen? Mir ist nicht bekannt, dass man ohne weiteres einer einzigen Zelle einen anderen z-index gibt damit sie sich überlappt - mit divs ist das eben möglich.

Wenn ich mir zum Üben eine Website erstelle, dann soll die wenigstens funktionieren und einem möglichst breitem Publikum zugänglich sein. Da gehört auch Barrierefreiheit dazu, ich habe auch schon einen Vortrag von einem W3C-Mitglied gelauscht wo es um Barrierefreiheit ging und was für Fehler häufig gemacht werden: Frames, falsche header-nr. und auch Tabellen fürs Design. Woher soll der Screenreader wissen, dass die Zelle diagonal rechts drunter die ist wo der Content weitergeht? Kann ja genausogut einfach die nächste sein, oder die drunter ...

mfg

RemoteC

PS: habs bis jetzt nur mit IE 6 angeschaut, 7er habe ich nicht ...
 
@RemoteC:
Also habe ich zuerst mal
in Photoshop ein Design fesgelegt und das dann mehr
oder weniger als CSS "abgeschrieben".
Zum Vergrößern anklicken....
Das Design im Photoshop festlegen ist ja in ordnung aber css abzuschreiben macht keinen Sinn. Photoshop kann zwar direkt internetseiten erstellen aber in der regel wirds von den meisten nur genutzt um das layout festzulegen und net mehr.

@RemoteC:
So kann man in meinen momentan Entwurf zB das Browserfenster
recht klein schieben und am Design an sich ändert sich nicht viel.
Zum Vergrößern anklicken....
Wenn du den Entwurf im Photoshop meinst dann ist das kein wunder. Photoshop ist halt eigentlich nur ein Grafikprogramm und daher ändert sich das Design nicht bei der Größenänderung.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben