Internet explorer dispaly

Just found the answer to the mystery why my xhtml page would load in Mozilla when I try to open it with I.E.
IE8 and earlier, meaning nothing before the abortion called Vista, is capable of handling xhtml strict; you couldn’t make it up.
From what I read about it, I gather that windows xp versions have trouble with xhtml strict, but can handle xhtml loose and xhtml transitional.
Is there a downside to changing my pages to loose or transitional?
It just beggars believe that I need to dumb down my coding in order for Windows to be able to read it. :rolleyes:

Uhh…what? What are you going on about? The only time Internet Explorer will have trouble with XHTML is if when you send it as real XHTML. No issues when sent as HTML which I bet you are.

Not quite sure what your consider “false” or “unreal” xhtml, but I just wasted half a day trying to figure out why a page that I tried to open in IE flickered a bit, and then jumped to Firefox. I checked and rechecked the code, and it all ran fine under Mozilla, Chrome and Opera, as well as on an Android (Samsung), but refused to start in IE.

Normally, you see this line under your XHTML doctype:

<meta http-equiv="Content-Type" content="[COLOR="#FF0000"]text/html[/COLOR]; charset=utf-8" />

The [COLOR="#FF0000"]text/html[/COLOR] bit means that this is not really being served up as true XHTML but as HTML. That’s because IE never recognized true XHTML. For it to be true XHTML, the bit in red above should read [COLOR="#FF0000"]application/xhtml+xml[/COLOR].

This is a good read: http://www.sitepoint.com/forums/showthread.php?393445-XHTML-vs-HTML-FAQ

What code?

The privilege of using IE.:rolleyes:
Is there any way that I can use xhtml1 and can be assured that IE8 or older will display my page properly, regardless of what the settings are on the user’s computer?
Not much point in using hacks to get MY computer to do it right in XP versions of IE, if that doesn’t do the same for random visititors that still have an old XP version of IE.

Hi,

I think you are a little confused and IE has no problem with xhtml1.0 served as text/html back to ie6.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>


All versions of IE6+ will render the page in standards mode with that strict doctype. They will still render in standards mode even with a transitional doctype. The only time they will render in quirks mode is when you don’t have a doctype or use one of the very old doctypes without uri.

That’s not to say that older IE versions don’t have bugs but they are all well known and easily catered for these days.

If you want further help to debug then you will need to provide the code you are using so we can see what’s going on.

This is the code I have tested with so far. It was “strict” at first, so I tried “transitional” to see if it made a difference. It did not.

<!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>
<link rel=“stylesheet” type=“text/css” href=“http://boiler-breakdown-repair-london.co.uk/xtmlstylesheet.css” />
<title>Emergency waterleak repairs in southeast London</title>
<meta name=“keywords” content=“waterleak, repair, southeast London, emergency”/>
<meta name=“Description” content=“Emergency waterleak repairs in southeast London”/>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”/>
<meta name=“geo.region” content=“UK”/>
<meta name=“geo.placename” content=“London”/>
<meta name=“geo.position” content=“51.427364;-0.160074”/>
</head>
<body>

<h1>Southeast London emergency waterleak repairs</h1>

<p><strong>Emergency waterleak repairs in…

As I said above strict or transitional will not greatly change the way the page is rendered. There are very minor differences but the main thing is that transitional allows you to use deprecated mark up and still validate whereas strict does not allow things like the center tag and align attributes and other presentational attributes. However, in most cases it will still render them but just not be valid.

The code you posted above looks exactly the same to me in all browsers from ie7+ so you will need to give more information as there is not enough to work with. If you are talking about this page then I can tell you that it is broken in all browsers and unusable in most as it is built incorrectly from the ground up. Pages should not be built using absolute position like that and the use of large negative margins to move things around should be avoided unless there is sound reason. You should use floats for the columns and let content get back into the flow so that it is not reliant on heights and fixed margins/positions to place everything.

As I said above IE has no problems with the doctype and the code you posted shows no differences in IE so we still need to see where you think that it is going wrong. Pages must be built using best practices and robust layout methods so it may be more a matter of adjusting your coding techniques rather than other outside influences.

That is the old style sloppy html4 page all inline.
This is the new testpage xhtml-page

What exactly do you mean by “unusable in most”? I’ve checked it myself on at least half a dozen different pc’s at different addresses and no connection to each other whatsoever, plus a couple of Apples and a couple of smartphones. Display was not perfect e.g. buttons overlapping text above a certain magnification, but it was workable on all; it just looked amateurish.

That is the purpose of my current excercise. If you think the page you looked at is bad, you should have seen the rubbish with which I started. :eek:
I fully agree with pages (or anything for that matter) should be based on best practice, and only use “tricks” if there is a practical reason not to use “normal” methods.

The challenge I’ve got here is: how do I learn to do it properly? I’ve gone through several online “courses” and have gone through a number of books on css and xhtml. The problem with this, is that it lacks interaction. When I don’t quite understand a detail (or worse, when I THINK I understand it, but have got it wrong) I am reduced to trial and error. Any thoughts on this will be greatly appreciated.

