0

I'm taking a responsive web design class and I've come across an insanely odd problem. The logo I'm making for my fake eCommerce website doesn't load in Firefox but it will in Chrome. My professor has decades of experience working with HTML/CSS/JS and not even he can figure out why this issue is happening. I found out if I change the width of the image to be a specific amount and not 100% in my CSS, it works. But why in the hell won't it work in Firefox with it being set to 100% when in Chrome it does?

Here's my HTML (the part that matters at least, before you ask, yes I've closed all the important tags like body, main, html, etc)

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cinzel:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="display.css" type="text/css">
</head>


<body>
    <div id="particles-js"></div>
    <script src="javascript/particles.js"></script>
    <script src="javascript/app.js"></script>


  <header>
        <div class="logostuff">
            <a id="logoanchor" href="index.html"><img id="logo" src="images/LogoMeta.svg" alt="META website logo"></a>
            <a id="cartanchor" href="cart.html"><img id="cartimg" src="images/cart.svg" alt="Cart image"></a>
        </div>
        <h4 id="tagline">Let the professionals build it for you!</h4>
    <nav>
    <ul>
      <li><a href="about.html">About Us</a></li>
      <li style="margin-bottom: 0.3rem;"><a href="merch.html"> </a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
  </header>

Here's the relevant CSS bits

.logostuff {
  justify-content: space-between;
  display: flex;
}

.logoanchor {
  width: 100%
}

#cartimg {
  width: 100%;
  max-width: 60px;
}

#cartanchor {
  margin-top: 0.9rem;
  width: 20%;
  max-width: 320px;
}

#logo {
  width: 100%;
}

Also, the javascript has nothing to do with this issue as the problem still persists without it. When I aim at my image in the dev tools of Firefox, it says it's a 0x0 when it should be taking up as much room as it's allowed to, still allowing my cart SVG to exist next to it.

https://i.stack.imgur.com/lMCyK.jpg Here's an imgur album of what it looks like on both browsers.

EDIT 1: Here's the SVG of the Logo https://svgur.com/s/FxL

Jacky
  • 27
  • 6
  • 1
    Firsty, can you load the SVG alone (without any HTML) in the browser by opening the path directly? If not, this may be your issue: https://stackoverflow.com/questions/23468420/svg-works-in-chrome-but-not-firefox – Bitz Nov 05 '19 at 21:04
  • Any chance you could provide the svgs? – Sam Nov 05 '19 at 21:15
  • Sorry for the late reply, but yes I can. They load into both browsers just fine. I'll update the thread as well with the SVG file. – Jacky Nov 05 '19 at 21:36
  • Hey there! I **hope** this is your issue. https://stackoverflow.com/a/57367896/11700321 - just alternate `img` and `image` tags in the actual SVG editor and see what happens? – EGC Nov 05 '19 at 21:49
  • Vicentiu had the answer to my problem. I advise you not to look as, if I'm being honest, I'm deeply embarrassed that I overlooked. :( – Jacky Nov 05 '19 at 22:11

1 Answers1

0

I tried the code with codepen in both chrome and firefox with the svg provided by you. The problem here is that logoanchor has a class selector instead of an id selector. Change .logoanchor to #logoanchor in your css file.

Vicentiu
  • 1
  • ...Well that's embarrassing. I guess even people with decades of experience can sometimes overlook the simple answer. My professor will definitely facepalm when I tell him what the issue was, haha. Thank you so much, friend. – Jacky Nov 05 '19 at 22:10