Erledigt - Hintergrundbild wir bei IE 11 nicht richtig angezeigt/skaliert

[Fugel]

Hallo Leute,

ich sitze gerade an einer Seite die für ihre Überschriften eine Art Fahne verwendet, leider zeigt der IE 11 mir das Hintergrundbild nicht korrekt an. Hier mal ein Screenshot:

Falsch:


Richtig:


Dazu mein CSS für diesen Bereich:

#content .product .name {
    background-image: url("../images/flag_left.svg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    font-weight: 300;
    left: 60px;
    padding: 13px 130px 13px 60px;
    position: absolute;
    top: 30px;
    width: 95%;
    z-index: 1;
}

Hat jemand eine Idee wie ich das Teil auch im IE zum laufen bekomme, so das sich der Hintergrund dem Inhalt anpasst?

 

[noltehans]

Hi Fugel,

nimm das "width: 95%;" mal raus und pack dafür "background-size:" rein.

http://www.intensivstation.ch/css3/background-size/

 

[Fugel]

Hi Fugel,

nimm das "width: 95%;" mal raus und pack dafür "background-size:" rein.

http://www.intensivstation.ch/css3/background-size/

Klappt leider auch nicht. Hab jetzt aber den Grund dafür gefunden, es ist mal wieder das SVG mit dem der IE ohne genaue Höhen- und Breitenangabe nicht klar kommt. Vielleicht kennt ja einer einen Fix dafür, ich hab noch nichts gefunden.

 

[Myhar]

Der "Fix" wird wohl sein, genaue Höhen- und Breitenangaben anzugeben?

 

[Fugel]

Der "Fix" wird wohl sein, genaue Höhen- und Breitenangaben anzugeben?

Geht in dem Fall leider nicht, da der Text nur eine aber auch zwei Zeilen einnehmen kann. Somit muss ich ja "auto" angeben.

 

[Myhar]

Wenn du sagst dass es nicht geht dann geht es auch nicht, da vertraue ich dir. Dann musst du dir wohl eine andere Lösung überlegen?

Ich kenne ja nicht einmal die flag.svg Grafik, bzw kann dein Problem auch sonst nirgends nachstellen um dir weitere, bestimmt nicht funktionierende, Lösungsvorschläge zu geben.

 

[noltehans]

Diese Lösung hier benötigt "nur" eine fixe Breite.
http://stackoverflow.com/questions/...in-ie11-edge-unless-container-has-fixed-width

Falls das auch nicht funktioniert, kannst du einen PNG-Fallback für den IE einbauen.
http://www.mediaevent.de/svg-in-html-seiten/

 

[Fugel]

Ich kenne ja nicht einmal die flag.svg Grafik

Das ist der rote Hintergrund im Screenshot oben^

 

[Myhar]

Das habe ich mir fast gedacht. Trotzdem weiß ich nicht, wie die aufgebaut ist, wie das HTML dazu ausschaut und ähnliches. Dass es eine "rote Flagge" ist weiß ich schon, ist aber irrelevant dafür, um dir zu helfen.

 

[Fugel]

Sorry hab das HTML einfach vergessen, war für mich selbsterklärend, ist es wohl für andere nicht.

<div class="name">
<a href="/produkte/product/view/1/7"> Grüne Bohnen Eintopf </a>
</div>

Edit:

Habs jetzt mit nem Javascript (https://github.com/ded/bowser) gelöst und tausche im IE das SVG mit nem PNG aus.

Danke euch dennoch für die Hilfe.

 

[Myhar]

Selbsterklärend ist gut, für mich sieht das eher wie eine wichtige Überschrift aus. Also ist wohl <h1>Grüne Bohnen Eintopf</h1> für mich die selbsterklärende Lösung.

Schade, dass du nicht auch noch das SVG-gepostet hast, dann hätte man eventuell eine Lösung ohne browser-detection anbieten können.

 

[Fugel]

Selbsterklärend ist gut, für mich sieht das eher wie eine wichtige Überschrift aus. Also ist wohl <h1>Grüne Bohnen Eintopf</h1>

<h1> macht sich da eher schlecht, da es sonst 25 weitere <h1> überschriften geben würde (Ist nur eine Übersichtsseite). Die eigentliche Produktseite hat dann natürlich <h1> stehen.

Hier mal noch das SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 516.7 50.5" style="enable-background:new 0 0 516.7 50.5;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#E10917;}
</style>
<polygon class="st0" points="0,50.5 516.7,50.5 483.9,25.3 516.7,0 0,0 "/>
</svg>

Bin für Verbesserungsvorschläge bzg. des SVG gern zu haben.