davej Posted July 14, 2013 Share Posted July 14, 2013 (edited) I see page examples that include something like... html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0 none; font: inherit; margin: 0; padding: 0; vertical-align: baseline;} ...and I wonder why the * selector isn't used instead? Also what is the html selector? Edited July 14, 2013 by davej Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2013 Share Posted July 14, 2013 The <html> element is the outermost container of the document. People who don't use the * selector are probably using recommended practises from a few years ago when Internet Explorer 6 (and maybe 7) didn't support the * selector. I don't use the * selector, myself, generally I can do with setting the elements myself, mainly html, body, p, h1-6, ul and ol. Link to comment Share on other sites More sharing options...
davej Posted July 14, 2013 Author Share Posted July 14, 2013 The <html> element is the outermost container of the document. I always thought that body was the outermost container of the document? What elements can be considered to be outside the body? Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2013 Share Posted July 14, 2013 The root element of the entire document is the <html> element. The <!DOCTYPE html> syntax is that way because in the doctype declaration you have to tell the DTD parser which is the root element. If you look at the most basic valid HTML document structure it's like this: <!DOCTYPE html> <html> <head><title></title></head> <body></body> </html> Link to comment Share on other sites More sharing options...
davej Posted July 15, 2013 Author Share Posted July 15, 2013 I guess I would think that all html tags and thus all elements are going to be inside the body, but somehow that doesn't seem to be true. Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2013 Share Posted July 15, 2013 Just looking at the source code of any HTML document you'll find that the root element is the <html> element. Most tags are inside the body, but some aren't. The <html>, <head>, <meta>, <title> and <link> elements are not permitted in the body. <script> is often in the <head> section rather than the body as well. Styling the <html> element is available all the way back to Internet Explorer 6 and the oldest versions I've seen of Firefox and Chrome. Link to comment Share on other sites More sharing options...
davej Posted July 15, 2013 Author Share Posted July 15, 2013 The <html>, <head>, <meta>, <title> and <link> elements are not permitted in the body. <script> is often in the <head> section rather than the body as well. Well, I've never had any luck styling a title, and I can't see why you would ever style a head, meta, or link. Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2013 Share Posted July 15, 2013 Yes, they're mostly not stylable (the <head> element can actually be given style in modern browsers and versions of Internet Explorer from 8 and up) but I'm just saying that not everything is inside the <body> element. The <html> element is a parent of the <body>. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 15, 2013 Share Posted July 15, 2013 The <html> is the outermost container you can style, the second is the <body> and child html elements within it, you are not able style anything in the <head>, as everything in the <head> except the <title> (yet) is not viewable, so what's the point. the <html> is mostly used when you require a sticky footer, where you require the whole page to be 100% height to fill the screen by default, so the footer will be be at the bottom of screen until content forces beyond the browser screen area. Link to comment Share on other sites More sharing options...
davej Posted July 17, 2013 Author Share Posted July 17, 2013 Yes, that is what I saw done. The html was given a height: 100% and this worked. Styling the body to height: 100% did not have any effect. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2013 Share Posted July 18, 2013 The sticky footer requires, html, body set to 100% height, then a child container inside the body set to min-height: 100%;, the footer OUTSIDE and below this, with a minus margin top set to the same height as footer itself. If you just have footer inside 100% height body and html it will just remain at top of body untill something forces it down to bottom of 100% height of body. Link to comment Share on other sites More sharing options...
davej Posted July 22, 2013 Author Share Posted July 22, 2013 Hmmm. I've never messed with negative margins. I guess the "sticky footer" is perhaps a slight improvement for some people. Maybe if you have a huge monitor. Link to comment Share on other sites More sharing options...
jeffman Posted July 22, 2013 Share Posted July 22, 2013 My display at home is 1080px high. According to W3Counter, almost 20% of displays are in that range, and they're bound to get more common Seeing a footer in the middle of my screen always looks incredibly dumb to me. Link to comment Share on other sites More sharing options...
davej Posted August 25, 2013 Author Share Posted August 25, 2013 (edited) Oops. I was seeing some strange results but then I noticed my file was messed up. Edited August 25, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now