A third party product outputs a webpage with iframes and I'm not in full control of the content. The main iframe is missing doctype declaration and this forces IE8 into quirks mode.
I'm maintaining a javascript application that adds several buttons to the right edge of the screen. The problem is that the layout is off in IE8 quirks mode. The buttons are not visible (probably due to incorrect IE z-index behavior) and their position is off.
I was thinking about creating a separate CSS for IE8. How should I go about tuning the CSS for quirks mode?
If you do have control over the (separate) Javascript files, and presuming that a JS file is already called in the head, you could set a conditional class on the html element, like this:
<html>
<head>
<title>Demo Conditional Class Quirks Mode</title>
<script type="text/javascript" src="folder/js_file.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 100px;
}
.ieQM div {
left: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
While adding this to the js_file.js:
if (document.documentMode == 5)
document.documentElement.className += ' ieQM'; // IE in Quirks Mode
.
By the way, I wonder whether it is just a problem in IE8, the document not having a doctype? Don't all IEs revert to quirks mode without it?
Related
EDIT 10:04 PM I RESOLVED THIS
Yeah I figured this out, but the forum software here doesn't let me post an answer to my own question until 8 hours have elapsed. Anyway, I found the solution here. It uses a pure HTML approach and I tested it successfully in all 5 browsers. Just had to put in the HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />
I'm trying to set up a page (eventually several pages) featuring this:
1) A default image loads when the page loads.
2) When you mouse over, a slightly different image loads.
3) When you move away from that, it goes back to the original image.
I figured this was easy with a little CSS, and it is, except when it comes to Internet Explorer. Here's what I have (it just shows 2 pictures of a broken starter from my car):
<html>
<head>
<style>
#pic1
{
width:500px;
height:500px;
background:url("starter1.jpg")no-repeat;
}
#pic1:hover
{
background:url("starter2.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
It works just fine in Firefox, Chrome, Safari, and Opera, but not in Internet Explorer 8. In fact, in IE8, neither image loads. I just get a blank white screen. Am I missing a detail? Is there a way to get this to work on all browsers? I read something about wrapping it in an anchor tag but that didn't do anything either.
EDIT:
I can't seem to comment on any post without the code looking terrible, so here goes. I tried this:
<html>
<head>
<style>
#pic1
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
#pic1:hover
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
Now the first image shows up but the hover over image doesn't. IE keeps telling me "To protect your security, Internet Explorer has blocked this website from displaying content with security certificate errors." as soon as I open up (IE, before going to the page with my pictures), then asks if I want to view only content that was delivered securely. I always just say "No".
Lastly, if I try this:
<html>
<head>
<style>
#pic1
{
background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
}
#pic1:hover
{
background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
I get nothing at all, no images of any kind in any browser.
You need to use proper syntax. Here is the proper syntax.
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}
Notice there are no double quotes ("")
I need the background image to stay centered because I am going to display charts in fixed positions and want the van (in the image) always to be visible. It's working fine in Chrome etc but nothing appearing in IE8.
http://clients.online95.com/RzMaOxkMOC/rep_mktsh.php
Thank you for any assistance you can provide.
#aa_breakdown_bg {
background: url(/RzMaOxkMOC/images/aa_breakdown_bg.jpg) center top no-repeat fixed;
overflow: hidden;
height: 100%;
}
<html lang="en">
<head>
<title>UK Breakdown Market Tracker</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<div id="aa_breakdown_bg"></div>
</body>
</html>
My guess would be that while your div is 100% height, that's 100% of zero. Try stretching both the body and html elements to 100%, too, and see if that does the trick.
body, html {
height: 100%;
}
Also, as Adrift mentions, you'll be a lot better off adding an appropriate DOCTYPE to your HTML, otherwise Internet Explorer will probably run in "quirks mode" and really confuse you.
Are these properties not considered standard CSS?
I'm using something like this, which works properly on Chrome 12, FF4, Opera 11, and Safari 5, but on IE9 the min-width is not respected if width < min-width.
<span style="float:left; width:11%; min-width:150px;">
...
</span>
Edit: a little annoyed at the liberal editing and migrating of my question, but w/e. Here's a fuller example that shows a clear difference in IE9 vs other browsers.
<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>
Edit 2: As noted in Kevin's comment below, adding <!DOCTYPE html> to the beginning solves the IE issue.
If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.
EDIT:
NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).
To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.
I found that <!DOCTYPE html> was insufficient — I had to go strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Try following code:
#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}
//html:
<div id="limit-size"></div>
I wonder why does this style not work in IE and FF, but in Chrome ONLY
#show{top:10%; position:relative; margin: 0px auto; width:100%;}
[Edit]
If I want to make the same work in IE and FF, what do I have to do
Thanks
Jean
Can you provide the relevant HTML markup too? And which version of IE you are using.
One problem could be additional CSS styling that the element with ID 'show' inherits.
To separate styles between IE and FF, Chrome, etc use Conditional Comments.
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
This will tell IE to use a different stylesheet than IE, FF and other browsers.
IE is a beast that won't work without some trial and error, so set up that stylesheet and play with it til it does what you want.
To separate styles within your stylesheet, use this; it's a great resource and has helped me a great deal! CSS browser selectors. It's a Javascript plugin that will read any styles that start with .webkit, .ie, etc and apply those styles only to that browser.
Are you trying to position your #show div 10% down from the top of it's containing div? If so try this:
html:
<div id=#your_container>
<div id=#show>
Content
</div>
</div>
css:
#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}
top:10%; position:relative;
10% of what? For a relative-positioned element, percentage dimensions are measured relative to the parent element's size. Does the parent element have a height: applied? If it doesn't, that's why you're getting no movement: you're saying “move the top by 10% of ‘auto’, which is an indeterminate amount”.
If you want 10% of the browser viewport height, you must tell every element between the root html and the element you're positioning to use the full height of its parent. ie.:
html, body { height: 100%; }
I was wondering if there's anyone having an idea how to tackle with the following problem in IE7:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected.
I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( )
I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this).
Please help!
This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.
The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":
Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":
As of IE7, overflow became a layout-trigger.
This solution doesn't necessarily have anything to do with dynamic content, but it worked for me (at least made the page borked to a manageable degree): specify dimensions.
I only noticed IE7 thought a div didn't have a width when using the crappy 'Select element by click' tool (ctrl+B) in IE tools.
I have created my function to trigger redraw. Maybe it is not a right solution, but it works.
// Script to fix js positon bug on IE7
// Use that function, recomended delay: 700
function ie7fixElementDelayed(elements, delay) {
window.setTimeout(
function () {
if(navigator.appVersion.indexOf("MSIE 7.") != -1) {
ie7fixElement(elements);
}
},
delay
);
}
function ie7fixElement(elements) {
elements.each(function(i) {
var element = $(this);
var orginalDisplayValue = element.css("display");
element.css("display", "none");
element.css("display", orginalDisplayValue);
});
}
Sample usage:
ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);