Your link is broken. :frowning:

Change the extension from “.xhtml” to “.html”.

Did you try that? I tried it before posting, and still got a 404. (Otherwise I would have modified the link.)

Sorted. A “/” had sneaked into the link, and has been duly evicted.

Was talking to the OP to change the extension of the file not the link. >.>

That would defeat the purpose of the exercise as I am still hoping to be able to get it working in Xhtml.
Any way, the link now works.
xhtml-page

It will not work in the way you have it now. You need to send it as text/html, ie change the extension from “.xhtml” to “.html” then it will work in all versions of IE.

It works fine, just not in IE versions before Vista…

You seem to have missed that I WANT to use Xhtml. Changing the extension to from xhtml to html just abolishes the Xhtml options.

The middle section is absolutely placed so if I close my browser window smaller the content overlaps the left column and proceeds to disappear off the left side of the monitor and is unreachable even via scrollbar. Very few users have their browsers maximised at all times. there is also a massive gap in the middle of the page for some reason.

That is the purpose of my current excercise. If you think the page you looked at is bad, you should have seen the rubbish with which I started. :eek:

We all have to start somewhere so don’t take the comments to heart :slight_smile:

The challenge I’ve got here is: how do I learn to do it properly? I’ve gone through several online “courses” and have gone through a number of books on css and xhtml. The problem with this, is that it lacks interaction. When I don’t quite understand a detail (or worse, when I THINK I understand it, but have got it wrong) I am reduced to trial and error. Any thoughts on this will be greatly appreciated.

Yes, it can be hard to sift through everything you need when you get started and you will make many mistakes along the way but trial and error and patience are all virtues as well as listening to what others may say.

You seem to be hung up on xhtml for some reason when in fact its a non issue here because you are not using real xhtml anyway but pretend xhtml which is basically just html as pointed out by other sabove. You don’t need real xhtml for web pages unless you are doing advanced things as mentioned in the link Ralph posted. I’ve never used real xhtml and I build 2 or 3 site templates a week.

You can use the xhtml doctupe but you will be serving it as text/html. That’s why I still stick with html4.01 because I don’t need to pretend its xhtml.

The doctype will have nothing to do with your issues apart form the validity of the tags that you use inside. If you have a valid doctype (strict or transitional) then the page will render in standards mode (or almost standards mode for some browsers when using transitional). There are very minor differences between the rendering of strict and transitional but most would not notice them. The main difference is that in transitional you can use the deprecated tags and attributes I mentioned above.

If you don’t have a doctype at all or have a broken doctype then your page will render in quirks mode and the display will be vastly different in IE.

This is the new testpage xhtml-page

Again, I am not seeing a difference in IE. What is it that you see is wrong in IE and right in other browers?

However, until you make the page valid (110 errors) you can’t really start to bug hunt because invalid code is handled differently by browsers anyway so you need to rectify that first.

Don’t use breaks to make space as that is not what they are for. Breaks are for creating line-breaks in things like addresses, poems, form controls etc and not just to make space or paragraphs. Breaks are also invalid as direct children of the body anyway.

If you have a long list of links then use a list.

Don’t make the anchor text bigger on hover as that makes the whole page jump and I wouldn’t be surprised if it caused epileptic fits as it is very disconcerting and again virtually unusable as the text jumps out of the way and you lose your place.

Look at using a max-width as the page is too wide on my 27" mac and unreadable. Use a suitable max-width with a margin:auto to center the content.

Don’t use spans when you should have used a p element. Spans are for inline fragments and again can’t be direct children of the body. Use html appropriately with logical heading structure, p elements for paragraphs and phrases. List for lists etc. usually there is an appropriate html element for the job concerned and when none fits the purpose a generic div can be used for block elements and then span for inline elements.

Hope that helps :slight_smile:

The 110 errors are almost surely caused by the list of breaks I put in; before I did that, the code was 100% clean.
I know it’s not the way to do it, it was just a 5 second solution to make it visible for a friend whose computer is full of crap that blocked the bottom bit of the screen.

I suspect you can see the page in IE, because you use a version that is less than 6 years old; it runs fine on newer versions (don’t know the cut off date/year).

The page really is a test, mainly to see if there are issues with various items that I plan to use. At this stage, I couldn’t care less how attractive it looks. Once I’ve mastered all the issues, I’ll start working on the final presentation of the page.
I’ve added most of the items that are going to be on the final version, e.g. links, enlarged text, hover change, 1 image on one side, 2 on the other, and am now practicing the theory I have learned recently. In the final version, there will be more images, different links in different places, more text manipulation and so on. I’ve purposely done it this way to reduce chances of getting problems purely due to typos; if I can get 2 images on one side in a way I like, I can do the same for 20.

The main reason for chosing Xhtml, is aiming to have various “versions” of my pages, depending on what platform is used e.g. pc, tablet, smartphone. I don’t want to run parallel pages or sites, and Xhtml seems to be best solution in this case.