I have embedded a google form on my website here: https://gymefit.tw/groupclasssignup/
On the mobile view of this page in safari it seems to be defaulting to the center. I tried to fix it with CSS but have not had any luck
I've tried a bunch of stuff on css but am still a bit new so I think I am missing something here.
<div class="group">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSep0dl_-1LARR9R0ZVwrDz9Wy7rFI0cbxp6ckT6xAZFgLyLhQ/viewform?embedded=true" width="640" height="4303">
</iframe>
</div>
CSS:
.group iframe {
text-align:left !important;
}
Related
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
I am developing an ordering food widget for a restaurant website(Please see the attached picture below). I use iframe to display menus with scroll abled. And i have hide the scroll bar in css. But it is strange that there is a bar displayed on the right hand side and I have no idea that it is. Also, this bar appears only in Windows chrome, not in Mac chrome on safari.
To remove frame border use the below one.
<iframe src="myURL" width="500" height="500" frameBorder="0">Browser not compatible.</iframe>
Try this scrolling="no" or seamless="seamless".
<iframe src="..."
class="foo"
scrolling="no"
seamless="seamless">
</iframe>
The only Draw Back here is you have to use a Div Container outside the IFrame.
Tested in android and ios Device.
HTML
<div class="outerCon">
<iframe src="https://bing.com"
class="foo"
seamless="seamless">
</iframe>
</div>
CSS
.outerCon{
overflow:hidden;
height:500px;
width:600px;
}
.outerCon iframe{
width:inherit;
height:inherit:
overflow-x : hidden;
overflow-y: scroll;
}
.outerCon iframe::-webkit-scrollbar {
display: none;
}
DEMO
I'm using a class inside an img tag to define the content of the img dynamically depending on the device resolution through css. For some reason this works great in webkit based browsers and Opera, but doesn't work in Firefox or IE.
Here's the HTML:
<img class="content" />
and CSS:
.content {
content:url(img.jpg);
}
Is there a workaround for those two browsers?
Thanks!
we've got an issue that only effects Chrome, Firefox and IE are fine.
the only page affected in Chrome is the home page, index.html... all other pages use the exact same header html and CSS. If we click a link on the home page to go to an interior page, the page works fine, then we click back to the home page and it looks fine... but if we refresh the home page, its messed up again.
here's the url
http://www.logilityconnectionseurope.com
the element that gets pushed down is a big div that holds an image and some text on the right side, the div CSS is as follows
.dateLogoTopDiv {
float:right;
text-align:right;
margin-top: 15px;
}
HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
as I said, works fine in Firefox and IE and works in Chrome on every page except the index
any help would be appreciated
Run your page through the HTML Validator and fix all errors. Without valid HTML, browsers don't know for sure what you intended to display and you'll have cross-browser rendering inconsistency. In this case, Webkit browsers (Chrome & Safari).
http://validator.w3.org/
EDIT:
OP's site previously contained malformed HTML including open tags and misplaced tags. OP's site has since been fixed, rendering the code at the URL posted in the question obsolete.
EDIT 2:
I'm seeing the OP's issues in Chrome. I cannot explain why the issue was occurring or why it was intermittent. However, I fixed it by adding the following...
Additional CSS:
.header {
overflow: auto;
}
.header > img {
float: left;
}
Existing HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
This takes the two main header elements and floats them left & right respectively. The right one was already floating to the right. overflow: auto; is a trick to force the header to expand to contain it's floated elements. Since both are floated, they are outside the regular content flow and would not normally cause the header to expand.
hi
I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the scrollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.
EDIT: screenshot of browser scrollbar
banner code:
<div id="header_container">
</div>
css:
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:no-repeat;
background-color:#fff;
height:147px;
}
Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts
Also id recommend not using header_container as your div tag. Think about how many items you have in the header.
EG if i had a banner and site name but still needed a wrapping div i would use
<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>
or
<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>