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.
Related
I am working on a Wordpress theme, my footer background color just disappeared and it is appearing accurately even in IE7 but in IE8 there it no bgcolor for my footerwrap div, in all other browser it is working fine........
here is the link
Site link with the problem
Your doctype claims strict XHTML but your markup is a mishmash of unclosed and invalid tags. It's not surprising you're getting inconsistent results. Try to fix your XHTML or use a HTML doctype and see if the issue goes away.
http://acneherbs.org/wp-content/themes/limegreen/css/ie8.css
lines 257 and 269: dispaly:block;
probably meant display:block;
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">
This happens to be the top padding plus the bottom padding on the element id f3c. I have attached two pics - one of IE8 and one of IE9.
I tried to capture the relevant information from the debugger. Basically I have a link inside a fieldset, inside a form. The fieldset is so the page validates.
I'm using relative positioning for the link (top:9px).
Not sure why IE9 would add in in 4px from IE8's calculation unless for some reason it is counting the (padding-top:2px and padding-bottom:2px).
ACTUAL DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Based on the screenshot, you're adding padding to an inline element.
Try adding:
display: inline-block;
And make the adjustments from there.
edit:
Inline elements don't apply margin/padding/width/height (well they shouldn't but browsers like ie have non-standard behaviours)
Block elements can have margin/padding/width/height but they cause elements to be stacked vertically.
inline-block is kind of a hybrid between them. They allow other inline elements to be placed vertically next to them, however you can also add margin/padding/width/height to them.
My general rule is that block level elements are the heavy construction elements in a page (the framework) where as inline is for the content within the page (bold, italics, etc). inline-block allows you to fudge inline elements a little with the margin, padding.
note: Just be aware that in older versions of ie this still isn't pixel perfect.
In addition to Ben's answer, you might want to consider using Yahoo's YUI Reset CSS, which resolves the inconsistent styling between browsers.
To use it, just add this line to the head element of your HTML pages.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
You can view the full, unminified version of the reset css to see what it does here.
Do you really have comment tags in front of the doctype as in the screenshot? If so, you are in quirks mode. Remove the comment tags.
This is a follow-on question from this thread:
CSS Semi-fixed Element?
I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.
I have rolled the code out so that you can see the problem I am having on a live website:
Gran Via hotels
IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:
d.css({ position: "fixed", top: "0px" });
The first line is also evaluating to -2 in IE whereas in Firefox it's 377.
var scrollerTopMargin = $("#scroll-container").offset().top;
I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!
Thanks
Ben
IE does not like your doctype and is running with quirks mode activated. this is why it does not work.
Try this one and see if it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To run IE8 in standard mode you need to choose a strict doctype, not a a transitional one
http://en.wikipedia.org/wiki/Quirks_mode
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.