HILFE bei HTML/CSS Browserkompatibilität

Hallo Zusammen,
Ich habe ein Menü in einer Tabelle erstellt… wenn ich zwischen den Menüpunkten wähle erscheint eine neue Karte von Deutschland. (Alles rein HTML und CSS basiert).

hier könnt ihr es angucken:
http://www.outofnorm.eu/Tours_neu_22032013/html/Germ…

Die Bereiche der Karte sind mit der Maus auswählbar (habe in das HTML ein kleines Skript beschrieben - mit Koordinaten etc.)

Zunächst habe ich die Karte erstellt - diese hat gut funktioniert … und habe sie anschließend in mein Layout eingefügt. Damit die Karte und die dazu gewählten Koordinaten auch konkruent sind mußte ich bei Positionierung:relative wählen.

PROBLEM jetzt: diese Seite funktioniert super auf Opera, Firefox und google chrome… bei Internet Explorer landet mein Bild im oberen linken Eck!!! ;(

Außerdem (das Problem ist mir auch bei anderen Homepages schon aufgefallen): wenn der aktive Teil sich unterhalb des Sichtbereiches ausweitet - springt der aktive Teil nach links (sieht man - wenn man von Germany aus auf Cities klickt - dann springt das Fenster).

Woran liegt das??? gibt es einen Trick? Was habe ich falsch gemacht???

Wäre Euch unsäglich dankbar, wenn ihr eine Lösung für dieses Problem parat habt!!!

VG Stefanie

ich glaub dein problem liegt daran, dass du dem bild deine position zuweist und nicht dem layer

würde mal dort ansetzen

und deine navi springt, da du im hover einen border drinnen hast, gib den border auch in den anderen zuständen rein und die navi wird nimmer springen

lg
barbara

Vielen lieben Dank,

ich glaub dein problem liegt daran, dass du dem bild deine
position zuweist und nicht dem layer

würde mal dort ansetzen

ich versuch´s mal…

und deine navi springt, da du im hover einen border drinnen
hast, gib den border auch in den anderen zuständen rein und
die navi wird nimmer springen

stimmt … ist mir noch gar nicht aufgefallen,…
Aber eigentlich meinte ich was anderes… aber vermutlich sieht das auf jedem Bildschirm anders aus. Wenn der Inhalt der Seite umfangreich ist und man quasi nach unten scrollen muß… dann die „Containerbox“ leicht nach links verschoben. Mit wenig Inhalt, so daß es leicht auf den Screen paßt, ist das Layout nach Rechts verschoben.
Aber das ist vielleicht auch nicht so tragisch… das habe ich auch bei anderen schon gesehen… frag mich nur … woher das kommt???

lg
Steffi

Bei längeren Inhalten wird vom Browser eine Scrolleiste angezeigt. Daher springt je nach Browser das Grundlayout beim Seitenwechsel. Das kann man mit CSS ändern, indem man z. B. immer eine Scrolleiste einfügt.

html {
overflow-y: scroll;
}

1 Like

SUPER DAS IST DIE Lösung!!!

html {
overflow-y: scroll;
}

vielen lieben Dank, würde Dir am liebsten 1000 Sterne geben…

hast Du vielleicht noch eine Lösung parat für das Positionierungsproblem. Habe versucht nach der Anleitung von Barbara das Problem zu beseitigen (habe die Positionierung an ein Div gebunden… und da die maps reingelegt…) hat aber auch nix genützt.

VG STeffi

Hi,

wenn du die Positionierung des übergeordnete Elements auch änderst, sollte es gehen. Denn das spielt bei der absoluten Ausrichtung von Elementen eine Rolle. Setze also deinen Container mit der id „contents“ z. B. auf
position:relative;

Außerdem würde ich empfehlen den gewählten Doctype noch einmal zu überdenken und den Code aufzuräumen. Der gewählte Doctype oder nicht sauberer HTML Code können auch zu ungewünschten Darstellungen in Browsern führen. Man muss aber sagen, dass die meisten Browser das immer ganz gut hinbekommen - selbst wenn man eine Doctype Angabe macht und der Code Fehler enthält.

Hier findest du etwas Hintergrundwissen dazu:
http://www.mediaevent.de/xhtml/doctype.html

Hier eine Möglichkeit seinen HTML Code online validieren zu lassen:
http://validator.w3.org/check

1 Like

Moin,

Ich habe ein Menü in einer Tabelle erstellt…

Das liest sich, als hättest Du noch nicht verstanden, wozu Du HTML benutzen musst. HTML ist für die Semantik. Ein Menü in eine Tabelle zu packen, ist definitiv nicht die richtige Semantik.

Mach Dich mal schlau. Wenn Du noch am Anfang stehst, ist es noch nicht zu spät. Wenn Du Dich schon als Fortgeschrittenen betrachtest, dann wirst Du in der Hinsicht vermutlich noch viele Probleme bekommen, die Dich viel Zeit kosten werden.

Liebe Grüße,
-Efchen

Moin,

Hallo Efchen,

Ich habe ein Menü in einer Tabelle erstellt…

Das liest sich, als hättest Du noch nicht verstanden, wozu Du
HTML benutzen musst. HTML ist für die Semantik. Ein Menü in
eine Tabelle zu packen, ist definitiv nicht die richtige
Semantik.

Guck Dir die Seite mal an… es ist kein normales menü - und eine eher ungewöhnliche Seite… Meine Menünavigation befindet sich nicht in einer Tabelle.

Und diese Navigation hab ich deshalb nur da reingepackt… weil ich mir nicht mehr anders zu helfen wußte.

Mach Dich mal schlau. Wenn Du noch am Anfang stehst, ist es
noch nicht zu spät. Wenn Du Dich schon als Fortgeschrittenen
betrachtest, dann wirst Du in der Hinsicht vermutlich noch
viele Probleme bekommen, die Dich viel Zeit kosten werden.

ja… ich bin noch Anfänger… hab ja erst vor ein paar Monaten so nebenbei damit angefangen… hab auch niemanden, der mir was dazu erklären kann. Deshalb gilt für mich „learning by doing“ und zum Glück gibt´s ja Foren. Aber ob ich mir das RICHTIG beibringe ist eher fraglich…

Allerdings - wenn ich mir so manch andere Pages angucke - dann kann ich inzwischen auch schon erkennen - was gepfuscht ist - und was nicht :wink:
Bei mir dauert halt alles a bißl länger… bin auch manchmal ein bißchen schwer von Begriff… aber dafür sitzt es anschließend… brauch nur den notwendigen Input…

lg Steffi

Liebe Grüße,
-Efchen

Moin,

es ist kein normales menü

Was meinst Du? Auf der Seite sind zwei Menüs, beides gewöhnliche Menüs, nämlich Listen von Links. Die sind auch richtig ausgezeichnet.
Was verstehst Du unter einem „ungewöhnlichen“ Menü? Ich kann mir da gerade nichts drunter vorstellen - wie die aussehen sollen, ist ja nicht relevant.

und eine eher ungewöhnliche Seite…

Echt? Ich habe den Link aus Deinem OP angeklickt. Was ist daran ungewöhnlich?

Meine Menünavigation befindet
sich nicht in einer Tabelle.

Stimmt. Dafür hast Du die ganze Seite in eine Tabelle gefasst, was genauso falsch, überflüssig und nicht mit dem Sinn von HTML vereinbar ist.

Und diese Navigation hab ich deshalb nur da reingepackt…
weil ich mir nicht mehr anders zu helfen wußte.

Wie gesagt, die zwei Menüs, die ich sehe, sind richtig als Liste ausgezeichnet. Lediglich das div um die Liste rum ist überflüssig, so als würdest Du Geschenke zweimal einwickeln. Da wird div-Suppe gekocht, das Verständnis von HTML verbessert sich nicht, wenn man solche Konstrukte bastelt. Bedenke, dass ein div eine logische Gruppe auszeichnet und ein einzelnes Element keine Gruppe ist.

ja… ich bin noch Anfänger… hab ja erst vor ein paar
Monaten so nebenbei damit angefangen… hab auch niemanden,
der mir was dazu erklären kann.

Ich glaub, ich hab in die Richtung jetzt schon viel gesagt und ich habe auch gemerkt, dass ich Dir schon in mehreren Threads was dazu gesagt habe, aber bisher hats wohl noch nicht so recht gefruchtet.

Wie können wir da weiter machen, damit das richtig hängen bleibt?
Meiner Meinung nach auf die einfachste Weise: Abreißen, neu machen, mit dem Inhalt anfangen, dann mit HTML auszeichnen und erst, wenn die Semantik stimmt, CSS darauf aufbauen.

Denn Monate muss man sich damit nicht beschäftigen, das heißt dann nur, dass Du aus Quellen lernst, die selber keine Ahnung von HTML haben. Der Sinn ist so derart simpel, dass zugegebenermaßen viele daran verzweifeln. Der Rest ist Tags lernen, und da es (zumindest in HTML 4) noch nicht so viele davon gibt, ist auch das eine überschaubare Aufgabe.
Damit will ich übrigens nicht Deine bisherigen Bemühungen runterspielen oder zeigen, wie toll ich doch bin, sondern ich will damit zeigen, dass HTML keine versteckten Schwierigkeiten bietet, sondern dass man den Sinn auch als Kind tatsächlich in einer halben Stunde verstanden haben kann und die Tags bei regelmäßigem Üben in ein paar Tagen alle drauf hat.
Immer vorausgesetzt, dass man den Sinn und die Trennung von Inhalt und Layout verstanden hat :smile:

Deshalb gilt für mich
„learning by doing“ und zum Glück gibt´s ja Foren. Aber ob ich
mir das RICHTIG beibringe ist eher fraglich…

Ja, das bestätigt der Code der verlinkten Seite.

Bei mir dauert halt alles a bißl länger… bin auch manchmal
ein bißchen schwer von Begriff… aber dafür sitzt es
anschließend… brauch nur den notwendigen Input…

Okay, Du weißt also, was man bei HTML unter „Semantik“ versteht?
Du weißt, was „Trennung von Inhalt und Layout“ ganz streng genommen bedeutet?

Du weißt also, warum die Tabelle aus der Seite unbedingt raus muss?
Warum das div um ein einzelnes ul überflüssig ist?
Und welche CSS-Eigenschaften man auf welche Tags anwenden kann?

Wenn ja, dann bist Du auf dem richtigen Weg :smile:
Wenn nein, erkläre ich es Dir gerne.

Verkehrt finde ich den o.a. Weg aber nicht, zuerst Inhalt, dann HTML, dann CSS. Und alles strikt voneinander trennen. Dann versteht man den Sinn des Ganzen besser, als wenn man mit dem Layout oder Design anfängt. Denn dann verstrickt man sich gerne mal oder verwendet das „magische“ div, obwohl das streng genommen da gar nicht hin gehört.

Deine Chance. :smile:
Ergreife sie…

Liebe Grüße,
-Efchen