0

I am having a confused day.

If you look at at this page, and view its source code: http://tinyurl.com/npawot5

You will realise that it has a CSS in its header to deal with a single form field.

The problem is that before making modifications to the CSS, I was seeing an image on the page. But now, the image is lost in the background, and you are only seeing the form field in Chrome etc, but not internet explorer.

So no image in any browser, and no form in internet explorer.

Anyone has an idea what can be causing this mess?

Thanks

user2977144
  • 5
  • 2

2 Answers2

1
#bv_Image1 {
    overflow:hidden; <--remove
}
img {
    opacity: 0; <--remove
}

Internet explorer versions 9 or less have weak or none support for rgba colors. Use hex colors instead. Be sure that you have browser and document mode compatible (press f12 in internet explorer and see). If you want to create gradients for all browsers (again ie8 or less have weak or none support) use this link and be sure to enable ie9 support. collorzilla

Vladislav Stanic
  • 795
  • 8
  • 13
  • 1
    Yeah - you are right. Forgot to mention overflow:hidden should be removed also (just mingled with chrome) so i've deleted my answer and upvoted yours instead. – davidkonrad Nov 25 '13 at 14:46
  • Thanks. I removed the CSS regarding "img", and the image is showing now. You can revisit the code to see. However, the form is still not showing up in Internet Explorer. Any ideas? – user2977144 Nov 25 '13 at 17:20
  • From looking at the css, I can't seem to figure how the color scheme would impact whether the display issue for the login field in internet explorer. Are you sure about that? – user2977144 Nov 25 '13 at 19:15
  • Can you post print screen image of what you see in ie? Open web developer tool while doing that (f12) so I can see what it says. I have checked your page in ie from 10 to 7 and I can see all, there only are no background colors of that login field. – Vladislav Stanic Nov 25 '13 at 19:36
  • Sorry. I was away for a while. I tried using an online browser tester to see what the page would look like in various browsers. There is definitely a problem with that CSS and Internet Explorer. It is definitely not showing up. – user2977144 Nov 26 '13 at 14:47
  • I used my computer at work and at home and its good at both of them. The only way I can make it disappear is to set Browser mode ie9 or ie8 or ie7 and Document mode ie5 quirks. You have to make browser and document mode the same and check again. Please use real ie, not testers. – Vladislav Stanic Nov 26 '13 at 15:02
  • Are u saying that it is a compatibility issue? Cause I am using ie8. If that is the case, then persons with anything below ie10 would not be able to see the login window. Is that so? – user2977144 Nov 26 '13 at 16:16
  • Like I said many times, open your page in ie, pres f12 and set browser mode and document mode BOTH to ie8 and all will be fine. If you use ie9 then set them BOTH to ie9 and so on... This is one of the topics about them. http://stackoverflow.com/questions/2950598/ie8-browser-mode-vs-document-mode If still not clear then search about it online. – Vladislav Stanic Nov 26 '13 at 16:36
0

You can't nest CSS the way you are. And you can't do the :after pseudo selector on &. It seems like you may be trying to use compiled CSS, but it is not being parsed.

.coming-soon {
    height: 105px;
    left: 50%;
    margin-left: -172px;
    margin-top: 35px;
    overflow: hidden;
    position: absolute;
    top: 30%;

    &:after {  /* This is not allowed and shouldn't be nested here */
        border-radius: 100%;
        box-shadow: 0 -10px 10px 0 rgba(0,0,0,0.3);
        content: "";
        left: 15px;
        position: absolute;
        height: 10px;
        top: 109px;
        width: 320px;
    }
}
Alex W
  • 37,233
  • 13
  • 109
  • 109
  • Thanks. But I removed the CSS regarding "img" instead, and the image is showing now. You can revisit the code to see. However, the form is still not showing up in Internet Explorer. Any ideas? – user2977144 Nov 25 '13 at 17:21