Member Avatar for riahc3

Hello

For some odd reason, I have a picture with a link and it shows in all browsers except IE8/9/10.

What can I use to debug the problem?

  • 5 Contributors
  • 31 Replies
  • 312 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by riahc3

Dani AI

Generated

Brief diagnosis and focused troubleshooting workflow.

The fact that images still disappear after JavaScript was removed strongly points to a CSS/layout or stacking issue rather than script logic. was right to point to the Developer Tools, and ’s observation that changing the canvas/float behaviour made icons appear in IE9/10 is an important clue: this is most likely a layout/float/stacking interaction that IE renders differently than WebKit/Gecko.

Suggested triage (fast, order matters):

  • Reproduce in a minimal HTML file that contains only the linked image (no site CSS/JS/canvas). If the image appears there, the problem is a site stylesheet or layout rule.
  • Open IE’s Developer Tools and confirm Document Mode / Emulation (ensure standards mode, not Compatibility/Quirks). Inspect the element in the DOM Explorer and check computed values for display, visibility, opacity, width/height, overflow, position and z-index.
  • Use the Network/Console panes to confirm the image resource returns 200 and that there are no mixed-content/security blocks.
  • Temporarily disable the site stylesheet(s) or toggle suspect rules (overflow, floats, position, negative margins) to see which rule causes the disappearance. Add quick colored borders/backgrounds to visualize bounding boxes and clipping.

Common root causes and pragmatic fixes:

  • Floats or un-cleared containers causing overlap or collapse (switching to an inline-block layout or clearing floats often helps).
  • Absolutely positioned elements or a canvas sitting on top (adjust stacking order or DOM placement).
  • Overflow:hidden or negative margins clipping the image.
  • IE document-mode quirks or mixed HTTP/HTTPS blocking the resource.
  • Sub-pixel/zoom rounding that hides small elements (explicit width/height or forcing layout on a container can help).

Because the OP noted intermittent behaviour when maximized, responsive/subpixel rules and stacking are likely. A minimized reproducible case makes the offending rule obvious and speeds resolution; the observations from , and line up with this diagnosis.

Recommended Answers

All 31 Replies

Member Avatar for pritaeas

The developer tools of IE (F12).

Member Avatar for riahc3

The developer tools of IE (F12).

Looked before making this thread but it really showed nothing that caught my eye...

Member Avatar for riahc3

never mind.

Edited by riahc3
Member Avatar for riahc3

OK, Ive gone ahead and created a ZIP with the page so you guys can take a look and maybe see something I dont....

Javascript has been mostly removed so thats why it may take a second or two to load the page.

First you see the difference:

Member Avatar for riahc3

And let me see if I can upload the ZIP:

dibujonojs.zip (690.27 KB)
Edited by riahc3
Member Avatar for riahc3

Never mind

Edited by riahc3
Member Avatar for riahc3

Oops lol....

That never mind was that the post I posted is incorrected. I still need help sorry.

Not SOLVED

Can someone remove that post to avoid confusion???

Member Avatar for paulkd

I suspect you have a cross-browser JavaScript issue.

Member Avatar for paulkd

Possibly and/or canvas

Member Avatar for paulkd

I made something appear in IE9 with the following insertion

<canvas id="can" width="550" height="550"></canvas>
<h1>PKD #1</h1>
<div id="botones"><h1>PKD #2</h1>
Member Avatar for riahc3

I suspect you have a cross-browser JavaScript issue.

I removed all the Javascript files and it still doesnt show up. Javascript has nothing to do with it.

Member Avatar for riahc3

Thats SOME progress I guess.....so now what?

Member Avatar for riahc3 
<canvas id="can" width="550" height="550"></canvas>
<h1>/h1>
<div id="botones"><h1></h1>

This works too....

Member Avatar for paulkd

Thats SOME progress I guess.....so now what?

Welcome to web development :-)

Member Avatar for riahc3

Welcome to web development :-)

Been a year and something doing this.

So, how do I solve this?

Member Avatar for paulkd

You work at it.
Although icons didn't display in IE... the actual app you have doesn't do anything in Chrome or FireFox. Did you write the code? Do you have a proof-of-concept that draws on the canvas?

Member Avatar for riahc3

You work at it.
Although icons didn't display in IE... the actual app you have doesn't do anything in Chrome or FireFox. Did you write the code? Do you have a proof-of-concept that draws on the canvas?

Already worked on it a few days.

The app doesnt do anything because the Javascript is missing. I made the code work and of course there are proof-of-concept on it and in FF/CH it does work.

Edited by riahc3
Member Avatar for paulkd

The app doesnt do anything because the Javascript is missing.

Then pritaeas's answer is the best for your original question.

Edited by paulkd because: missed a bit
Member Avatar for riahc3

Then pritaeas's answer is the best for your original question.

That shows me absolutly nothing relevent to the problem. It shows the code being there but it doesnt appear.

There is a reason I posted the code; So you can look at it and see if there is something I am missing :) Also to make sure that it is not only my PC....

Member Avatar for paulkd

The zip file you attached had lots of JavaScript files. But you say the app doesn't work

...because the Javascript is missing

If you simply want the icons to appear in your page then stick some non-breaking spaces instead of my debug H1 :-)

Not really sure at this point what is and what isn't working.

Member Avatar for almostbob 
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

just a thought, I'm not going through a few hundred K of file

Edited by almostbob
Member Avatar for riahc3

I never said that the app did not work. I said that the pictures with links (basically buttons) do not show. Do not worry about the app working or not. That is not the issue.

Member Avatar for riahc3

I need confirmation that this happens on other PCs as well....

Member Avatar for riahc3

It takes at most 5 minutes to download it and open it up in one browser than another....come on....

Member Avatar for paulkd

Another quick fix.....

I've made them appear in IE9+10 by floating the canvas

<canvas id="can" width="550" height="550" style="float:left"></canvas>

and removing the float from an anchor tag in main.css

#panel div#botones a {margin-right:10px; margin-top: 5px}

You might just want to try floating the container divs rather than the icons themselves, and maybe look at display:inline-block rather than float.

Edited by paulkd because: grammar
Member Avatar for riahc3

Ill give this a try, thanks.

Member Avatar for riahc3

Looks horrible in IE.
Looks great in Chrome
Looks a bit worst in Firefox

Im going to try to fix it for IE then work on the rest....

Thanks for the tip

Member Avatar for riahc3

And yes, before you ask, I made the site based on Firefox using Firebug to fix things.

Problably going to be left like that as it is "decent" and all buttons are reachable.

Member Avatar for riahc3

Fuck..........one of the buttons now doesnt work correctly....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.