This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

The SVG logo does not display my site on firefox

  • 10 cavab
  • 5 have this problem
  • 2 views
  • Last reply by nhutpham

more options

The SVG logo on my site is not showing up on firefox, it works fine on Chrome, Egde, safari, .. How to fix this. Thank you my site: https://phepthuat.com

The SVG logo on my site is not showing up on firefox, it works fine on Chrome, Egde, safari, .. How to fix this. Thank you my site: https://phepthuat.com

Chosen solution

nhutpham said

jscher2000 said
Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

Where did you put the change?

Option #1 (directly set the image size):

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
  <div id="header-logo-image" style="width: 290px">
    <a class="custom-logo-link">
      <img class="custom-logo">
Read this answer in context 👍 1

All Replies (10)

more options

I see no logo in Chrome so what does the screen shot look like with it?

more options

HI , Firefox takes code errors a little more strictly than other browsers as per W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

Could you please clean the code errors on your home page https://phepthuat.com to see if that helps with the issue.

Errors = https://validator.w3.org/nu/?doc=https%3A%2F%2Fphepthuat.com%2F and congrats your CSS is perfect.

Please let us know if this solved your issue or if need further assistance.

Modified by Shadow110

more options

This one?

https://phepthuat.com/wp-content/uploads/2018/02/logo_phepthuat.com_.svg

You have this style rule for that img element:

#header-logo-image img{margin-bottom:0; width:85%;}

Okay, but: 85% of what? The problem is that you have the image in a link in a floated element, which is itself in a floated element. By default, a floated element has a width of zero. So the img width is computed as zero.

You need to give a defined width to the img OR to these two container divs:

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo">

I'm not sure of the desired size, but you could start from width: 100% on the two divs (default behavior for non-floated divs) and adjust from there.

more options

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ???

But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

more options

jscher2000 said

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

more options

WestEnd said

I see no logo in Chrome so what does the screen shot look like with it?
more options

Hi, if your issue is solved could you please mark the Solution that help. Thank You

more options

Seçilmiş Həll

nhutpham said

jscher2000 said
Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

Where did you put the change?

Option #1 (directly set the image size):

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
  <div id="header-logo-image" style="width: 290px">
    <a class="custom-logo-link">
      <img class="custom-logo">
more options

I see the logo when I make the Firefox window smaller.

There is an @media screen and (max-width:768px) rules that displays the header logo image, but that rule isn't applied when the next @media rule gets active (@media screen and (max-width:1190px)).

more options

jscher2000 said

nhutpham said
jscher2000 said
Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

Where did you put the change?

Option #1 (directly set the image size):

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
  <div id="header-logo-image" style="width: 290px">
    <a class="custom-logo-link">
      <img class="custom-logo">

Yes, I replaced 85% by 250px it worked well for all browsers. Why when using 85% chrome, all browsers displays good but tiny images on firefox? Anyway, the problem has been solved thanks you.