Can anyone tell me how I fix the opentok call window in place on mobile (Tablet & Phone)? At the minute, users can 'drag' it across the screen. When in focus I would like it to be fixed in place.
I don't know if this is a opentok element fix, object fix or CSS fix.
Any helpfull suggestions would be greatly appreciated.
Thanks.
Have you tried using position: absolute?
HTML
<body>
<div id="publisher"></div>
</body>
CSS
#publisher {
position: absolute;
bottom: 0;
right: 0;
width: 320px;
height: 240px
}
That would fix the publisher div on the bottom right of the window.
Related
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
First and for most I would like to say "Hello" to the community. I'm an entry level junior web designer fresh out of vocational school. Most of my styling in CSS I've taught myself so this has led me to some problems. Such as the one below.
This is a sample of my navigation bar that I'm using for my site. Each of the div boxes are supposed to slide out to their corresponding positions over 2 seconds. However with every browser aside from chrome they snap out quickly instead of a smooth transition.
http://jsfiddle.net/kwh71787/cxBxL/
If anyone has any insight please help
Try using this style instead:
#navbuttons div {
position: absolute;
left: 0px;
}
DEMO
Welcome to Stack Overflow!
This seems to fix it. What I've done is I've added top: 0px; and left: 0px; to each div.
Here's an updated jsfiddle
Hope that helps!
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.
Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.
At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.
This works great in every browser I've tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it.
Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can't scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.
The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?
Any help with this annoyance is greatly appreciated, Many Thanks.
Update: Added Code
Basically the code is this as theres too much show it all. I would point you to the site but the client doesn't want it live yet. Here we go:
<nav id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</nav>
Then the css is this for a fullwidth browser bar as the link above:
html,body{
overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}
#menu{
position: relative;
background: blue;
}
#menu:before, #menu:after{
content:'';
position: absolute;
background: inherit;
top: 0;
bottom: 0;
width: 9999px; /*huge width to ensure bar fills browser*/
}
#menu:before{
right: 100%;
}
#menu:after{
left: 100%;
}
Just had a similar issue come up; my solution was to simply add:
html, body {height:100%;}
And that solved it. Just wanted to post it here 'cause this kept popping up in the search results.
OK, I sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren't working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a '.' inserted as the content. I removed this and then added
* html .clearfix { height: 1%; }
onto the end of the clearfix css block and it worked. No more horizontal scrolling, no more x2 vertical scrollbars in Firefox.
What fixed it for me was moving over the scrollbar code to html only instead of "body, html". I figured maybe it's making two scrollbars because its put in both html and body. Though this introduced some other problems. Think I'll go with an additional div instead.
html {
overflow-y: scroll;
scrollbar-color: #2A9FD6 rgba(0,0,0,1);
scrollbar-width: thin;
}
body, html {
}
i have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);