I'm working with webcams and have experienced a weird issue.
I have a flash object with my webcam video, and I have put a div over it (with absolute positioning), as a button to toggle the video. The HTML is something like this:
<div id="container">
<object></object>
<div class="camicon"></div>
</div>
And the CSS:
div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
The problem now is that, in Firefox, cursor is not restored to its default value (i.e. the arrow) while cursor has left the icon AND stays on the flash object. However, cursor is restored properly when it moves outside the flash object.
This doesn't happen on Chrome, so I guess this may be some annoying bug.
Does anyone know something about this? I have tried lots of possible fixes for it, but no success so far.
More info:
Ubuntu 11.10 32bits
Firefox 13.0.1
Flash 11.2.202.236
I don't have any code to test it, but I would think something like this should work to help force the point (maybe this is one of the solutions you already tried):
#container {
cursor: auto; /* or "default" */
}
#container div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
Related
Yesterday I discovered a layout issue with Chrome and Edge that doesn't show up in the Samsung Internet Browser and didn't exist before. The problem only occurs when using columns. Here's my CSS:
.div_columns {
width:500px;
column-count: 2;
column-gap: 20px;
}
.card {
height: 32px;
padding: 5px;
background-color: #f0f0f0;
margin-bottom: 8px;
}
.div_buttons {
position: relative;
height: 34px;
min-width: 50px;
float: right;
text-align: right;
background-color: #808080;
padding-top: 18px;
box-sizing: border-box;
}
.button {
position: absolute;
right: 1px;
top: 1px;
width: 16px;
height: 16px;
background-color: #f3f3f3;
}
And here is my HTML:
<div class="div_columns">
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
</div>
The output looks like this, and as you can see there appears to be only one button instead of four. But they all appear to be in the same position. Like I said at the start, this problem seems to be browser and use of columns related. So what is wrong here?
Another annoying thing I want to mention is that when I use Microsoft Edge's developer tools (F12) and want to copy a CSS rule by right-clicking, the developer tools close after that. This has not happened with Edge before and is not happening with Chrome.
I successfully restored these buttons to regular position by adding display:inline-block to the div_columns class.
As to the copy rule issue, I found it in my devtools, too. The only conclusion I've got is that if you right-click inside the braces {}, the context menu looks like below. The "Copy rule" option here works as expected:
But if you right-click outside the braces, the context menu changes like below. The "Copy rule" option here will lead to a crash of devtools (actually any option here will lead to a crash). But what's more interesting is that the style rule will still be on your clipboard. So I suggest sending a feedback to Edge team by pressing Shift+Alt+I in Edge:
In a situation like this i would just try to disable position relative position absolute and float right, and ill write something inside the buttons
i'd disable evrything till i find whats the problem
I'm styling this website and I have only access to the CSS (no HTML at all)
https://ampere-store.com/
I have set a before to the features icons and give it an offset border.
The problem is that the first two icons (from the right) work perfect but the last one have a weird behavior like sometimes.
When I right click then inspect the border appears, and some times it appears without doing anything.
I don't know why or how this is happening, the issue don't seem to exist in FireFox but it does exist in (Chrome, Opera, Edge "Chromium")
.feature-item__icon:before {
content: '';
position: absolute;
width: 65px;
height: 65px;
border:3.5px solid #fec414;
border-radius: 50%;
}
.salla-theme_2 .feature-item__content .feature-item__icon {
width: 50px;
height: 50px;
flex: 0 0 50px;
}
I've searched through the existing threads about PIE.htc not working in IE8 but couldn't find a good resolution -
I've tried applying it to every single element on my page that uses an IE8-incompatible CSS3 attribute and I can't get anything to happen. IE8 doesn't tell me that the path is wrong and PIE.htc sits in the same folder as the page which calls it. Here is a random css example from an element which pops up when the user hovers over a graphic:
CSS:
.info_bubble {
-webkit-border-radius: 5px;
padding: 8px 8px 16px 8px;
background-color: white;
-moz-border-radius: 5px;
behavior: url(PIE.htc);
border-radius: 5px;
position: absolute;
margin-top: 1em;
display: none;
bottom: 2.5em;
left: 3.5%;
width: 80%;
height: 0;
}
It is meant to have rounded edges but it still refuses to work in IE8.
According to this link, you should try to set z-index and position:relative to make the border-radius work IE8:
z-index: 0;
position: relative;
Hope this helps!
So I figured it out - Sort of.
It works if I use another version of PIE.htc. I have no idea why, but I guess for anyone else stuck in this situation, try a different version.
Edit: I was trying to use PIE 2.0 beta 1. I resolved the issue by downgrading to PIE 1.0.0.
The usual problem is that the path in the behavior rule is not correct.
As pointed out in the documentation http://css3pie.com/documentation/getting-started/ the path is relative to the HTML file not the CSS.
.googlePic{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
This is an example of my class googlePic in my css file. It works out and prints out nicely on google chrome and safari. however, it doesn't work on firefox. Nth gets printed out. Please help :)
The content property works with ::before and ::after.
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
Read this:
http://www.htmldog.com/reference/cssproperties/content/
IE8 only supports the content property if a !DOCTYPE is specified.
I know this may be a late response, but i came across the same problem.
I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.
What worked for me, was creating an empty 'content' and using a background to show the image:
it works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
edit: forgot to put the :before after the classname
you have to write two css class in style
.googlePic
{ /*this for crome browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
.googlePic: after
{ /*this for firefox browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
and its works for me :)
The best way to handle images throughout all web browsers is to use the background css property with the background-size.
However, IE8 and lower version won't support it (represent 2% of viewer in 2014)
.googlePic{
background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
background-size: contain;
float:right;
height: 19px;
}
I simply added 'alt' and it was working with without using Pseudo classes
If you change the tag to a div and not a img , content should work in firefox.
This saved me. Remember to remove alt attribute from the img or you will find the alt and the actual image in Firefox.
.googlePic, .googlePic:after{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
Adding the alt attribute to the img tag and then using content="url('...')" will work in firefox. For e.g.:
<img class="my-image" alt="myImage" />
.my-image {
content: url("...");
width: 10px;
height: auto;
display: inline-block;
}
I had the same problem recently and none of the solutions above worked for me. I have resorted to the following work-around.
I included Bootstrap in my projects and used its img-responsive class.
After that, I simply include the image using the <img class="img-responsive"> tag. It displays and scales beautifully on every browser and every viewport size.
Hopefully this is helpful to someone.
I came across the same problem, in my case I was not able to show the image using content:url(). I wanted to display waiting gif in one div. I don't know the details of Mozilla support. But it is resolved in my case by the following code.
.img_div{
background-image: url("wait.gif");
height: 20px;
width: 20px;
background-size: contain;
border: none;
}
It is working on Chrome 73 and Firefox 66.
worked for me this way.had to put file/// and then url.
file///C:/user/s/desktop.......jpg
You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.
Here is an example: http://jsfiddle.net/zBgHd/1/
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?