DIV Doesn't Stretch to Bottom Due to DOCTYPE!

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

0
Page 2 of 2
  1. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #21
    11) I used "separator" DIV's to do margin's and padding's job, because from my experience it seemed simpler.

    12) No, I didn't start building up the content, that's why I was using bold text as H2. Only for testing. It will not remain like that.
     
    Mr.Dog, Jan 18, 2013 IP
  2. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #22
    UPDATE:

    I just changed my doctype and html to:

    And this is what Notepad++ did:

    -it transformed the entire thing:

    -but changed the <!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml"> to black, while at the end of the code, the </html> (closing tag) is still blue (!) >>> whenever I see color change in Notepad++, I think something's not working... I this is not the case...

    -suddenly: my DIV stretched to 100 %!

    I'd proceed to apply this to all pages... provided that it's correct.
     
    Mr.Dog, Jan 18, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #23
    For those of you a bit lost in his responses, much of it is from the PM he sent me and I sent back.

    First off, if Notepad++ is changing what you type in, you've got it set wrong... a simple editor like notepad++ should NOT be doing a blasted thing to the markup you type -- if it is, gut it's setting or find a better editor... the only thing I can think of that might be doing that is you blindly following it's 'autocomplete' -- a steaming pile of editor idiocy that you would be WAY better off without since it's most always wrong; most of the time autocompletion is enabled in an editor I spend more time correcting it's garbage than I do actually typing code... It's almost as stupid as tabbed editing.

    Lemme see if I can go through your numbered responses.

    1) It's called "STRICT". You seemed to be using XHTML 1.0 Transitional on the version you sent me, what should be used is STRICT as it's the most recent recommendation doctype... as per the code example I sent you.

    
<!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"
	lang="en"
	xml:lang="en"
><head>
    Code (markup):
    Being a complete and well formed doctype and HTML tag.

    Again, I would suggest pretending the entire half assed coat hanger twist abortion known as HTML 5 be avoided. The handful of bytes saved on the lip-service doctype is offset by the pointless idiotic bloat.

    2) Keep the favicon -- you just shouldn't have a TYPE declaration on it, because that confuses some browsers... just:

    
<link
	rel="shortcut icon"
	href="/favicon.ico"
/>
    Code (markup):
    gets the job done.

    3) Hyphens are 'technically' improper in classes and ID's... mostly because they can confuse some scripting languages. I like to use camelCase, others prefer under_scores. contentWrapper would be my choice. The all lower case you typed not having any word delimits.

    More of a concern was that you were using crypic names and abbreviations instead of the full words... which combined with your 4.

    4) Moving them inside is what I was saying, but I was also pointing out pointless bandwidth wasting comments... like saying "Start" for <div> and "end" for </div> -- of course it's a start you're opening a tag, of course it's an end your closing a tag... and if you use a verbose ID or Class on the opening tag, what the devil are you wasting a comment on? Again, read that article I linked to. I'm particularly fond of the "Oh, now we're done" part... and take a good hard look at the code I put in the PM.

    5) whoever taught you that needs to learn more HTML and CSS before opening their mouth on the subject. Even if HTML 5 claims you can put inline-level tags around block-level, it's unreliable broken garbage and there's no reason for you to need it since you can just float the anchors instead of the DIV. You want display:block, NOT block-level. You're basically using HTML to do CSS' job.

    As to putting it in a list, that's semantic markup -- the entire point of HTML is supposed to be saying what things are, NOT what they look like. As I said the way you had it screen readers would treat that menu as a run-on word. Your methods of applying CSS are broken, redundant, and to be frank not how it's done.

    You're throwing DIV around things for no good reason... especially since even if you didn't use a list, you could STILL apply all that to the anchors! There isn't a blasted thing you can apply to a DIV in CSS that cannot be applied to most every other tag... including A.

    6) Then only use a class on the one that's different - me, because I'd be using a list -- or if I was using all those pointless DIV -- would put that white border on the left side of the PARENT, then right border on all the child elements... then none of them need classes.

    7) My point being it probably shouldn't even be an IMG tag. It's a presentational affectation of text, hence it should BE text with an image replacement so things like screen readers and people browsing with images disabled aren't left out in the cold.

    ... on top of which it's just one more error in the validator to get in the way of finding REAL errors. If you can't bother to write valid semantic markup before you even THINK about applying CSS or theme/non-content images to anything... well, it brings into question if you should be building a site.

    8 and 9) Your text was actually with BR between EVERY P, but they seemed to only be there to do padding's job... What's simpler, saying to pad or marging the P once in the CSS, or every blasted time in the markup? The entire point of P is to mark content paragraphs, P are block level, you shouldn't be manually inserting extra linefeeds on them.

    I don't see how padding the bottom would 'mess up' the layout, unless you were doing it wrong.

    Of course, that you seemed to be using P+B to do heading's job...

    I think you skipped 10...

    11) Extra markup is NEVER simpler... or desirable.

    12) Writing CSS before you have your markup reasonably close to complete and accurate is a waste of time and effort.

    I'm gonna start in on analyzing your CSS and doing a rewrite of it in a few minutes.
     
    deathshadow, Jan 18, 2013 IP
  4. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #24
    Reading what you are writing there...

    Meanwhile I put in this instead of the UTF-8 character set:

    This might not be the best one... but the UTF-8 gave me wicked ugly question marks.
     
    Mr.Dog, Jan 18, 2013 IP
  5. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #25
    I am going through all you wrote...

    I still don't know which doctype to use. "Tranny" out. HTML 5 out?

    Not sure, now I will have special characters, so it will be basically in English, but Spanish, French, German, Polish, Hungarian, Turkish, Portuguese words with specific characters will appear in context.

    I I use like this, will that be OK? I would add that charset as well... But this does not allow the DIV to stretch!

     
    Mr.Dog, Jan 19, 2013 IP
  6. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #26
    Another thing is that now I'm having difficulties in setting the right width for the vertical field on the right and for the content field as well.

    I need 638px for content and 330px for right vertical field. Have never used that "em" before, but pixels. I know I could convert, but it's simply not propagating.

    Then it seems to have worked as I set:

    This new way of coding is completely "Martian language" to me, but I hope I'll understand and learn sooner rather than later.
     
    Last edited: Jan 19, 2013
    Mr.Dog, Jan 19, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #27
    If you fix the width of both columns, you have a fixed width layout -- something I suggest NEVER DOING ON A SITE for accessibility reasons -- well over a third of the code in the CSS is there to provide a fixed width side column and a fluid content one.

    You got the width and margin-left done correctly, but you shouldn't be stating a width on #content... even if you're working towards a crappy fixed width. The margin right on #content makes room for the sidebar, so that should be the same as the sidebar width -- do NOT declare a width on #content.

    If you want a crappy half assed inaccessible fixed width you would need to delete all the media queries from the end of the CSS, remove the min-width and max-width from #pageWrapper and set the total width there instead.

    Basically where I have:
    
