Box model hack not working in Internet Explorer 8 - firefox

I have two nested divs that are supposed to both be 400 pixels tall. The sidebar div shows up correctly in Chrome and Firefox, but in Internet Explorer 8 I'm having trouble getting it to be wide enough AND tall enough due to Internet Explorer's screwed up box model.
I've tried using the box model hack to fix it, but it didn't appear to do anything, so I removed it. I tried using a fixed width on the sidebar Internet Explorer hack by calculating how much 19% of 880 (the width of the #container div) was (it was 168 pixels + the 20 pixels for the left and right padding = 188 pixels), but that didn't appear to change anything, it was the same size in Internet Explorer.
How do I make this web page to look the same in Internet Explorer as it does in Firefox and Chrome? I'm a beginner to this box model hacking.
The source code can be found here: http://68.82.27.200/alienscientist/.
Also, the top menu isn't wide enough, and the header isn't tall enough, in Internet Explorer. I haven't gotten to trying to fix that yet but can the fix for the sidebar be applied to those?

The Box Model problem shouldn't be an issue in IE8 if you use a strict doctype. I can see you've declared a strict, but a few issues at the top of your html could be cancelling this:
<!-- BEGIN HTML HEADER -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="webkit safari safari4 mac">
I think the doctype line should be at the top, rather than a comment. You're missing the xml:lang and lang attributes on the html node, which also shouldn't have a class (put those classes on body).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
That's mostly just an educated hunch, but try changing it and see if the problem fixes.

Related

Why is DOCTYPE line red in firefox?

The websites I've designed had no problem before but now I see DOCTYPE line red in Firefox 11. There is no problem in validation. I changed encoding to UTF-8 without BOM but problem still exists.
http://validator.w3.org/check?uri=genelvana.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Isn't it because Transitional doctype isn't really valid anymore unless you are using legacy code?
Surely now if you build a website now, should you be using strict or html5?
Same here while Fx6 didn't color it in red.
While hovering this first line, a tooltip appears saying
Almost standards mode doctype. Expected "<!DOCTYPE html>".
You can safely forget this "advice" IMHO. The important thing to do is choosing a valid doctype and then write code that is conformant to this doctype, as you already do. No browser cares about what follows html so the contrary is true too: no browser cares if there's something after html ;)
Of course, if you use HTML5 elements and technologies (nav element, canvas or whatever) then yes use the HTML5 doctype.
It's not so much an error, as it is a warning. Firefox is simply alerting you that the DOCTYPE you are using, XHTML 1.0 Transitional, triggers Almost standards mode, instead of Standards mode.
If you want the page to be displayed in Standards mode, all you need to do is change the DOCTYPE to either XHTML 1.0 Strict or HTML 5.
you may have some CSS validation errors like fractional pixel values or missing unit declarations like these :
div {left:3.545253px;}
or
div {left: 50;}
these would cause the html doctype validation errors. Check your CSS files and jQuery CSS settings if you have any.

When does IE8 go into Quirks mode?

We're in the process of converting web app to IE8 (now client is using IE6). We didn't create that app. We are only modifying and adding features to it. When I visit most of the pages in this app using IE8 developer tools show that IE is working in Quirks mode. But some of the pages work in Internet Explorer 8 Standards Mode. This page http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx says:
"Quirks Mode: This behavior matches that of Internet Explorer when rendering a document with no doctype or a Quirks doctype."
But all of our pages have DOCTYPE defined - !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" (I don't know how to enter angle brackets here but they are present on webpage.
Can anyone explain me why is IE8 working in both Quirks and standard mode when displaying pages that all have DOCTYPE defined? Or maybe show me two examples of pages that IE8 displays in Quirks and standard mode?
The doctype tag has to be first in the markup, otherwise it's ignored. If you have an XML declaration tag before the doctype tag, IE will ignore the doctype.
If the HTML markup is utterly broken, the browser might fall back into interpreting it as tag soup instead of as an HTML document, and rendering it in Quirks mode.
Use the W3C HTML validator to check that the code doesn't have any serious errors.
Try viewing your HTML i an HEX editor. There might be some weird characters (usually 3: ef bb bf) just before the DOCTYPE declaration. IE also falls into quirks in that case. Happened to me before, and happening right now as well.

IE Standards modes

I just have a quick question about IE8 Standards mode vs Quirks mode.
The page displays fine if you load its first page then log in. I have searched for the doc type which i think is right for changing the page to IE8 Standards Mode and i think it works because IE's built in debugger says it's in that mode. Also if you start on another page which uses quirks mode then navigate to my site the debugger changes modes to IE8 standards.
The problem starts if your change the mode to IE8 standards before you visit the page. e.g say your on google and change the mode in the debugger to IE8 standards then visit the site the page isn't displayed correctly.
I hope i've explained my problem clearly enough. I've posted the doctype i'm using is that is any help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Add this meta tag to the head
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This will force IE into the latest standards mode. So if they have IE8 it will be in IE8 even if its set before to other mode.
Also you could start using the html doctype without problem
<!DOCTYPE html>
You can read more about it here:
The IE Blog has posted "How IE8 Determines Document Mode" which you should read. Also, note that MS introduced a (... ah! Geries beat me to the punch while typing this!) Take a look at Geries' comment. :)

why am I triggering quirks mode in IE8?

I'm working on a page that, when I load into IE8 and view the developers tools it tells me that page default is quirks mode.
I've got a strict DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I even went ahead and put in the explicit standards switch, though I didn't think I'd need to:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I can't understand why page default isn't IE8 standards?
Only thing I can think of is that to get to this page, I first have to log in to an application and the first pages I must traverse are old quirks mode pages. Does IE decide on which mode to use at a server level, or is it supposed to decide page by page?
Thanks!
Does IE decide on which mode to use at a server level
Not generally, no. There is the ugliness of the compatibility view list, which is site-specific, but that only kicks you back to IE7-style-Standards Mode, not IE5.5-style-Quirks-Mode.
Your code otherwise looks OK, as long as that DOCTYPE is the very first thing on the page. IE will be forced to document.compatMode= 'BackCompat' if there is a comment, PI, XML declaration (prior to IE8) or any non-whitespace textual content before the doctype. If a control character has snuck in that you can't see in your text editor, that could do it.
Example problem page?

IE8 flashes when reloading (perhaps an internal IE bug, recent issue)

In the last few days we have noticed that IE8 during page load occasionally shows momentarily a blank (white) page. It does not happen every single time. I would estimate about 10%. This issue has been brought to our attention by visitors on a site with several millions pages a day, which suggests that it has really appeared very recently. However, a quick look at the recent Windows updates did not reveal any changes related to IE at all. Also, I tried to turn on and off all possible options in IE, turn off all extensions, switch on and off compatibility mode, tried various doctypes etc. without any success. The problem can be demonstrated even on a very simple example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body { background-color: Black; color: White; }
a { color: White; }
</style>
</head>
<body style="background-color: Black;" bgcolor="Black">
Reload
</body>
</html>
Just click on the reload link repeatedly, and you will see a white flash occasionally. Can anybody else confirm it? I run Vista, but it has been reported also on XP. It seems like some internal repainting problem such as when you don’t make the window background transparent in the RegisterClass function.
I've got the same problem with some sites I've build. It's very annoying and I haven't seem to solve it yet. Same occurs in IE6 and IE7, but that can be 'solved' with
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
Couldn't find a solution for version 8.
I had a similar issue and searched every where for an answer. I think I may have it. I had a flash banner and would get an ugly white flash that filled the browser whenever I clicked on a link to a new page or did a refresh. I placed wmode:'transparent' in the parameter list for the swf object. Now it looks the same as FF - no ugly white flash!
swfobject.embedSWF('banner.swf', 'flashcontent', '960', '120', '9.0.0', 'assets/swfobject/expressinstall.swf', {}, {bgcolor: '#000000', menu: 'false', wmode:'transparent'}, {id: 'flashcontent'});

Resources