Positioning of my website in IE is totally wrong - html

Does anyone know a solution to my problem or where I should look for this to work?
I am working on a website ( http://www.awww.nl ) and I got all the positioning of the elements the way I wanted... but when I checked in IE most of the positioning is totally off!
Especially on the post pages (for example: http://awww.nl/superlieve-luiaard/ ) the design is moving all the way to the right in IE (in chrome on my Imac everything is correct) And on the homepage the button to add pictures disapears.
I tried to fix it by using different Doctypes but that didn't work.

Your website is rendering in Quirks mode, probably because of a doctype mistake.
I do not recognize your current doctype:
<!DOCTYPE XHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Can you try changing your doctype to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If that doesn't fix it, then add to the <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This should render it in the highest version available. However, I would recommend that you look for the doctype mistake and fix it as it is the root of the cause.

Related

IE8 html image alignment

Currently all browsers are showing my page correctly except IE8, which is having a mystery alignment issue.
I already added the meta that worked for previous questions:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
However this has not fixed the problem.
Can you please look at my page to see if anything looks incorrect?
http://oldcalifornia.com/Exterior_Craftsman.asp
Thank you,
Robert
Your site is designed using tables, tables shouldn't be used for anything except displaying tabular data. Consider redesigning your site using divs.
I have also suffered this issue. Add standard doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
I am not sure, but try if this would work.

I don't know why my page doctype hang my chrome?

I have a very simple page , here is the source code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
My IE8 and firefox has no problems.
I don't know why, my Chrome (version 35.0.1916.153 m) will hang, after loading the page. So when I mouse right click on it, it cannot show the right click menu.
Steps to reproduce the hang problem:
load the page
mouse right click on page (any empty space )
....it will hang.
And then every time try to refresh this page, it will crash the page as screen captured here:
Anyway, If I remove the <!DOCTYPE.....> tag, it will ok.
you can click here to the test page
But other page on the web is ok and never hang, they also has <!DOCTYPE.....> tag
eg. https://stackoverflow.com/
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This two also hang my chrome.
Thanks you all, it is embarrassing that my chrome installation has problem, I think this question should be closed. Thanks again for providing comments and answers.
(How to self closed?)
Thanks you all, it is embarrassing that my chrome installation has problem, I think this question should be closed. Thanks again for providing comments and answers.
I cant experience the error you are having so maybe try HTML 5 tag
<!doctype html>
but since it isnt a standard yet I don't know maybe try html4.01 strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Sorry I'm not much help

Cross Browser Compatibility Issues

My site looks fine in firefox but in internet explorer everything seems to be bigger so the sizing on the page looks wrong. I really have no idea how to fix this. Any suggestions? Thanks
Start with your code errors [Invalid] Markup Validation of thezenapproach.com - W3C Markup Validator. (scroll down in the validation report to see line numbers and source code.) You can ignore the "unencoded ampersand" errors.
And try a transitional doc type rather than strict:
<!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>

Which doctype should I use?

Which doctype should I use, if I want to use costumizable divs. With divs animation, images moving, setting div opacity, etc.
I've tried to create a div through javascript, setting its background-color, position, width and height, and adding an onmouseover event to it.
Everything works ok untill I wanted to put a doctype at my html.
I've tried the transitional and strict, both made my div disappear.
So I've inserted the HTML5 type of doctype and my div appeared ok.
Well, I want to make my website with html4.
Is it possible?
Everything I've read lately seems to say that you should just use a plain doctype so the browsers can use the latest rendering standards.
<!DOCTYPE HTML >
There are three Doctype versions for Html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
But the best solution is to use HTML 5's one
<!DOCTYPE html >
Adding HTML5 doctype will cause the browser to read it as a html5 document. You will have to keep it in mind. There is not that much difference in them. HTML5 is just a version with better readability. You will have to consider this when you write your code.

Content overlapping when change doctype from HTML to XHTML

I want to change my doctype to XHTML but it breaks all the content in my page,
how to resolve the issue..?
I'll show you what was the change I've done on my document.
from this doc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It causes overlapping the content throughout the site, I'm shocked :( CSS styles are working, I mean in color and font sizes, but paragraphs widen to the right side.
Can anyone tell a solution..? I'm changing the doctype because something like a floating Ad is works only in XHTML format in IE it doesn't support the HTML format that is why.
Thanks in advance!
Paul
See: http://hsivonen.iki.fi/doctype/
This doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
puts your page into Quirks Mode.
Unfortunately for you, your site has been made to work with Quirks Mode enabled - this was a fatal mistake.
The only sensible thing to do is to change the doctype to one that triggers (Almost) Standards Mode (such as the XHTML doctype in your question, or simply <!DOCTYPE html>).
Then, you'll unfortunately have to go through the laborious task of fixing your site.
Doing this should help your site to render more consistently between different web browsers, and that's a worthy secondary incentive.
Unfortunately, you'll have to redesign your site completely (CSS- and design-wise). Then, sticking a standards/almost standards mode doctype (such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">) on your web page should work.