For one reason or the other IE8 is not displaying my webpage properly. It works on every other major browser but everything is helter-skelter when I try to open the page on IE8 and since majority of the users of this page primarily use IE8, I cannot ignore it. Here's the link to it: http://www.gradschool.purdue.edu/gradexpo/mailinglist/
You haven't set a doctype. Put this at the very top of your page:
<!DOCTYPE html>
IE put itself into 'quirks' or Compatibility mode when it doesn't see a doctype, which will mess up your layout. Specifying a doctype will kick it into Standards mode which will remedy most problems. IE is still pretty useless at rendering CSS properly, so you might still have some issues.
Note you could also use the HTML 4.01 Strict doctype, but this will give the same result:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
get a doctype at the top of your html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
then run it through http://validator.w3.org
and fix other errors
In addition to the critical error of a missing doctype as others have pointed out, you have a few serious HTML errors.
W3C Validation
You have repeated your closing tags for </body> and </html>. You also have a couple unused closing div tags, </div>. All of the meta tags in your <body> need to be moved to within the <head> section. Browsers will handle these kinds of errors with unpredictable rendering.
Related
I've been spinning my head for 2 days trying to find out why my site looks so messy in IE8, and 9. It looks fine in Chrome and Firefox. I need help, I can't find the CSS issue...
http://tytonsound.com/ is the web site.
In IE, there's some scripts that aren't being noticed. (Like the nav bar). In addition, the nav bar is off center, and shifts down a little.
Please let me know if you notice anything that would be causing the site to be off center.
You're missing a doctype which is causing IE to render your site in Quirks Mode.
If you're using any HTML5 you should place <!doctype html> at the top of your file (make sure nothing precedes this, not even white space) otherwise use an XHTML or HTML 4 doctype.
You are lacking !DOCTYPE element before your html tag (IE is very picky about this)
http://www.w3.org/TR/xhtml1/#dtds
Look through the different types for xhtml and decide which fits your needs.
Example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ...>
...
I've read several posts on this subject and I've tried many of them but I cannot get my website to be centered in IE - specifically IE 8 (my current browser). It does work in FF, Safari and Chrome. www.hscassociates.net is the site.
In my css I'm doing this:
div#section {
width:960px;
margin:0 auto 0 auto;
border: 2px solid #b31b1b;
border-top:none;
}
Also, I have a background image I need in my #section div, but it will not show when I place it in my css file in the div#section block. In order to get it to show, I put it inside the in my includes file where I am displaying the #section div tag:
<div id="section" style="background-image:url('graphics/section-bg.gif');
background-repeat:repeat-y;">
One post I read said the html doctype needed to be using strict. I've never read that before. Any truth to that? I'm using transitional.
Your DOCTYPE should be the first tag on your page. Because it is not IE is rendering your page in what is known as quirks mode. The DOCTYPE itself doesn't need to be strict but what will happen is with a correct DOCTYPE the page will be rendered in strict mode instead.
What is quirks mode?
Because certain old browsers didn't meet W3C standards developers had to write non-standards compliant code to ensure their pages looked correct in these browsers. As browsers came closer to the standard the problem was that pages developed in the old style would no longer render correctly. So they implemented two modes of rendering, quirks and strict.
If the website supplies a DOCTYPE as the first argument this tells the browser that the page is written in standards compliant code and what specification to render against. So the browser can use strict mode to render the page.
However if the page omits a DOCTYPE then the browser does not know what specification to render against and therefore assumes the page is non-standards compliant (Which it automatically is for omitting the DOCTYPE) and renders it in quirks mode which can have unexpected results.
Here's what you need to do:
Change
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> triggers quirks mode.
If you want to use HTML 4 Transitional then use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you are not bound to HTML 4 then use <!DOCTYPE html>
Your page displays fine with both.
I am working on a site that is based on CSS and DIVs
Unfortunately I can not manipulate the HTML.
I have the site looking great on Chrome and Firefox
For some reason IE9 will not render it right.
Please help.
The URL is http://2012.v8apps.com
You will have to manipulate html and add a DOCTYPE as the first line of your code.
<!DOCTYPE html>
Seems IE9 is rendering in quirks mode. Try specifying a doctype at the top of the page.
The first line of your page should one of the following:
HTML 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5
<!DOCTYPE html>
IE9 is also reporting that "CSS was ignored due to mime type mismatch". Could you move your styles into a .css file rather than in an .aspx file?
I had to add Response.ContentType and force text/css for Firefox to render.
The final DOCTYPE that did the trick is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml">
It's just insane, I've made soo many websites and still it seems every time IE7 and IE8 behave differently every time!!
I'm working on a friends website: Class One
Except I can't seem to get my head around why IE7 and 8 seem to be adding in extra spacing. The positioning of the text overlay div on the jquery slider is off a few pixels and wont cover the full width and the inner div float left content just looks way off, why wont it meet the float right, the maths is right!
I would normally attach code if I knew the problem area but It would be an awful lot of css and html to attach so just put the link up instead.
Thanks in advance!
P.S. I am aware of the php error code, I am getting the hosting provider to sort that as I type! :)
Turns out the php warning is before the doc type so this maybe it?
The major problem here is the DOCTYPE.
This tag must be the first tag in you code, but isn't, because of the PHP Warning.
See:
<br />
<b>Warning</b>: mkdir() [<a href='function.mkdir'>function.mkdir</a>]: Permission denied in <b>C:\Program Files\HSphere\3rdparty\PHP\PHP5\prepend.php</b> on line <b>33</b><br />
<!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">
Change beginning of output to
<!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">
If you don't put this tag in the first line, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.
NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).
Note: correct use of DOCTYPE will reduce the differences between IE7 and IE8, but not remove all of them.
Ever heard of the IE box model? It's so fun.
Here's some info:
http://stuffthathappens.com/blog/2007/09/12/ie-and-the-css-box-model-wronger-than-wrong/
Summary of IE hacks found to deal with your problems:
http://www.positioniseverything.net/articles/ie7-dehacker.html
Differences in IE 8:
http://www.evotech.net/blog/2009/03/ie8-css-support/
If you view this page: http://www.sussexjewelers.com/product_search.php?cid=69
The drop down menus (horizontal green bar) do not drop down in ie7. They do drop down in ie6, firefox, and chrome. Also if you view the homepage the same drop downs DO work in ie7. I cannot figure out why they are not working on this page in ie7. They are pure CSS drop down menus.
Any help is appreciated.
Thanks!
You have a bunch of style and script tags before the actual HTML document. Those should be in the head tag of the page.
The doctype tag has to be the first tag in the source, otherwise IE will render the page in quirks mode. Other browsers may also render it in quirks mode, but it makes a lot more difference for IE. One big difference is that the box model is handled incorrectly.
Once you get the basic structure of the code correct, you should validate the html, and the css to see if there are more problems in the code. I can see right away that you have an HTML doctype but you are using XHTML tags in the code.
If the menues still doesn't work after cleaning up the code, I would guess that it's a problem with the z-index so that the menues show up but is hidden behind the main content. IE doesn't handle z-index correctly for elements that has layout.
Your <style> and <script> tags should be inside your <head> tag, not outside your <html> tag.
Also add a DOCTYPE
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Take your pick.
TonyF is right. In the future, try running this in your URL bar to see if you're actually in Standards Mode (CSS1Compat) vs Quirks Mode (BackCompat):
javascript:alert(document.compatMode)
I have that in a bookmarklet in IE.