Search code examples
csshtmlinternet-explorermozilla

CSS different output in mozilla firefox and internet explorer

I'm practicing css and I came across this problem. I'm using an svg as a background. I get the result that I want when I try to run it in Opera and Google Chrome, like this: enter image description here

But when I try to run it in mozilla, it appears like this, there are a few spaces in the top and bottom: enter image description here

And also, in Internet Explorer, the svg appeared a lot more out of place, like this: enter image description here

I've tried using css reset, but nothing happened.

Here is my svg code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 22.58">
<defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="15.6" y1="9.41" x2="10.68" y2="22.94" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#65ffb7"/><stop offset="1" stop-color="#47f2d0"/></linearGradient></defs>
<title>landing bg</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="10.54 0 0 16.03 9.31 22.58 24 22.58 24 0 10.54 0"/></g></g></svg>

CSS Code

body
{
    background-color: white;

}

.frame1
{
    background: #000000 url('../images/landing_bg.svg');
    background-repeat: no-repeat;
    background-position: right;
    height: 900px;
    width: 100%;
    position: absolute;
    min-width: 900px;
    top: 0;
    right: 0;
}

HTML Code

<!DOCTYPE html>
<html>
    <head>

<link rel = "stylesheet" type = "text/css" href = "main page/main.css">
<link rel = "stylesheet" type = "text/css" href = "main page/reset.css">
</head>

<body>
    <div class = "frame1">

    </div>
</body>

Am I missing something or is there something that I should remove in order to get my desired result(see first picture) ?

Solution

  • It seems like your viewbox of the svg is the problem.

    Try e.g. 

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">

    To be honest, I am not able to provide any information to explain this behaviour. But I've found this topic, maybe it's related to the reason.