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.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#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;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.
Related
This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:
<nav class="top-menu">
There is one pressing issue:
Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.
Any help here will be greatly appreciated!
I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:
.top-header {
padding: 0 0 5px 0;
display: inline-block;
margin-left: 20px;
position: relative;
+ line-height: 28px;
}
And it currently seems same for me in IE and Chrome.
Updated fiddle
add
height :136px \0/;
at the end of .top-header
and the problem will be solved check
jsfiddle
You may use some 'tape' to fix this in IE. :)
Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid;
http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/
It doesn't explain much what layout is playing about.
(CC included : http://jsfiddle.net/SKJvv/10/ )
Alright,
I feel dumb asking this but I am having issues with a stylized anchor tag and displaying both a repeating background image and text in IE7/8. My code works fine in Firefox, IE9, Chrome, and Safari but in IE7/8 the text will not show up.
My PHP is outputting something like this:
<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>
My CSS for this element looks like this:
.anchorButton {
background-image: url("./images/button-gradient.png");
height: 52px;
background-repeat: repeat-x;
background-color: transparent;
background-position: 0 0;
float: left;
line-height: 52px;
font-size: 1.4em;
color: #fff;
border: 3px solid #a8a8a8;
margin-top: 10px;
padding: 0 15px;
z-index: 900;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
text-shadow: -1px -1px #707070 !important;
display: block;
}
To see what I am talking about you can visit: dtelepathy.swampedpublishing.com. If you look at the site in Firefox and IE7/8 you will see that the Orange 'buttons' that I made out of anchor tags do not show the text in IE.
I am willing to give whatever a shot as I am REALLY unsure what is going on here.
I don't have IE7/8 to test, but this sounds suspiciously like a variation on the IE peek-a-boo bug. Maybe some of the changes suggested around the interwebs will help.
I've just written a guide for you. Make sure that you follow these steps, and -perhaps- edit your question to be more specific. Currently, we can only guess and find the problem by trial&error.
Steps to debug your CSS code (yes = next step, no = see below):
Ensure that the problem is caused by CSS
Disable JavaScript. Does the problem persist?
What's the source
Temporary disable all specific selectors, eg: <a class="foo bar"> > <a x-class="foo bar">. Did the problem disappear?[2]
Which selector?
Add all selectors, one by one. When a newly added selector is causing problems, disable all selectors, and use the same selector to make sure that the problem is caused by this selector only.
Which property?
Disable all lines, and add enable a few lines (block) of the CSS code. When the problem shows up after re-adding a block, remove the just-added block, and add the properties back, one by one.
Cause found
Use Google, Stack overflow or the Mozilla Developer network to find documentation about the property. Perhaps, you've used the property in a wrong way.
[2] The problem is caused by a tag selector, or an inherited style.
I can see the text in the orange buttons just fine in IE8 on Win7.
Your hover for the border color doesn't work on them though in IE8, but that is because of the VML used for the rounded corner effect. I have experimented a lot with VML and it causes tons of problems for element layouts.
I would check to see if removing the border-radius-5 class fixes the problem. That way you can see if that is causing the text problem you are seeing.
This is a followup to my previous question. It dealt with a rendering issue in Firefox. After that issue was fixed I obviously tested the design in other browsers. And obviously - how could it be different - I encountered yet another rendering issue, this time in IE7.
Image in Button rendering issue in Internet Explorer 7 http://b.imagehost.org/0451/NastySpace2.png
The former of the above elements is a button containing an img. The latter is a div containing an img.
In the former case (the one with button and img) there is a space between the border of the img and the border of the button. I want to get rid of it.
CSS:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
/* this is a fix for one of the padding issues in IE7 */
button {
overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Please help me, I'm starting to feel really pissed to be honest. This is the third padding bug I encounter with this button tag...
Edit: I am giving bounty on this question, to either get a more at-the-root fix for the IE7 problem or for tipoffs about other browser-bugs related to <button>s. I want to have a button that looks perfectly, pixel for pixel the same in all major browsers. (PS: IE6 is not a major browser.)
Well, it seems that I must conclude that there is no fix for this one - at least no known fix. Thus I saw no alternative then manually removing this space (using negative margins).
Here is my complete list of fixes that makes the button element look the same in Firefox, Safari, Chrome, Opera, Internet Explorer (IE9, IE8, IE7, haven't tested IE6):
button img {
display: block; /* required to get rid of bottom space in many browsers */
*margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}
button {
overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
border: 0; /* remove inner focus from Firefox. The inner focus takes up */
padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}
Compressed version:
button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}
Removed line breaks:
button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}
Have fun with consistent buttons!
So display:block doesn't fix it? How about vertical-align:bottom for the img? Can you setup a testcase on jsfiddle.net?
EDIT: display:block on the button seems to do it: http://work.arounds.org/sandbox/48/run
Edit #2: Stubborn huh.. does this work? http://work.arounds.org/sandbox/48
Have you tried adding width:auto to the button?
button {
overflow: visible;
width: auto;
}
I often find myself cursing at buttons and then solving the problem by displaying an image with an onclick Javascript submit.
Hackish? Perhaps. But it's an acceptable solution for the 100+ major credit card websites I did for an international bank....and to date, I haven't found a more picky client.
I get around this issue by using an <input type="image" /> instead of a <button /> and using javascript to modify the image shown when the mousedown and mouseup events is triggered.
Try it, it'll save you a big headache.
I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.
On this page there is a list of footer links that have a little background image to place the dash before each one. This works fine in FireFox but in IE 6, 7 & 8 the background image for the item that spans 2 lines (Workplace Giving Employers) disappears. Why is this & does anyone know how to fix it?
I've seen that before and although I don't know the reason it happens, you can fix it by changing your CSS to this:
#mainlevel-nav li {
background: url(../images/arrow-vline.gif) no-repeat 0 3px;
}
The 3px is the vertical position of the image, so you'll need to adjust this until the graphic looks centered.
Since this is only needed for IE, I would recommend putting this in an IE only stylesheet since 'left center' is a better declaration.
Edit: Turns out this is a hasLayout bug. Here's the CSS that'll do the trick for you:
#mainlevel-nav li {
background: url(../images/arrow-vline.gif) no-repeat left center;
zoom: 1;
}