I am developing a HTML page in which we have a table having <thead> tag used for the header section. Now I want to fixed this header section always on top. Following is the CSS code which I am using:
thead tr {
position:relative;
top: expression(offsetParent.scrollTop);
}
However, this is only working in IE8. It is not working in IE9.
So how can we achieve the same in IE9?
Thanks in advance!!!
The expression function is an old IE-only feature that Microsoft has abandoned and doesn't support anymore in newer IE versions.
You should look into position: fixed instead. (However IE6 doesn't support this, but there are workarounds available, that are easily googled if needed.)
expression is only for oldie IEs, that's why it fails in IE9. To fix a div in a cross-browser way, use this snippets instead:
#div{
position:fixed;
/*The followings are for Oldie IE*/
_position: absolute;
_top: expression(documentElement.scrollTop);
}
Related
I have been created simple webpage by using html and css.
Here is the worked jsfiddle, http://jsfiddle.net/y7xmr6ct/ [part of work only]
In header cart-summary section displayed in all browsers expect ie like this: http://s4.postimg.org/tuvx8avt9/Untitled_1.png
But in ie8, displayed left side of my header.
I tried to use clear:left; or width:100%; to my class .large--right, but nothing change.
Here is my css:
.large--right {
float: right !important;
}
and also I in my #footer {border-top: 1px solid #ddd;} didn't work in ie8
May i know, how can i fix this?
Can anyone help me to fix this, thanks in advance.
IE8 does not support media queries. You're code is mobile first and so because the media queries aren't firing, the layout is the mobile styles.
Take a look at RespondJS for media query support in IE8.
Just finishing up a site and having an issue with position: fixed on IE7. I've Googled it and tried different Doctypes but the fixed area is still moving out of position on IE7.
I've not got IE7 but a client staffer has it and I can see the issue using an online IE renderer/tester.
I've removed the .htaccess from the test site so you can see the site/code.
http://drinkzing.com/test
Any advise or help would be appreciated.
There is a <div> and an <ul> element which both have id="logo-nav". They've both set position:fixed and some other properties. I think this is the main problem. Remove the duplicate ID, set position:fixed only for the <div> element and then we can investigate the issue (or the problem should disappear at best).
If you have newer version of Internet Explorer, you may emulate IE7 by clicking the Compatibility View button or choosing IE7 document mode in Developer Tools.
edit: I noticed that you haven't set any left property for #logo-nav. I don't know why IE7 computes the default position other way than all other browsers, but simply adding #logo-nav { left: 225px } works for me.
Try this in your css:
* html idorclasshere {
position: absolute;
}
Note: replace "idorclasshere" with your, well, ID or Class of the non-responding div (don't worry, due to the asterisk, other browsers aside from IE won't see it, add it in conjunction to your "position:fixed" style).
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.