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.
Related
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.
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 2 inputs: they both have a width: 100%, and the second one is an absolute box:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#box1 { position: absolute }
#box1 { background: #666 }
input { width: 100% }
</style>
</head>
<body>
<form>
<input type="text">
<div id="box1">
<input type="text">
</div>
</form>
</body>
</html>
On standard-compliant browsers, the width: 100% seems to have no effect on the input inside the absolutely positioned box, but it does on the input which is not inside that absolutely absolute box.
On IE7, both inputs take the whole width of the page.
Two questions come to mind:
Why does the width: 100% have no effect with standard-compliant browsers? I have to say that the way IE7 renders this feels more intuitive to me.
How can I get IE7 to render things like the other browsers, if I can't remove the width: 100% and can't set a width on the absolutely positioned box?
Try using width:102%. It's a workaround, but it works almost perfect.
The CSS 2.1 specification says that what happens in this case is not specified. And indeed, different browsers implemented this differently. You'll find more details on this (including more cases and screenshots) on: Width property inside an absolutely positioned box.
position: absolute takes the element out of the document flow. Width automatically becomes auto when making position: relativeas far as I know.
I think you won't get around giving #box1 a fixed width (using a width property or coordinates like left: xyz; right: xyz) or the text input.
How can I get IE7 to render things like the other browsers, if I can't remove the width: 100% and can't set a width on the absolutely positioned box?
Good question. As far as I know, there is no fix for this behaviour. Setting width: auto
should help.
Some theory on position: absolute on W3C here.
When a block element (your div - #box1) is absolutely positioned, it's kinda loses its implied 100% width. Which is why the input cannot expand beyond its container (which is now of 0 width).
This may sound odd, but what happens when you try width: 98%? In the past, I found that using 100% width never had a consistent result, but 98% did.
I'd like to say that the height of a text area is equal to, say, 50% of the height of the viewport. How can I do that? A simple height: 50% doesn't do the trick.
A simple height: 50% doesn't do the trick.
No, because its parent doesn't have an explicit height. So 50% of what? Parent says ‘auto’, which means base it on the height of the child content. Which depends on the height on the parent. Argh! etc.
So you have to give its parent a percentage height. And the parent's parent, all the way up to the root. Example doc:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
The other possibility if you don't want to have to set height on everything is to use absolute positioning. This changes the element that dimensions are based on from the direct parent to the nearest ancestor with a ‘position’ setting other than default ‘static’. If there are no ancestor elements with positioning, then dimensions are based on the “Initial Containing Block”, which is the same size as the viewport.
Finally, there's the trivial problem of ‘100%’ being slightly too big because of the additional padding and border applied to textareas. You can work around this by:
compromising on something like 95%, or
setting padding and border to 0/none on the textarea, or
using “box-sizing: border-box;” to change what ‘height’ means. This is a CSS future soup feature which requires many additional browser-specific restatements (such as ‘-moz-box-sizing’).
Here is a little example of a textarea which takes exactly 50% of the viewport height using the CSS3 vh viewport unit which is
Equal to 1% of the height of the initial containing block.
So if we set the height of the textarea to 50vh, it will get half of the body height:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}
<textarea></textarea>
It's pretty good supported by the different browsers, except for Opera mini and partial support in IE.
I think you need to use javascript in some way to do this. Handle the resize event, and set the text area to be that many pixels.
You can do it if you set display:block. But in html 4.01 strict you must define cols and rows, but I think you can override them with css.
HTML and CSS aren't so good at doing this kind of thing with heights. They are definitely more about scrolling vertically through a free-flowing page. I think JavaScript is likely to be your most complete solution, as FryGuy says.
While I do not have all browsers to test this in, it appears as though most accept simply specifying the height should work.
I tested this in Internet Explorer 7, and Firefox 3.0.
Simply use the following code:
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
What browser(s) were you having issues with?
This was probably not around when this question was asked, but CSS Values and Units Module Level 3 includes viewport-percentage lengths. It seems not to be supported on mobile browsers except iOS, though.
Try remove
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">