I'm trying to place two divs over the top of an existing website, as in this image:
I can do this fine in firefox/google chrome etc, but it doesn't seem to work in IE.
Could someone point me to a simple example of how to do this?
put the following code in your head and change position:absolute back to position:fixed in your css
<!--[if IE]>
<style type="text/css">
.black_overlay {
position:absolute;
top: expression(document.compatMode=="CSS1Compat" ? document.documentElement.scrollTop+"px" : body.scrollTop+"px");
}
</style>
<![endif]-->
Your only option is to really emphasize using z-index.
Z-Index is like applying layers to your HTML, in which case you may have a layer on top, in the middle, and on the bottom. Hence 3 divs positioned like layers.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here I updated the css. Instead of position:absolute; I used fixed so that is doesn't move with scrolling.
http://jsfiddle.net/5V288/9/
Related
This is my site
www.landshoppe.com
My links and searchbox in the over laying divs of the header portion with background image is not clickable in IE 8. Is this an inherent IE Z-index problem ? (Though I have given a Z-index 5 for the searchbox div). Or is this a position issue ? (I have assigned position relative to the div).
The page validates in W3C validator. So no html errors.
Where is the glitch ?
You should create a specific stylesheet for IE. Reference it using conditional comments like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" />
<![endif]-->
And add in the CSS - for the clickable area - these attributes:
A background color (any color, it does not matter). E.G.: background-color: #000000;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
This solved it for me!
#Consta Gorgan I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
Been browsing the questions and Googling it but I can't seem to find a fix for this issue. The layout looks perfectly fine for the Grid anywhere else except for IE7 (surprise).
http://lalive-branch.aeg-webdev.com/
The boxes should all be within 5 pixels of each other, but in IE7 the spacing below divs get botched up completely. There are a few fixes I put to try to minimize the display differences between browsers, but this one just boggles my mind completely.
Any insight or help would be greatly appreciated. Please ignore the jquery error and the likes :), thank you.
Remove: clear:both inside your css code for:
.gridRow {display:block; /* Remove - clear:both; */}
Then it will work on all browsers.
you have to use script for solve this error of css.
in your core you have to create one javascript and this script you have to create one method like as below.
if(browser_version == 7 || browser_version == 8){
document.getElementById("your_div").style.padding = padding as you want.
}
else{
document.getElementById("your_div").style.padding = default padding.
}
i think this can help you for Browser CSS Error.
You have to make few changes inside your CSS:
1) Inside .gridRow remove clear: both then you should consider adding overflow attribute and put all margins and paddings inside .gridRow insted of .gridBox. It's better practise because you need to change only one class when your layout get changed.
.gridRow {
/*clear: both;*/
display: block;
margin-top: 5px;
overflow: auto;
}
If you want IE7 styles only, you can add the following to your tag:
<!--[if IE 7]>
<style type="text/css">
.myIE7onlyClass {/*styles here*/}
</style>
<![endif]-->
I'm having an issue with IE9 showing horizontal scroll bars on a printed page even though the contents of the page fit entirely. I've tried several things to remove them in my print css. Has anyone else had this issue and found a way around it?
I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.
overflow:hidden !important;
I have had this issue several times with IE in the past. It is usually a margin issue. Different browsers calculate margins differently. How are you positioning the elements? Do you have a fixed-width wrapper around the content or does the body expand to the browser width?
It's really difficult to pinpoint the problem without the actual css code.
I would suggest removing any negative margins you have (IE does not like these), and check to see if you have any right margins on elements that are unnecessary.
#media print{
.dont-print
{
overflow:hidden;
}
}
dont-print is just a class name which i've used before, changed that to whatever you need
Use following code on body tag in JavaScript function print:
printWin.document.write(
'<style>div {overflow: visible !important; height:auto !important;}</style>'
);
Are you sure you set the right stylesheet media type? Like:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />`
And try the following in your print.css:
html, body { overflow-x: hidden; }
I'm using this sticky footer in my website:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
It is fully working in Firefox, Chrome, IE7, but not IE8. In IE8 the scrollbar appears but doesn't work, and I don't have any other way to move down. I'm using the conditional statement that appears in the web:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Sorry, but I can't post an address, I don't have a server online right now with the web.
Thanks to Alec,
I decided to retry to move the code back to the basics. But this time, I consider that maybe it was related to other CSS I had in my website, bingo!
Finally found the CSS rule that was making the scrollbar unusable. I was using a gradient color for the background of the body:
body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52a0d6', endColorstr='#024f7c');
}
Now I'm using an image for the background and the scrollbar is working and the sticky footer is right where it should be.
I'm building a page which works fine in all browsers except IE6, where a small space appears below the cart. The background also has a gap in IE6, so I'm wondering what might be causing that, as it's probably related to the main issue.
If anyone could help I would really appreciate it! Many thanks.
Hi add this in your style file
#navigation {
width:736px;
height:auto;
background:url(../images/nav.gif) no-repeat;
float:left;
}
Have you tried adding a ie6 only stylesheet? Add this to the head tag and then add the appropriate styles to the css document and they should only apply to ie6.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6_xxx.css"><![endif]-->