I'm working on this site http://zap3d.com/ and I have a problem: With Internet Explorer (IE) I can't click the two links (Upload and Download) but with Chrome and Firefox I can.
Here is my CSS for Upload button
.upload_button {
position: absolute;
left: 47px;
bottom: 28px;
width: 237px;
height: 41px;
border: none;
background: transparent;
}
Thanks
Some versions of Internet Explorer may not register clicks on elements that have a transparent background, and no content within. In these cases, set your element's opacity to zero:
.upload_button {
opacity: 0;
}
You'll get the same invisible element effect, while maintaining cross-browser compatibility.
Related
This is a website that I and some friends of mine are building for their youtube channel.
I got this popup code from W3schools
I have the popups working but I want the popups to be 320px wide instead of the 160px and aligned with the image. The problem is when I widen the popup to 320px and try to center the popup onto the image, it never works out. All of my solutions have either moved the popups further to the right OR have messed with the actual layout itself.
What I've tried - after setting the width to 320px, in the CSS I've tried deleting the margin-left property and/or setting it to 0px, I've tried deleting the left property and/or setting it to auto, I've deleted the padding, I've messed with the position property in both the .popup and .popup .popuptext but alas, nothing has worked. They have either messed with the layout itself or just moved the popups further right. I've also tried researching online for the solutions but I haven't found a solution because I think that this problem is too specific, since I got the original code from W3schools that nobody has addressed it before and posted it online. Either that, or I'm still just too new to be able to research the answer specifically enough. Also, I'm still trying to wrap my head around the position property. I think the problem is in the position property because when I inspect the elements, I see how much positioning there is other than margin or padding, and I want to say that's what is throwing things off.
Here is the relevant CSS code-
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
And here is a link to the actual site so you guys can see what's going on and check out the source code behind it.
The Site
Thank you so much. Any and all help is greatly appreciated. To see the popup, click the episode title.
You need to remove the margin-left.
After you do that, set your desired width and define a property called transformwith a value of translateX(-50%);
Leaving you with:
.popup .popuptext {
visibility: hidden;
width: 320px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
I don't know if you are aware but Bootstrap already has its own popover.
On a side note, you should not be looking at W3Schools, it is not a good source.
Here are some better resources:
Plain Javascript
CSS Reference Codrops
It seems that if you remove the left: 50% and margin-left and then add width: 320px your problem is gone. Try not to just copy-paste from W3Schools as it's very outdated. A more reliable source is MDN.
you could always use bootstrap class text-center
http://getbootstrap.com/css/
I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.
I have a pop-up, (what should be modal), dialogue for messages to the user (#modal). I've added a "background" element (#blinds) to obscure and prevent the user from interacting with other elements on the page. This works great in Firefox, not so much in IE8.
In IE8, I can click around, edit input fields, and submit the form. Is there a way to prevent this with HTML and CSS? Do I need a jQuery solution?
CSS;
#blinds {
background-color: rgba(0, 0, 0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1000;
}
#modal {
position: fixed;
z-index: 1001;
display: none;
}
HTML;
<div id='blinds'></div>
<div id='modal'>
<h1></h1>
<span>X</span>
<p></p>
</div>
Here's a jsFiddle that illustrates my problem with IE8. http://jsfiddle.net/cAkzq/
It's the -ms-filter that is doing it. Use a semi-transparent PNG for your color overlay and it should fix the issue. Vendor tags are experimental and can be non-standard.
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property