CSS3-PIE: ie 8 weird black spot issue

Question

If you have a look at the following link: http://78.109.168.22/tv - you will notice that in IE8 in the middle of the logo header there is a little black spotted area. I have no idea what it could be!

Has anyone got any ideas? I would love to hear them! It's driving me crazy.

Screenshot of what I'm talking about - https://i.stack.imgur.com/OTOTi.png

Solution was a Drupal skip link ID. I just displayed this id to none in IE8 and it has now be resolved. Thank you all!

Post the erroneous code to make your question valid for future as well. — Ejaz, Apr 23 '13 at 12:06
Don't see anything wrong... (IE9 with document mode set as IE8) — Laurent S., Apr 23 '13 at 12:06
@ejay I would if I knew what the erroneous code was, once I figure it out I will post it in my original post — rowefx, Apr 23 '13 at 12:11
you mean the little black rectangular area in top-middle of the header? — Ejaz, Apr 23 '13 at 12:13
Can't be reproduced in IE8. I think that's because of that "select " toolbar you are running? — Ejaz, Apr 23 '13 at 12:15
Just disabled that PDF icon bar, still there. I'm running IE9 set to IE8 mode — rowefx, Apr 23 '13 at 12:19
I'm able to reproduce this in IE10 with IE8 doc mode. However, something on page hang my IE, so I can't debug anything. — Tommi, Apr 23 '13 at 12:21
it has to do something with CSS3 PIE solution you're using. Specifically `js/PIE.htc` — Ejaz, Apr 23 '13 at 12:26

score 1 · Accepted Answer · answered Apr 23 '13 at 12:22

1

These line of code creating the problem

<div id="skip-link">
        <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
      </div>

answered Apr 23 '13 at 12:22

Manish Sharma

1,670
14
20

You've just made a statement, not an answer – Bojangles Apr 23 '13 at 12:26
His statement has answered my question. Thank you very much mani! – rowefx Apr 23 '13 at 12:28
1

To me it seems as though what your seeing is an alternative header/menu for mobile devices for users who are browsing the website on a mobile device. The complete image looks like the image below. And the Black BAR is probably a drag handle to slide the menu up or down as required. ![enter image description here][1] [1]: http://i.stack.imgur.com/aBNQz.jpg – Zeddy Apr 23 '13 at 12:37
1

problem is because of .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px;} ie ignore 1px height add font-size:1px also may solve your problem. try not sure – Manish Sharma Apr 23 '13 at 12:41

CSS3-PIE: ie 8 weird black spot issue

1 Answers1