I have this page:
http://bable.co.il/static/index1.php?page=safety&id=7
when you hover over articles, you will get a sliding menu.
this menu comes under the the article it self.
I tried to fix the z-index and the position of the menu with no success.
this is for explorer 8
I posted the link because I thought you could check the css by your self and figure what is going on.
anyway, here is the css of the ul that shows up:
.topnav{
display: none;
position: absolute;
z-index: 10000;
border: 1px solid black;
}
and here is the css of the element that comes on top of the menu:
.ac_subitem{
width:90%;
right:6%;
position: relative;
margin-top:1px; /* animate to -200px */
/*background: transparent url(../images/tpl/bg_menu.png) repeat top left;*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
can anyone help please?!!
You're totally missing the DOCTYPE in your page which in turn is rendering it in Quirks Mode. Add a proper DOCTYPE and it should work ok.
<!DOCTYPE html>
To use z-index your div has to be positioned absolute in your css. Did you do that?
Related
I have an ul with several li.
I use this id on the ul.
#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
The contents of the ul receive a gradient treatment just fine in Chrome but not Safari. In Safari, all of the li are "invisible". If I inspect and then disable the "-webkit-text-fill-color: transparent;", the text will become visible albeit without the gradient (obviously).
Thoughts?
Here is the JSfiddle: https://jsfiddle.net/s96bzcua/
Kind regards,
I had this same issue. Turns out it was due to the display property. For whatever reason, Safari needs the display set to "inline" or "inline-block", but not "inline-flex".
So for me this meant changing From:
display: flex;
To:
display: inline;
To someone coming to this, just drop -webkit-text-fill-color: transparent; as it's not a standard and is not on a standard track.
Use instead color: transparent and wrap everything in an #supports to prevent color transparent from being used in case background-clip: text is not supported.
Here's an example: https://jsfiddle.net/0oeftdbk/5/
––
As per the 🐛 bug of the gradient not showing clipped inside the text on Safari, it looks like that if it's applied on the parent element and not directly to the children, all the children need to be display: inline or a inherently inline element such as span.
You can use an overlay with a gradient background, disable the interaction with the overlay and position it at the bottom of the list.
Take a look at this fiddle:
https://jsfiddle.net/s96bzcua/1/
#overlay {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 99%, rgba(255, 255, 255, 1) 100%);
width: 100%;
pointer-events: none;
height: 50%;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 99;
}
Use
pointer-events: none;
to disable all interaction with the overlay and wrap everything in a div with relative positioning so you can place the overlay at the bottom of the list.
It might sound weird but:
replace transparent with rgba (0,0,0,0.0001)
It doesn't work with rgba (0,0,0,0)
if you only have the ascii code on your Element, maybe you need a full-width character.
like: I need show transparent text color + ' '
I have a wordpress website which is facing compatibility issues in Internet Explorer 8. http://www.sunsetbaycharters.net
The navigation menu is not loading properly in IE8 & IE7.
Bad Nav in IE8
Also, the content boxes in my site are not transparent in IE8. I understand that is because I'm using RGBA and I need to know how to fix it.
Please tell me how can I fix the navigation menu in IE8 & IE7 and the rgba transparent box.
CSS Code for Nav Menu:
div#top-menu, div#top-menu.et-fixed {
background-color: white;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1000;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8);
height: 80px;
text-align: center;
}
For the content box background transparency you'll have to use a background image (as IE8 doesn't support transparency). Just make a 5x5 square PNG of the color/transparency you'd like to use and set it as a background repeat. For example:
.target-element {
background-image: url('images/your-transparent-tile.png');
background-repeat: repeat;
}
As for the box spacing issue, you'll have to give us a look at your CSS. It'll probably be something to do with IE8's lack of display: inline-block support.
It is bit weird scenario to explain it in words. The footer of site I'm working on looks good on most of the browsers except IE7. Below are the screenshots will give you the idea.
IE8/FF/Chrome
IE7 (moved half screen right)
The footer has following CSS. When I remove the CSS it displays fine.
#footer-holder
{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
*border: none;
z-index: 10000;
height: 30px;
/* For WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(0,100,255,0.70)));
/* For Mozilla */
background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,100,255,0.70));
/* For lt IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF);
/* For gt IE8 */
background: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF)";
}
I am tired to making it compatible with IE7. Any idea what might be causing the issue?
Resolved the issue. I had to mention left: 0px;. And now it is looking great on IE7. :)
Try <!DOCTYPE html> at the top of your html..
Remove the * next to *border: none;
My CSS code below is working fine in Chrome, but isn't working in Firefox. I think it might just be a syntactical difference but I can't figure out what is going on. Are there any mistakes in my CSS code below?
#framed_source {
background-color: white;
display: block;
height: 97%;
width: 100%;
padding: 0px;
}
#grey_cover {
position: fixed;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
background-color: #3F3F3F;
/* Transparency is applied through the transparent class */
}
#popup_window {
background: #D0E9F3;
visibility: visible;
border: 1px solid #666;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
}
.with_frame {
position: absolute;
width: 600px;
}
#popup_window_content {
overflow: auto;
color: #1F313E;
font-family: Calibri;
max-height: 200px;
}
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
Basically I have a popup window that is displaying on top of an iframe. In Chrome it does this correctly, in FF it displays the popup beneath the iframe. Any ideas? I think it has to do with absolute / relative positioning.
Picture of Firefox -- Incorrect CSS
Picture of Chrome -- Correct CSS
I also created a JSFiddle for this CSS with the corresponding HTML. I am trying to get the blue box appearing below the frame to appear centered in front of the frame.
So, in the end this is what was wrong.
Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
Since html and body were just hanging out there, they didnt stretch all the way to the bottom and restricted iframe from going further as its height was set with percentage.. ( This is something i do remember fixing at some point.. but it was already past midnight when i was checking into it, so who knows where that disappeared :D )
http://fiddle.jshell.net/CH6ny/6/
I don't exactly know why, but when I upgraded to Firefox 5 the issue resolved itself. Thank you everyone for all your time anyway!
To get something to appear on top of another, you will need to set the z-index values and I think also set the position.
For the element that you want to be on top, set the z-index value like this:
#idOfTopElement {
z-index: 1;
}
#idOfNextElement {
z-index: 2;
}
You might need to add position: relative; or position: absolute; to one or both of those depending on what position you are using, but I can't remember for sure.
If you are not completely against a javascript/jQuery solution, here is an option that might work. I chose to do the top and left adjustments onload, but it would make more sense to do it when you call the creation of the popup_window:
http://jsfiddle.net/CH6ny/4/
It worked in Chrome, FF, IE, and IE quirks mode.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 7 years ago.
I have this registration form box, and i really like how the background gets opacity, transparent with 25% (85), but then i notice that the text and the form elements also gets darkened alittle and such, so i wonder how to do this only with the border and background and not with the stuff inside the box?
#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
opacity: 0.85;
-moz-opacity: 0.85; /* older Gecko-based browsers */
filter:alpha(opacity=85); /* For IE6&7 */
}
The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }
The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.
#regForm {
background: rgb(200, 54, 54); /* fallback color */
background: rgba(200, 54, 54, 0.5);
}
And for IE...
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
Personally I'd go with the first option because it's less of a hassle.
RGBA is the way to go if you're only looking for a css solution. It is possible to use a solid colour as fallback for the old browsers which can't use RGBA.
.stuff {
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, 0.5);
}
You can also fallback on an image:
.stuff2 {
background: transparent url(background.png);
background: rgba(0, 0, 0, 0.5) none;
}
Here is all you need for getting this to work in all evil versions of IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
Your best bet will probably be to use semi-transparent PNGs for your background, or to set the colors for the background and border using RGBa. PNGs will work well if you don't mind the extra markup you'll need to make a flexible-width container, but they also aren't supported in IE6 (if that's a concern).
RGBa is less widely-implemented across browsers, but if the transparency is only used for visual flair, then it's a good place to use some progressive enhancement.
For RGBa, you'll need to add an extra line as a fallback:
#regForm {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
border-color: rgb(24, 17, 12);
border-color: rgba(24, 17, 12);
}
Any browser that doesn't recognize the RGBa declaration will simply use the plain RGB.
CSS-Tricks article on RGBa across browsers
No need to do all those stuff like no need to apply positions on a div then opacity, here is very simple way to achieve it, background: rgba(0, 0, 0, 0.6);
only you have to use background color with opacity value.
Cant't be done: Any child elements will inherit the parent's opacity.
I your case it's easy though - just use two divs. Have the background image in one and apply the opacity, and put the content into the second one. Use position: absolute and z-index to place them on top of each other.