Cross Browser Compatibility Issues - cross-browser

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>

Related

I need help in understating that, if I change the <!DOCTYPE> in the html page, will it affect some other functionality

Current DOCTYPE:
"!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Required DOCTYPE:
"!DOCTYPE HTML"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
is to tell the browser that the document is XHTML 1.0
<!DOCTYPE HTML>
is to tell the browser that this document uses HTML5, the latest version of HTML available, also a 'living standard' from w3c
It is perfectly fine to change it, as HTML5 continue to support the older function.
(Just like 'opening a word 2003 file .doc' with Microsoft Word 2007)

Positioning of my website in IE is totally wrong

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.

Is this page coded incorrectly for proper HTML?

Learning a bit about the differences between XHTML and HTML, I looked at the source of one of our pages:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
Is this correct? Seems like it’s trying to be a HTML page, but then has a link to an XHTML namespace?
It looks like somebody was using an XHTML doctype, and the associated xmlns attribute:
<!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">
And then they heard HTML5 was the shiny new doctype, so they changed to that and ended up with:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
Just to make it clear, this is what it should be:
<!DOCTYPE html>
<html>
Your code provided,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
is perfectly fine. It means that the web page is using XHTML5, an XML serialization of HTML5. If you would like your pages to be rendered as proper XHTML5, though, the content-type header of the page should be sent as application/xhtml+xml; text/html is not allowed in XHTML5.
For practical reasons (especially compatibility with previous IE versions, most notably IE 6), you should use HTML5, not XHTML5, like the following:
<!DOCTYPE html>
<html>
Note, of course, that the xmlns attribute has been removed.

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.

Selecting a DOCTYPE for HTML 5 + all browsers

I'm using some HTML5 features on a web page and wondered what the best DOCTYPE is. Currently, this is the DOCTYPE and XMLNS:
<!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">
Should I use the new HTML 5 DOCTYPE?
<!DOCTYPE html>
Will older browsers (IE7, FF 2.x) recognize and render the page correctly? What's the best practice in this situation? Thanks.
Yes, older browsers will work fine. The reason "<!DOCTYPE html>" was chosen in HTML 5 is because it is the smallest a doctype can be and yet still trigger standards compliance mode on those browsers you mention.