HTML/CSS IE Not displaying my dropdown menu z-index related - html

For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}

OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->

I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.

Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!

Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}

Related

UL element rendering differently in Firefox

It appears that a ul element is rendering differently in Firefox than in Chrome and Safari. My site is Double Enders, and the ul element I am referring to constitutes the top menu (in devices above 1000px wide). As you can see, in Firefox, there is extra space above the menu, causing the entire middle section of the page to drop down. There is no such problem in the other browsers.
If I put overflow:auto on the parent div of the ul and then use position:relative and top:-20px, everything is aligned properly in FF, but not in the other browsers.
How can I get the menu to render consistently across browsers? And what is happening to cause this issue?
Certain browsers have different styling; Chrome, Safari, Firefox, Internet Explorer, Opera, and other browsers can all render things differently. Check out this answer, which explores using CSS resets (Normalize.css in this case). It takes away those subtle differences so that you can develop on one browser and feel confident that your site will look the same on other browsers.
You don't clear your floats in your middle column's menu. Clear them like so:
ul.menu::before, ul.menu::after {
content: "\0020";
display: table;
clear: both
}
and then add no margin to the ul
ul.menu {
margin-top: 0
}
It lines up your columns nicely.
I had included the webkit browser prefixes where applicable in my CSS, but I had not actually used the CSS. So, while I had
ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
}
which eliminated the top and bottom margin on the ul on Safari and Chrome, I did not adjust the margin on FF. Adding
margin: 0;
padding: 0;
solved the immediate problem.
hhoburg's answer would be a useful way to proceed if I was just starting the project.

Chrome iframe rendering bug

I have just encountered the strangest bug I have ever seen.
You can see a demonstration here: Fiddle
I have an iframe from google maps, wrapped in a div that has the following styles:
.container {
width: 600px;
background: red;
/* Problematic propeties */
box-shadow: 0px 40px 20px 0 blue;
perspective: 10px;
overflow: hidden;
/* ---- */
}
The only style the iframe has, other than default is display: block.
The issue is, that the iframe gets moved, depending on the value of box-shadow of its parent div. From my experiments i found out that it gets moved to the right by the: box-shadow blur - box-shadow x-position. Its a little hard to explain so i encourage you to take a look at my fiddle.
If i remove any of the css propeties that are in the "problematic propeties" comment, the issue goes away. My question is: Is there any way to fix this issue, without removing any of those propeties?
The issue is only visible in Chrome - Firefox and IE are fine.

Remove Select arrow on IE

I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn't work on IE9.
.styled-select select
{
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}
SEE Fiddle on IE9.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer.
In IE9, it is possible with purely a hack as advised by #Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.
I would suggest mine solution that you can find in this GitHub repo.
This works also for IE8 and IE9 with a custom arrow that comes from an icon font.
Examples of Custom Cross Browser Drop-down in action: check them with all your browsers to see the cross-browser feature.
Anyway, let's start with the modern browsers and then we will see the solution for the older ones.
Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow.
To do so, you have to reset the browser's default style for the select tag and set new background rules (like suggested before).
select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}
The appearance rules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place.
The background rules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).
In order to maintain the correct cross-browser behavior, the only other rule that have to be left in place is the outline. This rule resets the default border that appears (in some browsers) when the element is clicked. All the others rules can be easily modified if needed.
Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
This is the harder part... Or maybe not.
There is no standard rule to hide the default arrows for these browsers (like the select::-ms-expand for IE10+). The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the select CSS rule for more details about the inline SVG used).
The very first step is to set a class that can recognize the browser: this is the reason why I have used the conditional IE IFs at the beginning of the code. These IFs are used to attach specific classes to the html tag to recognize the older IE browser.
After that, every select in the HTML have to be wrapped by a div (or whatever tag that can wraps an element). At this wrapper just add the class that contains the icon font.
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
In easy words, this wrapper is used to simulate the select tag.
To act like a drop-down, the wrapper must have a border, because we hide the one that comes from the select.
Notice that we cannot use the select border because we have to hide the default arrow lengthening it 25% more than the wrapper. Consequently its right border should not be visible because we hide this 25% more by the overflow: hidden rule applied to the select itself.
The custom arrow icon-font is placed in the pseudo class :before where the rule content contains the reference for the arrow (in this case it is a right parenthesis).
We also place this arrow in an absolute position to center it as much as possible (if you use different icon fonts, remember to adjust them opportunely by changing top and left values and the font size).
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
You can easily create and substitute the background arrow or the icon font arrow, with every one that you want simply changing it in the background-image rule or making a new icon font file by yourself.
In case you want to use the class and pseudo-class:
.simple-control is your css class
:disabled is pseudo class
select.simple-control:disabled {
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}

Transparent background rendering White in Internet Explorer

In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.

Problems with transparency in CSS

Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent.
However when I use opacity: .6; Everything in the div goes see through.
Is there any way to fix this so it works in safari, IE, and firefox?
No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:
1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)
2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.
.outer {
position: relative
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Or whatever */
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
<div class="outer">
<div class="background"></div>
Content
</div>
Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.
As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).
Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:
http://jsfiddle.net/zV4BR/
you should use both
opacity in css and
filter:alpha(opacity=60);
for ie and stuff
use this method
How to give cross browser transparency to element's background only?
use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/
you will have to set background on inner elements also.
Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
it should be
opacity:0.6
beside that opacity works differently depending which web browser you use