Q: HTML placeholder not working in Edge - placeholder

I hope someone can help me out here. I have a form with HTML placeholders. It is done with ContactForm7 in WordPress. I have testet it in IE11, Chrome, Firefox and Safari and it works great.
But in Edge 20 it is not :-(
According to this link http://caniuse.com/#feat=input-placeholder, Edge should support it.
The form can be seen on https://www.suresms.com/dk/gratis-sms-testkonto/
Hope for some good help.
Glen

Yep it is working in Edge.
The issue you have here is somehow linked to the
position: relative;
You have in your span.wpcf7-form-control-wrap selector.
I removed it and it worked.

Related

Issue with Zurb Foundation anchors in heading tags on Android Froyo

On Android Froyo (Galaxy S phone) default browser, the issue I'm seeing is when I tap on a link that is in a h1 or h2 or any heading tag, the active link box appears above the link. In some cases the box doesn't appear at all and the link doesn't work. It appears to only be links in heading tags. I've also tested it on iPhone 4s and Android Jellybean, and they work fine. I've narrowed it down to something inside foundation.css, but I can't find the CSS that's doing it or if it's a "feature" of Froyo browser.
Has anyone else seen this? Is there a fix?
TIA,
Chris
I think I found the problem. In foundation.css (Foundation 4) text-rendering: optimizeLegibility. It may be related to WebKit bug 41363.
I nullified that node and things are back to normal.

display: -webkit-box; sometimes crashes my iPad

Do you have any ideas why my websites keep crashing on single post template? It is powered by Wordpress. The problem appears only on iPad (I've tested two iPad 2's).
http://luzlol.me
How do I diagnose such things? Thanks.
update: I figured out the reason.
display: -webkit-box;
crashes my iPad on single post template (like http://luzlol.me/bittorrent-sync/ this one), don't know why.
Deativate W3TC and use your dev tools console to fix your jQuery errors. Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE.
Use the http://validator.w3.org/ to check your html and css.
It appears to be a webkit bug, nothing to do here. Thanks. I hope this one will be fixed soon.

Ipad -webkit-box-flex is Super Slow

I have an weird issue, with flexible boxes on Ipad.
I really like -box-flex futures in css3 but,
When I use -webkit-box-flex: 1 on the page, my HTML5 website is very very slow, especially I can feel it when I try to show a popup box, which already exist on the page , I just show/hide the box.
my css ex:
-webkit-box-flex: 1,
box-flex: 1
More flex boxes I use, slower Website gets, if I remove all flex and add static width and use float, everything works fine.
Does someone have this issue as well? IS it a webkit bug or something else.
Does someone have a fix or an alternative way to use flex?
I found as well this info:
http://css-tricks.com/old-flexbox-and-new-flexbox/
where they suggest to use display: flex; instead display: box; and instead
-webkit-box-flex: 1 to use -webkit-flex: 1
I have tried, and really helps when I use chrome (desktop), but Ipad safari seems like doesn't support new -webkit-flex
I really appreciate any help or suggestion what I can do in my situation.
Thanks !!

IE7 link issues?

My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.

jQuery and Safari 4.0.1 - ToggleClass effect

I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.

Resources