IE Positioning and mime/doctype

Garfield · 2005-11-20 00:56:58

Hi,

I’ve been fighting some days against a positioning problem that appears on IE (v.6), after a lot of hours reading post and tweaking codes I’ve the problem against the wall.

To avoid problems of cache and to have a faster response of changes I worked off-line, saving the original output of TXP in the hard disk. The first line of the document is:

old line: [[!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”]]

I only must change a character (“HTML”->“XHTML”) and the page looks great (and identical) in Firefox and IE.

new line: [[!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 4.0 Transitional//EN”]]

The problem is that even if I include the DOCTYPE for XHTML in the header (the top form in TXP) I think that IE follows the mime-type and ignores de DOCTYPE declaration. In few words: If TXP said to IE that it was a xhtml, I’ve no differences between IE and FF display.

I readed a little about mime discussion, but leaving other reasons I will love to design my page without worrying about IE/FF differences, and it seems that XHTML woul be the answer.

** Any comment? Any idea? **

If the mime change was not so easy… can someone help me about the positioning of the right box. In FF it is perfectly alignated to the right with the rightest side of the header, in IE it moves to the left. (You can see it at: http://www.cogitoergosum.com/web/books )

thanks very much, I’m very lost and tyred for my unknowledge … :P

Francesc

Note: < and > changed to [[ and ]]

Last edited by Garfield (2005-11-20 00:58:07)

ubernostrum · 2005-11-20 01:29:52

What are the specific problems you’re seeing in IE? Without knowing that it’s pretty much impossible to help you figure them out.

And what do you mean by different MIME-types? Are you trying to serve application/xhtml+xml to Firefox, and text/html to IE? We need details of what you’ve tried.

phiw13 · 2005-11-20 07:58:31

DOCTYPE HTML PUBLIC ”-//W3C//DTD XHTML 4.0 Transitional

That is a non-sensical doctype. With this kind of thing at the top if your document, all bets are off as to what a browser will do.

IE can only understand/parse html documents served as text/html

If this: http://www.cogitoergosum.com/web/books is the problem page you are talking about, it starts like this:

[!-- meta --] [!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]

The presence of the comment before the DTD will throw IE in ‘quirks mode’, if you delete the comment, IE will go into ‘standards mode’ (or what IE 6 thinks is standards mode’). The main difference between the two is the use of a different box model.

edit — attempt to have code blocks display reasonably

Last edited by phiw13 (2005-11-20 08:02:02)

Garfield · 2005-11-20 08:02:41

Hi ubernostrum,

thanks to reply, I know that I was not explaining very well… :P

> What are the specific problems you’re seeing in IE?
> Without knowing that it’s pretty much impossible to help you figure them out.

The layout is a typical header with a right bar and a main big section at the left. The problem is that in IE the right bar has been displaced 30 pixels to the left, that is the right bar is not aligned to the right.

You can view a two small screenshots at:

Explorer BAD: http://www.cogitoergosum.com/web/images/11t.gif
Firefox GOOD: http://www.cogitoergosum.com/web/images/12t.gif

Or a more detailled full screenshots at:

Explorer BAD: http://www.cogitoergosum.com/web/images/11.gif
Firefox GOOD: http://www.cogitoergosum.com/web/images/12.gif

> And what do you mean by different MIME-types?

It was just an hypothesis, after read a lot of threads about what should be the right mime type for textpattern …

> Are you trying to serve application/xhtml+xml to Firefox, and text/html to IE?

No, I didnt and I even don’t know how to. The only real/checked facts are:

1. If I save the page on the hard disk, I can reproduce the error: Good for FF, Bad for IE.

2. If I change the DOCTYPE directive, in the saved file, from “DOCTYPE HTML PUBLIC …” to “DOCTYPE XHTML PUBLIC …”, the problem disapears and IE and FF shows exactly the same layout without differences.

3. Curiously, If I change the DOCTYPE directive in the TXP header form, TXP sends all the pages with the “DOCTYPE XHTML PUBLIC …” BUT IExplorer ignores it

4. Even, when I “save as” the page received, IExplorer CORRECTS to “DOCTYPE HTML PUBLIC …”

After all this tests and ideas, I thought that may be IExplorer rewrites the DOCTYPE from XHTML to HTML when save the page, because the mime type “said” that it was @text/html, that was my hypothesis, but in fact I dont know a lot about mime types.

> We need details of what you’ve tried.

I hope that this time my bad explanations were a lot clearer. As said anyonw can watch the result, the html and the css at the “guilty page”: http://www.cogitoergosum.com/web/books

ubernostrum, thanks for your time,

Francesc

ubernostrum · 2005-11-20 08:21:50

Most likely, Philippe is correct in diagnosing this as a box-model problem; when IE6 is in “quirks mode” it will incorrectly calculate widths when padding is involved. See this article for a good write-up of what causes it and how to work around it (because even if you trigger IE6’s so-called “standards mode”, this problem will still show up in older versions of IE).

Also take note of the fact that the hacks mentioned in that article are not the only possible solution; if you don’t want to resort to browser-specific hacks, the box-model issues can be worked around by avoiding the use of horizontal padding (“horizontal” being left or right padding); instead, set margins of the same sizes on “children” of the element you wanted to set the padding on. For example, instead of having a DIV with 5px right padding, you could add 5px right margin to every paragraph inside it.

Last edited by ubernostrum (2005-11-20 08:25:28)

phiw13 · 2005-11-20 08:34:56

Francesc,

Are you using IE to save the page ? It usually makes a bit mess of everything then. Use Firefox, or Opera, both will save the page exactly as it is produced by Textpattern.

Then, the first thing wyou should do is delete that HTML comment that is inserted before the doctype declaration – the very first line in your html.

Garfield · 2005-11-20 10:27:51

Hi Philippe,

First of all, THANKS VERY MUCH, really. I was becoming crazy after more than 10!! houres comparing headers and css… I’m a really lammer for not think about that comment at the first line… :(

I’ve just removed the comment, in fact I deleted any other comment in order to reduce the posibility of other problems, and it was fixed immediately. I think that still is a very tinny displacement, may be the “3 pixel IE error”, but I’m not worried about it, even when I remove the border that I put to see what happened.

> That is a non-sensical doctype. With this kind of thing at the top if your document,
> all bets are off as to what a browser will do.

I copied and tested so many doctypes that I have no idea about which one was the right, can you tell me someone better? In fact I’ve tried to copy yours:

[?xml version=“1.0” encoding=“utf-8” ?]
[!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”]

and it didn’t work, sure that the reason is that my website is not made on XML and yours is, may be?

> The presence of the comment before the DTD will throw IE in ‘quirks mode’, if you delete the comment,
> IE will go into ‘standards mode’ (or what IE 6 thinks is standards mode’).

You were right, this was the problem that mades me think about throw all the CSS/DIV and replace them with the old TABLE layout … :)

thanks again, today will be a happy day! :)

Garfield · 2005-11-20 10:33:59

Hi ubernostrum,

> Most likely, Philippe is correct in diagnosing this as a box-model problem;
> when IE6 is in “quirks mode” it will incorrectly calculate widths when padding is involved.

Yes, it was this, thanks to you too.

> See this article
> for a good write-up of what causes it and how to work around it

Very interesting, I’ve printed it to have it at hand while tweaking the content of the center block.

> if you don’t want to resort to browser-specific hacks, the box-model issues can be worked around
> by avoiding the use of horizontal padding (“horizontal” being left or right padding); instead, set
> margins of the same sizes on “children” of the element you wanted to set the padding on.

It sounds as a GREAT advice, now I understand a little more a lot of problems that I had. Sure that I’ll remove any horizontal padding, I feel ‘dirty’ :*) doing “specific browser hackins”.

thanks,

Francesc

Note: I was going to ask you about how to make a link in the posts (why are not detected autmatically?), but in your quote I saw something as “word” +” + “url”. Can I to activate any option on my profile (as BBCode, Textile, …) in order to the link works?

ubernostrum · 2005-11-20 11:16:12

Textile should be available to you automatically; look at the bottom of the “Quick post” box below this, and you should see something like “BBCode: off [img] tag: off Smilies: off Textile: on”.

Textpattern CMS

Textpattern CMS support forum

#1 2005-11-20 00:56:58

IE Positioning and mime/doctype

#2 2005-11-20 01:29:52

Re: IE Positioning and mime/doctype

#3 2005-11-20 07:58:31

Re: IE Positioning and mime/doctype

#4 2005-11-20 08:02:41

Re: IE Positioning and mime/doctype

#5 2005-11-20 08:21:50

Re: IE Positioning and mime/doctype

#6 2005-11-20 08:34:56

Re: IE Positioning and mime/doctype

#7 2005-11-20 10:27:51

Re: IE Positioning and mime/doctype

#8 2005-11-20 10:33:59

Re: IE Positioning and mime/doctype

#9 2005-11-20 11:16:12

Re: IE Positioning and mime/doctype

Board footer