Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

    IE6 failing to do positioning correctly

    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?

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    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.
    Last edited by gsnedders; 05-08-2006 at 10:19 PM.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.
    Last edited by drhowarddrfine; 05-08-2006 at 11:18 PM.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can either use conditional comments or a CSS hack to give IE6 different styles.

    About Conditional Comments
    Some more information on conditional comments can be found on this page.
    QuirksMode.org : Conditional comments
    http://www.google.com/search?q=IE+conditional+comment

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

    Quote Originally Posted by Error 404
    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.
    Last edited by Kravvitz; 05-09-2006 at 06:33 AM.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by drhowarddrfine
    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.
    Quote Originally Posted by drhowarddrfine
    Also, IE6 does NOT get CSS1 correctly either.
    No browser does. Some are very, very, very close, though.

    Quote Originally Posted by Kravvitz
    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?

  • #8
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #9
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Kravvitz
    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.

  • #10
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Code:
    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:
    Code:
    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
    Code:
    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:
    Code:
    <!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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #12
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    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 )

  • #13
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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 under "Optional Tags" go into the need of these tags and assumptions made by browsers. XHTML, it says, requires the tags.
    Last edited by drhowarddrfine; 05-10-2006 at 03:07 PM.

  • #14
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by drhowarddrfine
    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?

    Quote Originally Posted by drhowarddrfine
    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.

    Quote Originally Posted by drhowarddrfine
    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).

    Quote Originally Posted by drhowarddrfine
    edit: This site 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.

  • #15
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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 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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •