Image problem in Firefox

  • Resolved razorpig

    (@mjtilbury)


    11 years, 2 months ago

    This is very confusing. On my site, https://www.mandodymedia.com I’ve created custom section headers in photoshop, so instead of using normal text, I just display the images. I’ve put a little ‘glow’ on the text and used a yellow 1px gradient for underlining each title. All works OK in IE and Chrome but in Firefox the yellow underline doesn’t appear. I’m thoroughly confused because the text shows up fine and the underline is just a part of the same image. On my home page, if you right click on the header ‘Welcome to Mandody Media’ save the image to your local drive, then open it, you’ll see the yellow underline. Anyone know why it doesn’t appear in Firefox!???? I’ve no idea where to begin because there’s no separate element for the line – it’s all part of the image. It’s the same for all the headings on the site :-/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you cleared Firefox’s cache?

    It comes and goes as I scroll up and down the page. Looks like the paragraph below is hiding it, but only sometimes.

    Thread Starter razorpig

    (@mjtilbury)

    Hello again Andrew…thanks for the suggestion. I just tried it but sadly it hasn’t worked. I thought it might be a margin or padding issue, but on my friend’s laptop the line is there but it’s so dark it’s almost invisible. Perhaps I should try editing the original image file and uploading it again??? Don’t see why that should help but I don’t know what else to try.

    Thread Starter razorpig

    (@mjtilbury)

    Ah..I just noticed on the ‘Web’ page that the two titles lower down the page are displaying fine..

    I noticed that the image is inside a paragraph with zero height. I don’t know why it has zero height. Anyway, I took the image out of the paragraph and now it displays OK as I scroll up and down.

    Thread Starter razorpig

    (@mjtilbury)

    Hi Rod, thanks for your efforts. I don’t understand why it’s in a zero height paragraph either, but it’s great you’ve managed to get it displaying correctly. I’m struggling to find reference to the zero height paragraph and really have no idea how to fix it. Can I fix it by editing my child theme’s style.css file?

    Thread Starter razorpig

    (@mjtilbury)

    ??? Now what happened?? There’s now a grey border around the image on the home page??? :-/

    Thread Starter razorpig

    (@mjtilbury)

    OK…I applied a 0px border in the image properties and it’s cleared the grey border, but still not sure why it suddenly appeared ?? No matter.

    I assumed you added the border as part of your testing! Adding style="height: 40px;" to the IMG tag also fixes the problem for me.

    Thread Starter razorpig

    (@mjtilbury)

    Hi Rod. No I didn’t add that border ?? …but nevermind, it’s gone now. In the meantime, I managed to fix the original issue by adding this code :

    p img, .wp-caption {
    margin-top: 0px;
    }

    Which was originally set to :

    p img, .wp-caption {
    margin-top: 0.4em;
    }

    Doesn’t appear to have any adverse effect on the other headings so I guess it’s OK. Not sure I fully understand what was going on but at least it now works. And thanks for your solution too – if I notice any issues with my fix, I’ll try yours ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Image problem in Firefox’ is closed to new replies.