I have a page that looks perfectly at http://esolar.ca/calculator
But when I embed it into an iframe at http://esolar.ca/how-to-profit-from-microfit/microfit-income-calculator/
The Request An Assessment button in Internet Explorer 8 is too far to the left. How do I make the contents of the iframe appear the same after it's been iframed?
The iFrame is overflowing in IE. Changing the width to 584px "fixes" it for me.
Some things to reduce these kinds of problems:
Use a DOCTYPE to avoid triggering quirks mode in IE. EG:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Use a CSS reset to reduce cross-browser differences. Here's a good one.
If all else fails, use Conditional Comments to tweak IE CSS.
Related
I have extra style sheets to try and fix loathsome IE, however there are a few images I cannot get to budge. The little icon images on this page http://www.sporttours.net/news/ next to the news items show up over the sidebar art "Sport Tours". I can affect the images by adding red borders, hiding them totally and a few other things. However, I can't affect margin or padding to try and move them over. Anyone have any suggestions? And yes, they want it to work perfectly in IE too (HA!) so I can't just let it be.
First validate your HTML - as you can see its ridden with errors.
Validation shows you're missing a doctype - add one!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I have a webpage that previously had no doctype declaration.
Now, I've added <!doctype html> to the beginning. Unfortunately, it now renders differently.
There is a div that is supposed to fill the page vertically; now it only fills the top half of the page (the bottom half is empty).
Here is the div's CSS:
#thediv {
float: left;
width: 48%;
height: 95%;
margin: 2px 2px;
}
My questions:
how do I get the div to fill the whole page vertically again? (more important)
does adding <!doctype html> cause the browser to try to render it as HTML5?
why would changing the doctype cause this difference? (less important)
You'll need to set the height of the <html> and <body> tags (and any other tags that contain #thediv to 100% as well:
html, body {
height: 100%;
}
The doctype causes the page to render in standards mode rather than in quirks mode. I recommend reading about quirks mode on the blog of the same name and on the doctype page.
The short summary of the issue is this: in the heady days of the internet when none of the browsers still around today were above version 4 every browser distinguished itself by being different - not by being more spec compliant. When the browser manufacturers agreed to all abide by the same spec they also decided to continue to support older ways of building web pages (the quirks mode) so that the old pages would still render properly in the new browsers. This quirks mode is still built into most browsers - they activate it when they detect a page that looks like it was built in those heady days. Each browser's detection and resolution method is different - here's an example of IE 8's.
Without the DOCTYPE, you force the browser into Quirks Mode:
In other words, all browsers needed two modes: quirks mode for the old
rules, strict mode for the standard. IE Mac was the first browser to
implement the two modes, and IE Windows 6, Mozilla, Safari, and Opera
followed suit. IE 5 Windows, as well as older browsers like Netscape
4, are permanently locked in quirks mode.
Choosing which mode to use requires a trigger, and this trigger was
found in ’doctype switching’. According to the standards, any (X)HTML
document should have a doctype which tells the world at large which
flavour of (X)HTML the document is using.
Quirks Mode is basically a sociopathic mode that browsers enter when you forget to tell them to follow a specific DOCTYPE. In most cases, IE is the worst of them all and all hell breaks loose when you forget to define a DOCTYPE with IE:
jQuery's DOM interactions get gridingly slow, as IE doesn't implement many DOM functions when in Quirks Mode.
Things never look right.
Stay away from it. You'll be happier that way.
Always, always, ALWAYS use a <!DOCTYPE __> up front.
Then, design your webpage.
Otherwise, you can't expect it to work.
Yes, <!doctype html> is the doctype for html5
http://www.w3schools.com/html5/tag_doctype.asp
The doctype tells the browser how to render the page, and each doctype will cause a different rendering.
Try this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:
<html>
<select>
<option>Testing</option>
</select>
</html>
This HTML is rendered like this in IE9:
Then I just add a doctype as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
<option>Testing</option>
</select>
</html>
The HTML then renders like this:
There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We'd like to keep it how it used to display, but I'm not sure if that's possible.
I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.
Is there any way to control this? Any information about this would be much appreciated. Thanks.
This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://bavotasan.com/2011/style-select-box-using-only-css/
Maybe look in to using YUI Reset to clean any browser stylesheets from your page first?
http://developer.yahoo.com/yui/reset/
Lack of a doctype puts you into quirks mode where you never want to be. A doctype is required of all modern web pages in order to be in standards mode. In quirks mode, the proper box model is not followed, particularly by IE, and all sorts of strange things can occur. This is why a doctype is always the first thing to be put on every web page. And once it is set, you never ever change it.
I'm having some trouble with a site, and the hover state of the menu on the homepage with ie7 and ie8.
For some reason despite the z-index it hides behind the object flash box.
Can anyone take a look at my URL and see if you can suggest a fix. It's really got me puzzled. Only happens on the homepage because the menu seems to hide behind the flash video object.
url: http://yellowtulipcomms.com
Try adding the following to the flash embedding code:
<param name="wmode" value="transparent"/>
My first suggestion would be to use full doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
IE is very sensitive when it comes to calculating positions and dimensions without a proper doctype. This is something I have learned the hard way.
Addendum:
Also try using zoom:1 value in css rules. I can't test it on your site but I remember it helped with positioning in IE.
I am working on a project, in which I am particularly using the CSS with themes. I am facing a compatibility problem between IE7 and IE8. I have placed a ASP.Net menu on page in <div>. Applying CSS style on the div as follows.
.TopMenuPanel
{
background-color:#3783a9;
position:relative;
left:597px;
top:0px;
width:573px;
height:24px;
text-align:left center;
}
When I am seeing the page on IE7, the menu showing in one position whereas in IE8 it is showing in another position.
Specific talking, in IE7, on the position of Left:597px Top:0px it is showing in before the half page, and in IE8 it is showing after the half page.
Anybody else have any experience of such a problem, then please give me the expert solution on this problem.
If you know that your code works in IE7 you can force IE8 browsers to use IE7 standards by including the following tag inside
<meta http-equiv="X-UA-Compatible" content="IE=7">
IE 8 will behave exactly like IE7
position:relative alone doesnt really mean anything.
position:relative should be applied to parent of the div.
and you should put position:absolute instead of relative.
Make sure you have the standard DOCTYPE at the top of the document. IE7 will run in quirks mode without the DOCTYPE, but IE8 will run in standards mode regardless by default.
Try this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Keep in mind this must be the first line in the file, before the <html> tag.