DIV Doesn't Stretch to Bottom Due to DOCTYPE!

Discussion in 'HTML & Website Design' started by Mr.Dog, Dec 30, 2012.

0
Page 1 of 2
  1. #1
    Hi,

    I am coding a brand new, fresh site... not online yet, so no URL ready... just a few CSS lines, basic DIV configuration, no content left.

    My problem: the parent DIV doesn't stretch to page bottom because of the doctype. If I remove the doctype, it does stretch down. But that's a "no do", so I'm in a wicked dilemma...

    Here is my CSS for the BODY:
    body{background-color:#F0F0F0; margin: auto; padding: 0px; height: 100% !important;}

    Here is my CSS for the MAIN WRAPPER:
    parent{margin: auto; margin-top: 0px; width: 990px; height: 100% !important; padding-left: 3px; padding-right: 3px; border-width:1px; border-style:solid; border-top: 0px; border-bottom: 0px; border-color: #CECECE; background-color: #FFFFFF;}

    I tried lots of things, settings. Added and removed elements. What you see above is just the last code I have.

    Perhaps there are other ways to write/place the doctype?

    Basically the "height: 100%" should work. "!important;" should force it, but it seems like it's not getting better with it either...

    Ideas, tips, solutions?
     
    Mr.Dog, Dec 30, 2012 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    How about showing us the doctype line?
     
    Rukbat, Dec 31, 2012 IP
  3. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #3
    This is my DOCTYPE line - which is right before the HTML code, so this is my first line in the code:

    [TABLE]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/TD]
    [/TR]
    [/TABLE]

    (I don't know why that square appeared above, but you get the picture)...

    If I remove the doctype, I can stretch the DIV to bottom, but it's nuts to take the doctype out... isn't it?
     
    Mr.Dog, Jan 11, 2013 IP
  4. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #4
    Stop using transitional doctypes. It's just as nuts to use a tranny doctype as it is to use no doctype. Neither one is actually correct.
     
    Rukbat, Jan 11, 2013 IP
  5. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #5
    What should I use then?

    Is anyone smart enough to recommend a NORMAL FUNCTIONING DOCTYPE?
     
    Mr.Dog, Jan 12, 2013 IP
  6. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #6
    HTML 4.01 or XHTML 1.0 will work. Strict, not transitional, which is a transition between two 1990s types.
     
    Rukbat, Jan 12, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Without seeing the markup or a demo page, we're guessing blindly. CSS without the markup it's applied to is gibberish... as is stuffing all your properties on one line like that -- VERY hard to diagnose.

    That said, are you using a reset? What browser is exhibiting the problem? are you also setting height:100% on HTML? (which in some browsers is body's parent). For the most part if the doctype is making a difference, then you're testing IE and it's in quirks mode... the values you are setting being nonsense for 'modern' browsers.

    I'm assuming 'parent' is something like .parent or #parent, and is your min-height wrapper.

    First I'd use the reset I use for most sites... then I'd set HTML and BODY to 100% height, then min-height the height-wrapper. You should also be using min-height, not height on the content wrapping element (DIV I assume) since you want it to auto-expand taller in most cases.

    
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

html, body {
	height:100%;
	overflow:hidden; /* minor Opera bugfix */
}

body {
	background:#F0F0F0;
}

#parent {
	width:990px; /* fixed width BAD!!! open this up semi-fluid at least */
	min-height:100%;
	margin:0 auto;
	/*
		instead of padding this you should be margining it's children. 
		padding + width == road to failure
	*/
	border:solid #CECECE;
	border-wdith:0 1px;
	background:#FFF;
}

* html #parent {
  /*
		IE6/earlier knows not min-height, but incorrectly
		treats height as such.
	*/
  height:100%;
}
    Code (markup):
    If I'm reading your code properly, that's what I'd be using. Pay attention to my comments.

    ... and Rukbat is right -- use STRICT. "transitional" quite literally means your coding practices are in 'transition' from 1997 to 1998.
     
    deathshadow, Jan 12, 2013 IP
  8. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #8
    So I should apply like this?
     
    Mr.Dog, Jan 13, 2013 IP
  9. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #9
    Yes, height: 100%;

    It didn't stretch in any browser. But by removing that DOCTYPE if did stretch... didn't test in all browsers, all versions, though...

    I will try with new doctype.
     
    Mr.Dog, Jan 13, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Just be sure you set it on HTML as well as BODY -- one of the things in the specification a lot of people miss is that a % element on something that's parent element doesn't have a height set on, is ignored. The "holly hack" to trip haslayout in IE exploits this since 99% of elements are height:auto by default -- so setting height:1% often has no effect on the layout apart from triggering that one little rendering quirk/fix in IE.

    In this case, if BODY is 100% and HTML is still AUTO, that 100% on body may be ignored in standards mode (which is tripped by the doctype). You'll also find in standards mode that the box model (how width, height, padding and borders are added together) is different.

    In quirks mode (no doctype in IE) you set width:900px; padding:0 3px; border:1px; the total width will still be 900px. In standards mode (ANY valid doctype present, strict, tranny, frameset, 3.2, 5, whatever) it will total 908px... Which is how every other browser functions. IE implemented CSS while the specification was still in draft, people wrote pages to that draft, but when final came out the rendering behaviors were different -- Microsoft faced a choice, implement the final specification breaking pages, or leave it broken and hope the world used their broken version. They then noticed that most pages using the broken/draft interpretation had no doctype, but HTML 4 made it required -- so they used the doctype as the trigger to figure out which rendering model to use, reducing the number of sites broken by the change to zero.

    ... and of course that's why I'm against deploying websites using draft specifications -- as always people are refusing to learn from history.
     
    deathshadow, Jan 13, 2013 IP
    cronik likes this.
  11. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #11
    So how do I set the 100 % to both BODY and HTML? I'm not sure I get that...
    What is "HTML AUTO?"

    So far I tried setting 100 % for the parent DIV. That only worked without DOCTYPE.

    I am going to use this DOCTYPE from now on, is this a good one? I really don't know...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    Mr.Dog, Jan 14, 2013 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    html, body { height:100%; } -- just as I did in the CSS I posted up above... how else?

    height:auto; -- automatic height, the default value for pretty much all tags. If HTML is still set to the default of height:auto; it is possible in many browsers for BODY to ignore any percentage height you set on it... which is why your wrapping DIV would then ignore any percentage height set on it

    ... and again look at the CSS I put up above. height:100% on HTML and BODY, min-height:100% on your wrapping DIV... and include a reset so you might have a chance at elements behaving the same cross browser.

    It also sounds like you are ONLY testing in IE, since your doctype shouldn't matter in REAL browsers. Realistically you should be testing in ALL major engines as you develop each section of the site -- NOT writing it all to one browser and blindly hoping it will work.

    I would also again point out that without seeing what it is you are actually trying to do -- the FULL CSS and the FULL markup and all the associated theme elements, we are guessing wildly in the dark.

    That's HTML 4 Strict, the most recent recommendation doctype for building HTML. I prefer XHTML 1.0 Strict myself just for the better defined and consistent structural rules - but there's nothing wrong so long as you're working in Strict.
     
    deathshadow, Jan 15, 2013 IP
  13. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #13
    I actually had for body (in the CSS):

    Yes, I have the min-height: 100 % on the rapper too with "!important;"

    Additionally in the first 2 lines of the HTML document I have:

    (I am using the "quote" above to depict codes, just because the "code" option is not appearing now for the "reply" option...)

    There must be something else that I'm not finding.

    I am using Chrome as primary browser, in fact... but checking in IE, FF, Safari always. None of them stretch it. But if I remove the doctype, it stretches full! Of course, I don't want to do that!
    Chrome is a REAL browser.

    I can send you a PM, if you want. I am coding this site for someone I know very well, it has no real content yet, just coding it...
     
    Mr.Dog, Jan 16, 2013 IP
  14. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #14
    You're still using a transitional doctype - "XHTML 1.0 Transitional".
     
    Rukbat, Jan 16, 2013 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Yeah, tranny is bad... Though WHICH doctype shouldn't be an issue so long as there is one -- and the layout should NOT change based on having/not having a doctype in anything but IE so far as this is concerned... which to me means you've probably got something else wrong in the code.

    Go ahead and PM me what you have if you can't host it... We REALLY can't help you without the code to see what's going wrong and/or what you are missing.
     
    deathshadow, Jan 16, 2013 IP
  16. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #16
    Someone told me that this is good, because it supports HTML 5 or something like that... so I'm unsure.
     
    Mr.Dog, Jan 17, 2013 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Tranny has nothing to do with HTML 5 -- well, apart from 5's lip service undoing all the progress of STRICT. It most certainly does NOT 'support' HTML 5, and whoever told you something like that needs a serious case of STFU since, to be frank, sounds like they don't know enough to be flapping their gums on the topic.

    Admittedly there's a LOT of that out there right now -- see the nitwits who actually think there's much of value in HTML 5 from a markup perspective.
     
    deathshadow, Jan 18, 2013 IP
  18. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #18
    OK, so DeathShadow - I appreciate your help. Seems like I have a lot of work to do... For now I have 4-5 things to ask/say....

    1) Which doctype should I use then? I get it: "no tranny" :p But which then?
    I used this doctype, because I read it somewhere... hmmm I took this from some tutorial I guess and in a forum, they said "it's good". So I kept it! Not sure now which doctype to pick, I might use a wrong one again...

    I think I should add this, because I will have special foreign (non-English) characters:


    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    Someone actually told me to use this:

    <!DOCTYPE html>

    And that's "enough for HTML5". Weird... previous versions required a "declaration"...

    But this source underlines that this should be "enough":
    http://www.quackit.com/html_5/tags/html_doctype_tag.cfm

    OK, so I want to use it like this:

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!DOCTYPE html>
    content here...
    </html>

    2) I want to keep the favicon, so far it worked. I never had an issue with that. You said that kind of displaying it might cause problems - is there a better way to have a favicon?

    3) Should I quit using hyphens in DIV id's, classes? Should I rather turn towards:

    instead of:

    ?

    4) Shouldn't I just put the HTML comments inside the <DIV> </DIV> ? That was it is "in" - as I understood from you it only causes potential bugs if it's outside....

    5)     I have DIV's inside anchors, because I actutally learned (again: someone taught me) "how to link an entire DIV" and then how to apply "display: block"... at some point I also used a code for displaying the mouse "hand with finger", because the cursor wouldn't turn into that.

    So: I am using the technique to link entire DIV's, because I am using CSS buttons.

    The CSS buttons are DIV buttons, in fact.

    Is this really such a big problem?

    Should I really turn to <li></li> "lili" :p ?

    I underline: that site is still not ready. Title, content, nothing... just started coding it. Honestly: to me as long as it seemed to have worked, seemed to have been OK. Now I see there are other issues as well...

    I also cannot understand the way you put the <li><a href="index.htm">Hello</a></li>... because I need DIV's there for the CSS settings to appear.
    I have CSS buttons that will load with classes or id's (latter if they'd be unique)

    So: I would prefer using the DIV's, as the <a href="index.htm"></a>, so the links... would have to stretch to the entire DIV button. That makes the DIV button work as a linked button. (in my opinion)

    I will return with further questions, comments, but I need to check my codes...
    Again: I appreciate your help!
     
    Last edited: Jan 18, 2013
    Mr.Dog, Jan 18, 2013 IP
  19. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #19
    6) Do you know why I used classes for my buttons? That's the way they are "putting the settings" from the CSS. All first buttons have the same class, because they all have the same settings: so at least I made my CSS shorter... The last one is different, because it has a right white edge. That's why it had a different class.

    So I can have 2 classes for 5-10 buttons or more...
     
    Mr.Dog, Jan 18, 2013 IP
  20. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #20
    7) No alt text has been used for main banner, because it's not done yet. As soon as the real coding/building starts, there will be!

    8) Indeed, my text appears like this:

    <p>Bla bla bla bla</p>
    <p>More bla bla bla</p>
    <br/>
    <p>More bla bla bla</p>
    <p>Continuing the text bla bla bla</p>
    <br/>
    <p>And so on bla bla bla</p>

    What would be simpler? <p></p> seems obvious to me, but is there a simpler way so that I don't copy-paste content between each tag?
    (When inserting the page content... so it's not as easy as a CMS...)

    In order for it to look more organized, I needed to use the <p></p> formula. I don't want the entire text in one piece... And I like the "justify" function as well...

    9) I see why you say I'm using <br/> instead of padding, but the padding messed up my content, as it modified other things as well and I only needed "space" between text rows, so I took <br/>
     
    Mr.Dog, Jan 18, 2013 IP
Page 1 of 2