#pageWrapper {
	overflow:hidden; /* wrap floats, contain margins */
	min-width:768px;
	max-width:990px;
	width:95%;
	min-height:100%;
	margin:0 auto;
	text-align:left;
	background:#FFF;
	border:solid #CCC;
	border-width:0 1px;
}

* html #pageWrapper {
	/* 
		IE6/lower knows not min-height, but will incorrectly
		treat height as such.
	*/
	height:100%;
	/*
		IE6/lower also doesn't know min/max width, so feed it a
		crappy fixed width at the lowest common denominator
	*/
	width:768px;
}
    Code (markup):
    You'd gut it down to:

    
#pageWrapper {
	overflow:hidden; /* wrap floats, contain margins */
	width:990px;
	min-height:100%;
	margin:0 auto;
	text-align:left;
	background:#FFF;
	border:solid #CCC;
	border-width:0 1px;
}

* html #pageWrapper {
	/* 
		IE6/lower knows not min-height, but will incorrectly
		treat height as such.
	*/
	height:100%;
}
    Code (markup):
    and delete everything from this onwards:
    
@media (max-width:796px) {
    Code (markup):
    Though I HIGHLY recommend against doing that, since again, that turns it into a steaming pile of manure fixed width design, the antithesis of accessibility that would be too big for my netbook or tablet, and too small for my desktop. As it is I'd redesign the logo image so that the background is separate from the logo (kind-of) so that the background image could be tiled to allow it to expand even wider -- since I'd be setting the max-width in EM.

    I went with EM so that it's both semi-fluid and elastic... if you are thinking in pixels in all but the rarest of instances, you're thinking wrong. "needing" to fix the width probably means you're not thinking properly about handling or developing your content.

    As to UTF-8, changing to ISO is ok if it's going to be english language only -- but if you are going to be more flexible UTF-8 is the future since it's easier to mix languages on it. The big thing is you have to make sure your server is set up to send UTF-8 AND your editor is set to save as UTF-8 (without the byte-order-mark at the beginning)... otherwise yes, you'll get those funky inverted question marks from invalid characters and/or encoding mismatch.

    ... you also mentioned (forget if it was in thread or via PM) a blue stripe under the logo -- that would probably mean the total height is getting messed up by you editing something like the images off text, it's line-heights, and/or it's padding.

    I'm going to toss together an analysis of your CSS and a breakdown of how/what/why I did things in the HTML and CSS for you this evening. (If I'm not still glued to the toilet or passed out from cold medicine.... flu season sucks when you're already dealing with poor health.)
     
    deathshadow, Jan 19, 2013 IP
  8. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #28
    Hi,

    Meanwhile I'm experimenting with DOCTYPES and charsets with my other sites. Getting errors and other stuff...

    I've decided to use thins charset:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    But, how can you tell which DOCTYPE should be used for one particular site?
    I run several sites, some are a lot older and need a lot of re-working, updating. And I can't figure out which doctype it adequate...

    W3 validator gives me 18/27/40...etc errors on each one if I try.

    So I tried the simple HTML 5 doctype declaration. Because it was the "literally nothing"/simplest declaration and W3 Validator said it cannot read it.
     
    Mr.Dog, Jan 19, 2013 IP
  9. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #29
    I will definitely return and continue this issue in a few days. But my PC is going through a round of weird errors that I have to solve and it's keeping me from working on these sites...

    Will post updates as soon as I'm done with solving these problems...
     
    Mr.Dog, Jan 23, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #30
    I kinda lost track of this anyhow thanks to this new painfully slow and even more painful to navigate version of the forums.
     
    deathshadow, Jan 23, 2013 IP
    scottlpool2003 likes this.
  11. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #31
    Yes, the design swap is bothering me as well...
    I am struggling with software problems, so I could hardly check that code you made.
    Bad luck: my ISP is sluggish, I can hardly get internet.
    Will return a.s.a.p. with details... I have lots of questions to ask.

    Managed to adjust that under-banner blue space I was talking about, but your way of coding is a bit unusual, although I know it's the correct way.

    Don't you think the hidden H1 title will attract Google penalties? It's good not to hide anything and that's really hidden. I'm more into online marketing than coding (the latter of which I only do for a strict necessity).
     
    Mr.Dog, Jan 24, 2013 IP
Page 2 of 2