Zur Navigation

Firefox ignoriert margin-top

1 Birgit (Gast)

Hallo Jörg,

beim Gestalten von Buttons mit Links, die ich ganz oben rechts auf meiner Webseite anzeigen lassen wollte, habe ich festgestellt, dass die Buttons im Firefox nach unten verrutschen und so mein Template zerstören.

<div class="social_buttons">
<a......" /></a>
</div>

Hier meine css:
.social_buttons {
position: absolute;
margin-top: 0;
width: 250px;
right: 0;
display: block;
vertical-align:middle;
line-height: 50px;
}

Mit dem Internet-Explorer habe ich das Problem nicht.

Was kann/muss ich dazu tun, damit es mit dem Firefox auch richtig angezeigt wird?

Gruß
Birgit

20.11.2013 19:34

2 Birgit (Gast)

Hallo Jörg,

wollte hierzu noch was ergänzen, dass das Problem auch beim Internet-Explorer auftaucht, kommt hier auf die Version nämlich an, habe dies nämlich gerade beim Testen an einem anderen PC festgestellt.

Hoffe auf Hilfe und Info dazu. Danke im voraus.

Gruß
Birgit

20.11.2013 20:07

3 Jörg

Um welche Versionen des Internet Explorers handelt es sich denn?

Bei älteren Versionen des Internet Explorers ist auch die Doctype-Angabe in der ersten Zeile wichtig, weil dadurch bestimmt wird, in welchem Modus der IE die Seite anzeigt

Die beiden Code-Abschnitte sind wahrscheinlich nicht ausreichend, um das Problem nachzustellen. Kannst du eine Demo-Seite verlinken oder den Code so weit vervollständigen, dass mit diesem das Problem reproduzierbar ist?

20.11.2013 20:24 | geändert: 20.11.2013 20:24

4 Birgit (Gast)

Hallo Jörg,

leider kann ich keinen Link senden, da ich immer die Seite vorher über meinen Demoshop teste, ich habe einen Screenshot gemacht.

Im Internet Explorer 10 nimmt er die Daten von der CSS und so sieht es aus:
http://www.bilder-upload.eu/show.php?file=a93335-1384978651.jpg

Und so sieht es im Mozilla Firefox und Internet Explorer 8 aus (da rutsch es direkt nach unten):
http://www.bilder-upload.eu/show.php?file=cb571e-1384978849.jpg

Ich hoffe, dass mit den Screenshots das Problem ersichtlich ist.

Gruß
Birgit

20.11.2013 21:25

5 Jörg

Was für eine Doctype-Angabe verwendest du denn?

Ist im IE8 oder im IE10 die Kompatibilitätsansicht aktiviert?

Mit den Screenshots sieht man zwar die unterschiedliche Ansicht - um das Problem analysieren zu können, braucht es aber zumindest soweit den Code, dass man diese Fehl-Anzeige damit nachstellen kann.

20.11.2013 21:46

6 Birgit (Gast)

Hallo Jörg,

<!DOCTYPE html>

IM IE10 ist die Kompatibilätsansicht aktiviert.

20.11.2013 22:25

7 Jörg

IM IE10 ist die Kompatibilätsansicht aktiviert.

Ja, genau das ist die Ursache des Problems. Die Kompatibilätsansicht ist nur dazu da, Seiten mit veraltetem Code korrekt anzuzeigen. Bei Seiten mit validem HTML 5 führt diese dagegen oft zu Fehlanzeigen.

Mit so einer Meta-Angabe direkt unter dem title Tag kannst du verhindern, dass der IE die Kompatibilätsansicht verwendet:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

20.11.2013 22:39 | geändert: 20.11.2013 22:40

8 Birgit (Gast)

Danke Jörg für die Erklärung mit der Kompatibilätsansicht.

So, jedenfalls wird dann die Grafik dann komplett falsch angezeigt, egal welcher Browser.

Hier der Code von der index.html:

<div id="head_delivery">
<a href="{$index}"><img src="{$tpl_path}img/delivery.jpg" title="schnell und g&uuml;nstig" alt="Lieferung" /></a>
</div>
<div id="social_buttons">
<a href="https://www.facebook.com/..."><img src="{$tpl_path}img/facebook_1.jpg" title="Like us on Facebook" alt="Folgen Sie uns auf Facebook" /></a>
<a href="https://twitter.com/..."><img src="{$tpl_path}img/twitter_1.jpg" title="Like us on Twitter" alt="Folgen Sie uns auf Twitter" /></a></div>


Wie müsste dies dann in der CSS lauten, damit es richtig angezeigt wird?

Bitte um Info und danke im voraus.

Gruß
Birgit

20.11.2013 23:22

9 Jörg

Wenn du wie in dem Code in Beitrag 1 "position: absolute;" verwendest, würde ich nicht nur für right sondern auch für top einen Wert angeben, um die Höhe genau festzulegen, z.B.:

#social_buttons {
position: absolute;
top: 10px;
right: 0;
/* etc. */
}

..und dann schauen, wo das Div dann angezeigt wird. Falls notwendig, kannst du für top auch negative Werte angeben

Ähnliches gilt dann vermutlich auch für #head_delivery

20.11.2013 23:40 | geändert: 20.11.2013 23:40

10 Birgit (Gast)

Hallo Jörg,

danke für die Unterstützung.

Habe es damit nun so gelöst:
#head_delivery {
position: absolute;
top: 30px;
margin-left: 350px;
right: -10;
/* etc. */
}
#social_buttons {
position: absolute;
margin-left: 880px;
top: 40px;
right: -60;
/* etc. */
}

und damit passt es

21.11.2013 00:18

Beitrag schreiben (als Gast)





[BBCode-Hilfe]