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.
Related
I currently have a search "button" that I made sit on the side of a textbox, as shown in the picture below, this renders fine in chrome and firefox.
In IE9 it renders like this.
Has anyone ran into a similar problem? How can I get around this?
The CSS for the search button is:
.txtSearchBtn
{
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -20px;
top: 5px;
cursor: hand;
cursor: pointer;
background-image: url(../Images/magnifier.png);
}
EDIT: The error seems to have something to do with my page being rendered inside of a fancybox. IE9 is not treating inline-block the same way outside of the fancybox.
EDIT 2: Figured out the problem. My max-width setting doesn't have enough room for the textbox and the image, even though I'm moving the image -20px to the left, so IE renders it on the line above.
IE support for inline-block got a lot better in IE8+. This sounds like you are rendering in compatiblity mode, which basically means render this page like you are IE7 (or worse - Quirks mode).
Are you declaring DOCTYPE? try adding this to the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This should force it to use IE9 rendering which can do inline-block correctly.
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
display: inline;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
EDIT: If you are ONLY trying to cover your back as far as IE9 and no less, then #Porco has that covered with the correct DOCTYPE declaration.
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'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; }
With css.
Please don't refer me to another link.
EDIT
Make something always at the bottom of viewport no matter how you scroll the bar.
If you're having problems specifically with IE6 - consider using a resets script. It will make your life much, much easier. There are lots of different flavours of reset script out there, so do a bit of research and to find one that you like. Personally, I find that yahoo produce one that's fit for purpose.
The thinking behind using a resets script is:
Each browser applies a set of
default styles and properties,
before any user style sheet is even
loaded.
A lot of the differences between the
way a page renders are due to the
inconsistencies between these
defaults.
If we could find a way to 'flatten
the ground' before we begin
building, life would be easier
A resets script performs that flattening - and IE6 can be dealt with in a much more logical way.
The obligatory link ;)
http://developer.yahoo.com/yui/reset/
Solution
Bearing in mind the use of this resets script, I offer you the following solution.
As you're probably aware, IE6 doesn't support position:fixed.
To solve the problem you can make use of the following snippet:
<style>
html, body {
height: 100%;
overflow: auto;
}
div#fixed-bottom {
position: fixed;
z-index: 2;
bottom: 0;
height: 20px;
width: 100%;
background-color: #eaeaea;
margin-top: -20px;
}
div#content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
* html div#fixed-bottom {
position: absolute;
}
</style>
Which should be applied to a document containing the following elements within it's <body></body>:
<div id="fixed-bottom">
<p>
I'm at the bottom
</p>
</div>
<div id="content">
<p>
Your content here.....
</p>
</div>
This should work because:
IE6 treats height in the same way that most browsers treat max-height. The overflow auto will allow content to flow (with scrollbars) if the content carries on past the height of the browser viewport.
The '*' hack is used for simplity - it makes sure that IE6 applies 'position:absolute;' rather than 'position:fixed'. You should use conditional comments to provide specific CSS for IE6.
Note that this solution will only work when IE6 is set to use 'strict mode'. This can be set explicitly by choosing an appropriate doctype; for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Well, this is my first post here and really enjoying the site.
I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.
The URL is http://dev.aipoker.co.uk
I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.
Can anyone help put me out of my misery please?
Thanks, guys and gals.
I've had success with code like this:
footer {
display: block;
position: absolute;
width: 100%;
bottom: 0px;
}
Try this one, it works well on Firefox.
BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)
Cheers.
The minimal changes I can see to do this would be:
move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection
which ends up with something like this in your head:
<style type="text/css">
#body, #footerSection { position: absolute; }
#footerSection { bottom: 0px; }
</style>
<div id="body">
...
<div id="footerSection">
...
</div>
</div>
This is all you need to know about css only sticky footers & sticky navs:
Stick to bottom of page
Position: absolute;
top:auto;
bottom: 0;
Stick to bottom of screen
Position: fixed;
top:auto;
bottom:0;
Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.
You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.