Im using google recaptcha, as shown in the image below, when I click the captcha check box, a weird line shows up in my page. Even I set height for the div or remove css related code. The line still shows up eventually. It only appear in IE browser and works fine in other browser, is it a bug between google recaptcha and IE browser?
Here is the code
<div class="row" >
<div align="center">
<div class="g-recaptcha" data-sitekey="somedatasitekeyhere"
data-theme="light" data-size="normal">
</div>
</div>
</div>
Related
I have an email template which has the following code:
<html>
<head></head>
<body style="font-family:Verdana">
<h1 style="font-size:36px;text-align:center">Welcome!</h1>
<div style="text-align:center;margin:50px">
<span style="font-size:18px">We are happy to see You joined! Please press the button below to confirm Your account.</span>
</div>
<div style="text-align:center">
<a style="background-color:#3a86e0;border-radius:4px;color:#fff;font-size:18px;padding:8px 32px 8px 32px;text-decoration:none;display:inline-block" href="{parameter}">Confirm email address</a>
</div>
<div style="text-align:center;margin:50px">
<span style="font-size:12px">
<b>You received this message because Your email address was used to create an account in our project. Ignore this in case of a mistake.</b>
</span>
</div>
</body>
</html>
And when it comes to rendering in a web browser it looks just fine, but I open such email in the Outlook app or built-in Windows Mail app the corner radius property of the <a> tag is being ignored, and the link is drawn with the square corners.
Please see the images below to see the difference.
This is how its rendered in the apps:
This is how its rendered on the email websites:
I searched the web for similar issues but had no luck. Could you help me please, why the same HTML is being rendered differently and how I can fix this? Thanks.
Some email providers do not support padding and border-radius.
You can try generating a bulletproof button here that will use workarounds for those unsupported properties
i just get into a small problem.
i tried to include iframe inside and also outside of div code but nothing show
adding like frameborder="0",etc didn't work either
then i tried on another .html file to make sure the iframe is good and it's showing like usually.
so why the iframe won't opened the src file, did i do something wrong ?.
heres my code (the problematic one):
<html>
<head>
<title>Buat.in</title>
</head>
<body class="container">
<div>
<div class="additional-ui">
</div>
<div>
<iframe src="backgroundui.html">
</iframe>
</div>
<div class="ui-bttnmenu">
<ul>
<li>Tentang
</li>
<li>Daftar Desain
</li>
<li>Lokasi
</li>
<li>Hubungi
</li>
</ul>
</div>
<footer class="foot-ui">
<p>Designed & Written by :</p>
and also i haven't applying the separate style file here, the class="" will be linked to my style later, i test it on firefox 85.0.1 ubuntu.
(Edit) heres the additional info for backgroundui.html:
<html>
<body class="secondary-ui-container">
<h1>Buat.in</h1>
<p>Your "trusted designer"</p>
</body>
</html>
fun fact theres something happened, when i run iframe inside the background.html (supposed to be the ui) the iframe works normally else on the main page.
or should i rebuild all from zero again ?.
Firefox has recently implemented a security feature which does not allow cross tab tracking which is the fundamental of iFrame. Previously, this feature only prevented only https and ssl certified sites.
You may change this behavior in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false.
Here are some more docs about x-frame-options:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
<div class="MsgBody" style="width: 90%;align-self: center;margin: 3vh 0;flex-direction: column;display: flex;">
<div class="MsgRight" style="flex-direction: row;width: 50%;align-self: flex-end;justify-content: flex-end;display: flex;">
<div class="MsgSendContent" style="background-color: #9eea6a;border-radius: 5px;padding: 10px;word-break: break-word;flex-shrink: 0;display: flex;">
555 </div>
<div class="RightTriangle" style="margin-top: 8px;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 10px;border-color: transparent transparent transparent #9eea6a;flex-shrink: 0;margin-right: 8px;display: flex"></div>
<div class="HeadImg RightHeadImg" style="background-image: url(/img/testhead.jpg);height: 40px;width: 40px;border-radius: 5px;background-position: center;background-size: cover;background-repeat: no-repeat;flex-shrink: 0;display: flex;"></div>
</div>
</div>
In PC end, it runs well:
In the Chrome Toggle device toolbar, I tried all the device and all of them works well also.
Well, when I run the page in iPhone 6s with Chrome of IOS 13.1.2, it turns out to be this:
As you see, the message dialog does not render correctly and the input box in the bottom miss yet.
Then I tried the safari and the problem still here. What's more, I tried an android device which is android 9, the input box does not miss any more but the message dialog still does not render correctly.
The problem only occurs in the mobile device but not in the Chrome Toggle device toolbar. I can hardly know how to debug and solve it.
I should not only post a URL here but I don't know where is the problem.
Would you please help me to solve this and tell me why it doesn't render identical even I use Chrome in PC and Mobile.
Thank you.
This is happening because your page is not responsive
Integrate bootstrap ,so you don't have to write CSS files manually and use pre build classes with bootstrap grid to make responsive pages
There are several tutorials available for bootstrap I prefer you to go through them
My personal favourite is:
https://www.w3schools.com/bootstrap/default.asp
When I uploaded the html & css parts into webhost, on my browser (Google Chrome) didn't show all of the page, so I deleted cache, media, everything.
Tried to enter again on the website, still wasn't loaded all of the page.
I enter to website by Mozilla, page was there, full loaded.
Asked my friend to enter by chrome to my website, page was full loaded
I tried to enter again by chrome to website, page wasn't full loaded.
Restarted my pc, tried again, page wasn't full loaded.
But why?
That's how only I see from Chrome
That's how everybody sees even if it's from Chrome or another browser
Missing code :
<div class="banner">
<div class="container">
<div class="banner-main">
<div class="col-md-6 banner-left">
<img src="images/ba.png" alt="" class="img-responsive">
</div>
<div class="col-md-4 blc-layer3-grids-3 simpleCart_shelfItem">
<span class="bann-heart"></span>
<h2>OFERTA SPECIALA ! </h2>
<hr> <br>
<h1>Reducere MAJORĂ LA <font style="color:red">UNIVERSAL GAIN FAST !</font></h1>
<hr>
<h2 class="item_price"><strike>$200.00</strike></h5>
<h2 class="item_price"><strong>$100.00</strong></h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
I had some similar issue but then i realised that was due to cache.
How i found was, i re-uoloaded the file to another directory and everything worked fine. Sometimes chrome is a bad guy with cache issue.
Probably try deleting cache again or reload the page with shift pressed several times.
I have this html table and in one of the columns there is a image for view. The image is showing correctly on ff and chrome but there is some thumbnail or some thing coming over the image in ie. Pls help me as I am blank .
I am attaching the two images.
chrome & FF
and this one is for ie.
Actually I have used the below HTML:
<div>
<img alt="view" style="background-image:'/sampleimg.png'" href=""/>
</div>
and this bauses problem on IE. So i have modifies the html to
<div style="background-image:'sampleimg.png'">
<img alt="view" href=""/>
</div>
and the problem is solved