I have an image gallery, with captions across the bottom (upper image). The captions use position:fixed; bottom:0;, and works in every browser but IE, even the latest version (11.096…). The caption is fixed to the top of the screen, instead of the bottom (lower image).
I tried some of the suggestions I found while researching this on my own:
Verified the correct doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Added <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Added expressions to my CSS:
position:fixed;
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
What am I missing here?
Try using position: expression(fixed);
Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.
Related
i tried to fix this one myself unsuccessfully.
I am trying to place a flash element in a fixed position in the bottom .
#ticker{ position: fixed; bottom: 0; right: 12%; z-index: 6000 !important;}
and it workes in FF and chrome but not IE.
i tried changing the doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
but it didn't work .
I read something about placing a fake element but I didn't quite got it..
Got your fiddle working, you don't need to change your DOCTYPE.
Here it is http://jsfiddle.net/xpjyY/1/
You forgot the closing bracket for your "object" in the css.
object[width=150]{z-index: -5 !important;}//Forgot the closing bracket
Try using this doctype instead:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Somehow someone in Microsoft thinks that it's a good idea forcing developers to use Strict doctypes if they wish to use position:fixed. It's cool or something.
UPDATE: this article describes several other solutions, might be helpful.
As far as i can tell it does work in IE9(works on my desktop). See this jsfiddle. I don't have IE8 at reach so i don't know if it will run in it.. (my guess is that it won't.. because microsoft... o,o)
Anyway.. hope it helps.. =)
Only replace your CSS code with this
object[width=150]{z-index: -5 !important;}
#ticker, #main_Ticker{ position: fixed; bottom: 0px; right: 12%; z-index: 6000 !important;}
You need to close
object[width=150]{z-index: -5 !important; this line
DEMO http://jsfiddle.net/xpjyY/2/
Your corrected Code:
object[width=150]{z-index: -5 !important;}
#ticker, #main_Ticker{ position: fixed; bottom: 0px; right: 12%; z-index: 6000 !important;}
You needn't change ANYTHING in the HTML.
http://www.howtocreate.co.uk/fixedPosition.html
This should give you some insight as to how fixed positioning works, it's a boring, but necessary read.
You can use the expression in IE to achieve the same as position:fixed in other browsers. (So you need two different CSS files with <!--[If IE]><![endif]-->)
Just set the position to absolute and add the expression:
#fixeddiv{
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
Reference:
jsFiddle with Active Ticker Demo
Solution:
SWF option allowscriptaccess was required to allow proper operation of your SWF ticker file. Horizontal centering of the flash ticker was done using pure CSS wrapped in a couple of div's in position:fixed so it's always pinned to the bottom.
Compatibility:
This jsFiddle is done in HTML5, not using DOCTYPE Scrict and works in IE8 without issue.
For IE7, use separate style sheet and change bottom:0; to bottom:5px; for proper operation.
Screenshot:
Status:
Screenshot provided since jsFiddle.net is experiencing intermittent outages for the last 2 days.
Based on my CSS, all Browsers including IE7 show my bottom bar correct and fixed, all the time.
.bottom-fixed {
position: fixed;
bottom: 0;
margin-left: -235px;
min-width: 1160px;
max-width: 130em;
width: 100%;
}
However there is something strange in IE8. If you resize the browser window height with help of your right corner at the bottom (the way you can change a windows width and height at the same time), all is fine.
But if you resize the window height grapping the top or bottom of your browser window, the bar/div stuck at the position like it would when position was absolute instead of position: fixed.
Any idea how to fix that?
(Using Doctype for HTML5)
I couldn't fix that with the parent float solution from this thread Umer mentioned.
So I fixed it with a simple Javascript script which applies position: fixed all the time when the window gets resized.
HTML
<!--[if IE 8 ]>
<script type="text/javascript">
$(window).resize(function () {
ApplyPositionFixed();
});
</script>
<![endif]-->
Javascript
function ApplyPositionFixed() {
// Check if element exists
if ($("#bottom-bar-content").length) {
$(".bottom-fixed").attr('style', 'position: fixed;');
console.log("Window resized");
}
else {
console.info("No element changes on Window resize");
}
}
However. I'm ready for better solutions.
There is another solution: setting height explicitly on the parent element. For example height: 1% or height: 100%.
Had the same issue, but the fix in my case was that the parent had position: relative. Once I removed that, this issue went away.
for fixed position in IE 8 - ,
DOCTYPE is very very important.
one of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or
<!DOCTYPE HTML>
And its very very important that
those be in first line.
My knowledge of css is very limited. In a larger context, I need to do something like the following:
Inner div goes inside other divs. I am trying to position the inner div, offset from the browser window and with a size that is certain percentage of the browser window. So I apply the following css to the inner div
.abs_pos {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: yellow;
z-index:1002;
overflow: auto;
}
This works on Chrome and Firefox. But on IE (all version), the inner div's width becomes a percentage of the immediate outer div and not that of the browser window, while the height appears to be determined based on the content of the inner div.
I have the link here to the sample html file.
http://orissaclassifieds.com/pos.html
So how can I make this work? Thanks for your help.
Your current code should work, but you are using an invalid/incomplete doctype which is sending IE into quirks mode.
For HTML4.01 Transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, a much shorter/simpler doctype to use is HTML5's. It will trigger standards mode in all browsers:
<!DOCTYPE HTML>
You can make it work in all browsers by making the parent div have a css rule:
position:relative;
excuse me, but i don't understand why you use percentage for every parameter, also width and height inside another div... unless the main container is the body page. In your case i should use pixels, and if the div is placed into another div you can use relative instead of absolute...that is relative to the container where you're into...hope this helps
i am working on my website http://bookmyshirt.co.cc/help/index.html but its background is not align in internet explorer but it is working fine in firefox.
Please help me out.
Try adding a DocType.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I also had a look at your styles. If you replace the styles on #maincontainer:
left: -480px;
margin-left: 50%;
position: relative
with
margin:0 auto;
width: 960px;
Everything should line up. If it doesn't, use IE's developer toolbar to trace the styles. Much like Firebug.
Edit:
Please note, you must set a width on the element, otherwise margin:0 auto won't have any effect.
I have a div with a pretty curve background image so it does rounded corners on all browsers.
The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.
Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
}
Is there some IE 'gotcha' regarding height that I'm missing?
Here are some additional details:
The line does not appear in FF or Chrome.
There's little javascript on the page, nothing that would impact how this renders.
Other changes to the css get applied to the div.
if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add
line-height: 0;
font-size: 0;
Remember to set the doctype so the browser doesn't go into quirksmode
First line of your html document should be
<!DOCTYPE html>
You could also use a more traditional xhtml doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)
Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)
Try applying overflow:hidden to your CSS
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
overflow:hidden;
}