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;
Related
I'm using a filter to the older IE on my sprite, so I used the filters.
The code below isn't working. I know I made a mistake I don't know wich one / where:-/
On Chrome it's ok, the properties is disabled but in IE, the background-size isn't working.
If I disable the "background-size" in Chrome, I see the same BAD screen as in
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact{
background-position: 0px -350px;
}
Thanks for your help :-)
background-size: 60px; wasn't applied on IE, so I deletes this line and I made a picture of 60px. This solved my question.
This question already has answers here:
How do I make background-size work in IE?
(8 answers)
Closed 9 years ago.
I'm using this class and this id (for instance) to add a picture on one div :
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
}
#contact {
background-position: 0px -60px;
}
With Chrome, everything is ok, all looks great and all properties are shown in the element inspector, but in IE, there is a problem.
On inspecting the page with a developper tool on IE, I saw that "background-size" doesn't appear.
I know that it's that problem that gives me the trouble because when I hide it on chrome I have the same page than in IE.
So my question is: How can I force IE to apply this background-size?
THANKS!
EDIT :
So even with the filter, it doesn't seems to work:
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact {
background-position: 0px -60px;
}
Solution :
Edit the pictures size manually and forget the background-size. All is okay!
For IE you have to use a specific css filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale')";
Or use jquery to achieve the effect, like it is explained in this link.
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?
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.
I'm having some trouble with my css and I was gonna post on stackoverflow but I thought maybe this would be the right place to post seeing its strictly a css problem. I have a jquery cycle plugin tor rotate images and I want to have a block of text to the right of the the rotator but I don't want it to run into the rotator and I also would like it to not crop of when the page is shrunk within reason. right now if you pull the browser window in to the left it just slides under the rotator I would much rather the rotator move to the left as well until it can't anymore then the text should start expanding downward if that is even possible. but I cant seem to figure it out.
here is the site http://falconesuits.com/
hdere is the css (well at least the important part)
#story2 {
margin: 100px;
width:300px;
float:right;
color:#FFF;
}
.slideshow {
width:300px;
height:450px;
background: #cc9966; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */
min-height: 100%;
border:10px;
border-style:groove;
border-color:#939598;
margin-left: auto;
margin-right: auto;
top: 100px;
}
One approach that might help is to restructure your html by putting your story and slideshow in the same div container:
<div id="content">
<div id="story2">...</div>
<div class="slideshow">...</div>
</div>
Then styling #content so that it has the fluid margins instead.
#content {
overflow: hidden;
margin: 0 auto;
width: 650px;
margin-top: 100px;
}
#story2 {
width: 300px;
float: right;
color: #fff;
}
.slideshow {
float: left;
width:300px;
height:450px;
background: #cc9966; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */
min-height: 100%;
border:10px;
border-style:groove;
border-color:#939598;
}
As for expanding the text downwards, you could try setting your #story width to a percentage instead of a fixed pixel value, I guess.