Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt.

MichaL · 2011-06-17T18:33:47.000Z

Hallo,

ich habe ein Problem beim Einbinden der Karte in eine Homepage. Die Karte selbst, als auch die darauf enthaltenen Elemente sind z.T. um ca. 10px verschoben. Es sieht so aus, als ob eine meiner CSS-Eigenschaften nicht durch die beim Einbinden der Karte geladenen Eigenschaften überschrieben wird. Leider habe ich bisher nicht herausfinden können, wo das Problem liegt.

Neben der Verschiebung, die auch auf allen “linken” Marker-Sprechblasen und dem Layermenü zu sehen ist, wird die ZoomBar auch falsch dargestellt. ZoomBar und Layermenü könne ich zur Not abstellen. Die Verschiebung der Karte selbst könnte ich mit -10px auch korrigieren aber die Sprechblasen bleiben an der falschen Stelle (oder die Marker selbst sind falsch).

Ich habe mal eine Beispielseite hochgeladen.

Ich hoffe, Ihr könnte das Problem nachvollziehen und mit Tipps geben, was ich noch probieren könnte, um die Verschiebung weg zu bekommen.

Besten Dank
Micha

(URL entfernt, da nicht mehr benötigt)

maxbe · 2011-06-17T18:50:07.000Z

Hi MichaL

MichaL:

Es sieht so aus, als ob eine meiner CSS-Eigenschaften nicht durch die beim Einbinden der Karte geladenen Eigenschaften überschrieben wird. Leider habe ich bisher nicht herausfinden können, wo das Problem liegt.

Mein Firebug sagt mir, dass Du

#content .article div {padding-left: 10px;padding-right: 10px;}

aus der style.css Zeile 179 weitervererbst bis zur Karte. Wenn ich das ausschalte, wirken Zoombar und Menü recht hübsch. Ich würde es für #usermap einfach nochmal auf 0 setzen.

Grüße, Max

MichaL · 2011-06-17T18:56:57.000Z

Hallo Max,

vielen Dank für Deine schnelle Hilfe.

Ich würde es für #usermap einfach nochmal auf 0 setzen.

Ich habe padding (und margin) auf Null für diese ID


#usermap {
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0;
    /*
    position: relative;
    left: -10px; */
}

Laut Dragonfly wird eine weitere CSS-Klasse hinzugefügt (olMap), wo diese Eigenschaften auch explizit gesetzt werden:


div.olMap { 
cursor: default;
margin-bottom: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
z-index: 0;
 }

Ich könnte, ohne das ich die Tragweite abschätzen kann im Moment, direkt das folgende DIV ansprechen via

#content .article > div

Das würde aber nur die Symptome bekämpfen und nicht die wirkliche Ursache.

Warum wird sie nicht berücksichtigt?

Gruß Micha

maxbe · 2011-06-17T20:22:25.000Z

So richtig schlau werd ich auch nicht draus, aber es scheint, dass “#content .article div” bei der Beurteilung der Spezifität deiner divs einfach höher eingestuft wird als ein schlichtes “#usermap”.

Vergiss mal die Karte, gib eine Textfarbe für “#content .article div”, “#usermap” und “##mapwrapper div” vor und schreib ein paar Zeilen in die divs. Bei mir gewinnt da immer die Farbe für “#content .article div”.

Edit:

Nach dieser Tabelle komm ich für Dein CSS auf diese Wertigkeiten:

“#content .article div” = 1 Id, 1 Klasse, 1 Element = 0111
“#usermap” = 1 Id = 0100
“#mapwrapper div” = 1 Id, 1 Element = 0101

Die CSS-Eigenschaften werden also in der Reihenfolge “#usermap” → “#mapwrapper div” → “#content .article div” verwendet und der letzte gewinnt.

MichaL · 2011-06-17T23:24:22.000Z

Hallo Max,

wow, darauf wäre ich nicht gekommen. Ich war bisher immer der Meinung, dass eine ID eine Klasse schlägt, da sie ja eindeutig ist. Das dem hier nicht so ist, habe ich so noch nicht bewusst bemerkt. Deine Aufschlüsslung bringt mich aber zu folgender trivialen Lösung:

#content .article div#mapwrapper {}
#content .article div#mapwrapper div{}
#content .article div#mapwrapper div#usermap { }

(Natürlich mit Inhalt)

Ich verfeinere einfach die Beschreibung, sodass sie in der Wertigkeit steigen und schon ist die Karte zentriert.

Vielen Dank für Deine schnelle Hilfestellung!

beste Grüße
Micha