CODEWITHSUNDEEP
csshtmlinternet-explorermozilla
Hooman
Hooman

Reputation: 106

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) ?

Upvotes: 2

Views: 132

Answers (3)

Hooman
Hooman

Reputation: 106

I got my desired result on mozilla when I changed the svg viewBox. But for Internet Explorer, nothing happened when I changed the svg viewBox. Maybe I'll try adding a stylesheet that is specifically for Internet Explorer.

P.S. Sorry for the late response, I got sick :/ but I am well now. Thanks!

Upvotes: 0

asattler
asattler

Reputation: 59

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.

Upvotes: 1

wtitus
wtitus

Reputation: 129

In your HTML, try switching the positions of your main.css and reset.css links in the head. Stylesheets are loaded in the sequence they are linked and this may be why your reset is not working as expected.

Upvotes: 0

Related Questions