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.
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.
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.
I've inserted a Google Custom Search Engine form inside of a navigation bar but I just can't get it to center align in Opera. All browsers are respecting the vertical alignment perfectly (yes! even IE.. wow!).
You can check it out at www.micod.cat (the site's not in English but you can easily view the Search box in the menu bar, right). Opera is pushing the form input field flush against the top and that's incorrect.
Here's the CSS for that element:
#menu li.find form div {
padding: 0;
margin: 0;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
Any bright minds to offer some insight please? Thanks a lot!
The problem is the Doctype, changing it to a strict one or an HTML one fixes it e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
The XHTML transitional Doctype means Opera renders in "Almost Standards" mode, though quite why that would affect this I don't know, - Opera Doctype Switches
I don't know why, or what's going on, but placing an before <input type="q" .. /> fixes it.
You should wait for a better answer, but if one doesn't arrive, at least this works.
It isn't the content you want to align, but the image inside the content.
#menu li.find form div img{ vertical-align: middle; }
and looking at your site you'll need:
#menu ul.nav li.find { padding-top: 10px; }
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;
}