...

View Full Version : IE6 failing to do positioning correctly



gsnedders
05-08-2006, 11:04 PM
The position property… Something I would hope no browser would get wrong (or at least since CSS1 was first near-fully implemented (in IE5.0/Mac, for those interested)). Alas, on http://geoffers.uni.cc/tri.html, IE6 manages to. Help at hacking IE6 into CSS1 submission?

Kravvitz
05-08-2006, 11:10 PM
You should use a complete doctype (one that includes a URL).
http://hsivonen.iki.fi/doctype/
http://www.alistapart.com/articles/doctype/
http://www.juicystudio.com/choosing-doctype/
http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html
http://www.webdevout.net/doctype_switching.php
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

gsnedders
05-08-2006, 11:15 PM
Oh. My. God. I don't ever remember IE6 being that fussy about DOCTYPEs… Also, now having checked, IE7b2 is the same as IE6 when it comes to that HTML 4.01 Strict doctype, yet works fine.

Lastly, half of those links are irrelevant as I do have a valid DOCTYPE.

drhowarddrfine
05-09-2006, 12:15 AM
You do NOT have a complete doctype. See my link below. Use html4 strict.
IE6 is extremely "fussy" about doctypes and goes into 'quirks' mode without one. You will never get IE to display the same as modern browsers without one.
Also, IE6 does NOT get CSS1 correctly either.

Arbitrator
05-09-2006, 12:38 AM
For general purposes that doctype he's using is adequate. For now, all browsers will read that doctype in standards mode except Mac IE which is thrown into quirks mode. Then again most people could care less about that discontinued browser anyway.

Here's a resource that briefly explains what the doctypes do exactly, or if you want to skip that, shows a nice table of which doctypes activate which layout mode (except XHTML 1.1): http://hsivonen.iki.fi/doctype/

As for your solution, my specialty isn't in hacks, lol.

Kravvitz
05-09-2006, 07:30 AM
You can either use conditional comments or a CSS hack to give IE6 different styles.

About Conditional Comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp)
Some more information on conditional comments can be found on this page. (http://www.positioniseverything.net/articles/multiIE.html)
QuirksMode.org : Conditional comments (http://www.quirksmode.org/css/condcom.html)
http://www.google.com/search?q=IE+conditional+comment

http://css-discuss.incutio.com/?page=CssHack
http://centricle.com/ref/css/filters/


Lastly, half of those links are irrelevant as I do have a valid DOCTYPE.
Yours is incomplete. Yes, it has the same affect as a complete one in most browsers. So what? It's not in the official list.

gsnedders
05-09-2006, 01:43 PM
You do NOT have a complete doctype. See my link below. Use html4 strict.
I do have a valid DOCTYPE. I don't have a complete DOCTYPE. The URI is optional. Also, if you actually read the link in your signature:
The list is informative and does not try to be exhaustive (there are many other proper declarations you could use), but it has most of the declarations commonly used on the Web at the moment.


Also, IE6 does NOT get CSS1 correctly either.
No browser does. Some are very, very, very close, though.


Yours is incomplete. Yes, it has the same affect as a complete one in most browsers. So what? It's not in the official list.
Where is there a complete list of valid DTDs?

Kravvitz
05-09-2006, 11:34 PM
Here: http://www.w3.org/QA/2002/04/valid-dtd-list.html

gsnedders
05-09-2006, 11:37 PM
Here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
As I quoted above:
The list is informative and does not try to be exhaustive (there are many other proper declarations you could use), but it has most of the declarations commonly used on the Web at the moment.

Kravvitz
05-09-2006, 11:48 PM
I should have checked which page he linked to in his sig.

Why would you want to use a (public) doctype that isn't in that list? I can't stop you from doing what you want. I just don't see why...

harbingerOTV
05-10-2006, 02:19 AM
And so it begins ;)

alright the first thing besides all the positioning that was going on was the way IE was rendering the left and right sides. that's line-height and font-size. You can set the lineheight to 0 with no problems but making the font size 0 erases the box in IE and FF. Opera didn't care. Solution


line-height: 0;
overflow: hidden;

----------
<div id="top">l</div>
<div id="left">j</div>
<div id="right">j</div>
<div id="bottom">j</div>


the letters are random but since the box is 0x0 with overflow hidden the letters are basically not there for this experiment. Just making the box work by placing some kind of content in there.

Now you have the boxes lining up but IE still shifts it way up to the top.

well your positioning the container wrong. you had:


body {
width: 20em;
height: 20em;
position: absolute;
top: 50%;
left: 50%;
}
#container {
width: 20em;
height: 20em;
position: relative;
top: -50%;
left: -50%;
}


it needs to be


body {
width: 20em;
height: 20em;
position: absolute;
top: 50%;
left: 50%;
}
#container {
width: 20em;
height: 20em;
position: relative;
top: -10em;
left: -10em;
}


you know how big the container is so make the negative margins half the size of the container.

that lines it up all nice and pretty in IE6 FF and Opera.

I added the other 3 sides for reference but youcan of course take them back out.

rock on:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: #000;
color: #fff;
font-size: 2em;
font-family: 'Lucida Grande', Arial, sans-serif;
overflow: hidden;
}
body {
width: 20em;
height: 20em;
position: absolute;
top: 50%;
left: 50%;
}
#container {
width: 20em;
height: 20em;
position: relative;
top: -10em;
left: -10em;
}
#top, #left, #right, #bottom {
border-width: 5em;
width: 0px;
height: 0px;
border-style: solid;
line-height: 0;
overflow: hidden;
}
#top {
border-color: #fff #fc3 #fff #fc3;
position: relative;
left: 5em;
top: -5em;
}
#left {
border-color: #fc3 #fff #fc3 #fff;
position: relative;
left: -5em;
top: -5em;
}
#right {
border-color: #fc3 #fff #fc3 #fff;
position: relative;
left: 15em;
top: -15em;
}
#bottom {
border-color: #fff #fc3 #fff #fc3;
position: relative;
top: -15em;
left: 5em;
}
#text {
position: absolute;
left: 5em;
top: 5em;
width: 10em;
height: 10em;
}
#text div {
position: absolute;
top: 50%;
width: 10em;
height: 10em;
}
#text ul {
position: relative;
top: -5.5ex;
list-style: none;
text-align: center;
}
#text li {
margin-top: 1ex;
}
</style>
</head>
<body>
<div id="container">
<div id="top">l</div>
<div id="left">j</div>
<div id="right">j</div>
<div id="bottom">j</div>
<div id="text">
<div>

<ul>
<li>Geoffers'</li>
<li>g.wp.com</li>
<li>geoffers.geek</li>
</ul>
</div>
</div>

</div>
</body>
</html>


p.s. you were missing your <html></html> , <body></body> and <head></head> tags...ugh

gsnedders
05-10-2006, 12:35 PM
Ah, thanks harbingerOTV. :)

IMO it not being able to calculate 50% is very strange, and it makes it harder for me to simplly change the size at a later date (well, slightly!).

As for not having the html, head and body elements: they are all optional under HTML 4.01 Strict. (Run the page through the validator if you don't believe me, and if you don't believe the validator, go read the spec :))

drhowarddrfine
05-10-2006, 03:34 PM
I've used a complete doctype and all those tags for years and have never questioned why they are optional (so why are they used at all?).

Like Krav said, they are there to be used so why don't you use them? YOu make it sound like you are just being rebellious than anything else. Perhaps the tags make the markup more readable than anything else but I'll spend a little time investigating this.

EDIT:
Quickly I found potential problems. Leaving out the head tag can cause problems for search engines. "The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms."

In addition, some browsers treat the body and html tags differently for styling where each can be styled differently. I also forgot that if you use the DOM for scripting, I'd bet the document tree gets all screwed up if you don't follow that structure.

edit: This site (http://juicystudio.com/article/required-elements-required-tags.php) under "Optional Tags" go into the need of these tags and assumptions made by browsers. XHTML, it says, requires the tags.

gsnedders
05-10-2006, 06:19 PM
I've used a complete doctype and all those tags for years and have never questioned why they are optional (so why are they used at all?).

Like Krav said, they are there to be used so why don't you use them? YOu make it sound like you are just being rebellious than anything else. Perhaps the tags make the markup more readable than anything else but I'll spend a little time investigating this.For one, it saves (a little, but some) bandwidth. The URI in the DOCTYPE, and <html><head></head><body></body></html> weights in at 79 bytes, if you don't have any whitespace. Over a month (of which my site gets c. 10,000 hits), that's around a MB. Why waste bandwidth when you don't have to?


EDIT:
Quickly I found potential problems. Leaving out the head tag can cause problems for search engines. "The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms."The UA shouldn't assume an optional tag be there: it'd be far safer to just (for example) look for the first <title> element.


In addition, some browsers treat the body and html tags differently for styling where each can be styled differently. I also forgot that if you use the DOM for scripting, I'd bet the document tree gets all screwed up if you don't follow that structure.For DOM, as par the spec, the HTML, HEAD and BODY elements must always be in the DOM tree, even if they aren't in the document. This pretty much also applies to CSS (as most browsers will add in the tags).


edit: This site (http://juicystudio.com/article/required-elements-required-tags.php) under "Optional Tags" go into the need of these tags and assumptions made by browsers. XHTML, it says, requires the tags.XHTML 1.1 requires: DOCTYPE, <html>, <head>, <title>, <body> + some form of content within the <body>; however, this is HTML 4.01, not XHTML 1.1.

drhowarddrfine
05-10-2006, 07:02 PM
The UA shouldn't assume an optional tag be there: it'd be far safer to just (for example) look for the first <title> element.Search engines don't use browsers, they use their own bots. As it says, SEs will have problems.

This was discussed (http://codingforums.com/showthread.php?t=27704) in this forum before. I would still feel on shaky ground doing that. I get that nag in the back of my head that says "It works...yeah...but..."

If this were 'free' to be done, then you would think, of all people, Google would leave it out but they don't. Rarely do you see a site that does though I know they exist. Methinks something smells of it and I'm vewy, vewy suspicious.

VIPStephan
05-10-2006, 08:28 PM
[...] YOu make it sound like you are just being rebellious than anything else. [...]
Hey, be patient guys, this guy is 14 and in the perfect age to be rebellious. :D Let him grow up and he'll calm down again. :)

gsnedders
05-10-2006, 09:49 PM
Search engines don't use browsers, they use their own bots. As it says, SEs will have problems.
I never said search engines use browsers. A bot is equally a UA, and therefore to comply with the HTML 4.01 spec should add in those tags if they are omitted.


If this were 'free' to be done, then you would think, of all people, Google would leave it out but they don't. Rarely do you see a site that does though I know they exist. Methinks something smells of it and I'm vewy, vewy suspicious.
Time to reapply that logic:
If we're free to use standards, then you would think, of all people, Google would use them but they don't. The majority of the sites on the web don't. Methinks something smells of it and I'm vewy, vewy, suspicious.

drhowarddrfine
05-10-2006, 09:54 PM
Google has already stated they are aware of this, they don't, but they will eventually. Most sites on the web are by amateurs and hobbyists, too. Standards are there for the benefit of all of us. The web should not be 'free form' in this area. You should use them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum