SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47
  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Crafting a started layout for 2 column website

    I'm experimenting with different ways while trying to find the best, simplest, yet buletproof way that can be backward-compatible down to IE6.

    My HTML5 Code is:

    Code HTML4Strict:
    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>2 Column Layout - Percentage based</title>
    	<link rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
    	<header id="header-wrap">
    		<div id="header">
     
    		</div><!-- end #header -->
    	</header><!-- end #header-wrap -->
     
     
    	<div id="main" class="clearfix">
    		<div id="col-main-wrap">
    			<div id="col-main">
     
    			</div><!-- end #col-main -->
    		</div><!-- end #col-main-wrap -->
     
    		<div id="col-side-wrap">
    			<div id="col-side">
     
    			</div><!-- end #col-side -->
    		</div><!-- end #col-side-wrap -->
     
    	</div><!-- end #main -->
     
     
    	<footer id="footer-wrap">
    		<div id="footer">
     
    		</div><!-- end #footer -->
    	</footer><!-- end #footer-wrap -->
    </body>
    </html>


    And my CSS is as simple as this:

    Code CSS:
    body {
    	width: 100%;
    	min-width: 960px;
    	max-width: 1200px;
    	margin: auto;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	color: #333;
    }
     
    #header-wrap {
    	width: 100%;
    	background-color: #ABC;
    }
     
    #header {
    	padding: 20px;
    }
     
    #main {
    	width: 100%;
    }
     
    #col-main-wrap {
    	float: left;
    	width: 75%;
    	background-color: #EEE;
    }
     
    #col-side-wrap {
    	float: right;
    	width: 25%;
    	background-color: #DDD;
    }
     
    #col-main, #col-side {
    	padding: 20px;
    }
     
    #footer-wrap {
    	clear: both;
    	width: 100%;
    	background-color: #ABC;
    }
     
    #footer {
    	padding: 20px;
    }

    It works well on all Major browsers, except on IE versions below 8, while in IE9 it works good also. I wonder what am I missing in my CSS code to fix the header and footer area, so that the background is shown?
    Author at GraphicRiver

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Step 1, lose the HTML 5 nonsense, this isn't 2020... NOT that there is any legitimate reason to use that fat bloated steaming pile of a specification. This is even MORE true if you care about IE8 and lower, since they' don't know what HTML 5 elements ARE; NOR is throwing some stupid javascript shiv at it the answer (though guaranteed some nimrod will propose that sooner or later).

    Step 2, lose clearfix, this isn't 2001. Unnecessary element.

    Step 3, where/what is your content?!? Until you have content or a reasonable facsimile of it you really shouldn't be laying down DIV or structural elements, much less trying to apply styling to the markup.

    Step 4, ease up on the DIV. If you need that many wrappers, there's something wrong with what you're trying to do or how you're trying to do it.

    Step 5, ease up on the comments, and place them BEFORE the element being closed so you don't trip some unusual rendering bugs in certain versions of FF and IE. (there's also little reason to say "end" on those... really? </div> is the end of something? whoddathunkit?)

    Pretty much if you're trying to build a simple two column layout compatible back to IE6, what are you doing with that HTML5 nonsense, endless pointless div, etc, etc... Double wrapping it in DIV also pretty well defeats the purpose... Do yourself a HUGE favor and go back to the actual RECOMMENDATION versions of the specification -- XHTML 1.0 and HTML 4.01, preferably in STRICT.

    You might also benefit by putting the REQUIRED type attribute on your CSS link, using MEDIA attributes, and using a somewhat less vague name on the CSS file

    -- edit --

    Also, applying WIDTH to BODY is NOT reliable cross browser... given all those DIV you have I'm surprised you don't have a wrapper for doing that.... and a margin reset is also in order here...

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just to give you an example of what I mean, this:

    Code:
    <!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>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <!--
    
    	Don't forget to implement these later!
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="handheld.css"
    	media="handheld"
    />
    
    -->
    
    <title>
    	2 Column Layout - Percentage based
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>Site Name</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Forums</a></li>
    		<li><a href="#">Links</a></li>
    		<li><a href="#">FAQ</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    	
    	<div id="columnWrapper">
    		<div class="fauxColumn"></div>
    	
    		<div id="content">
    			<h2>Test section heading</h2>
    			<p>
    				Content area test text
    			</p>
    		<!-- #content --></div>
    		
    		<div id="sideBar">
    			<p>
    				SideBar test Content
    			</p>
    		<!-- #sideBar --></div>
    		
    	<!-- #columnWrapper --></div>
    	
    	<div id="footer">
    		Test Footer Content
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    	
    </body></html>
    with this SCREEN.CSS
    Code:
    /* 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;
    }
    
    body {
    	text-align:center; /* center #pageWrapper IE 5.x */
    	font:normal 90%/140% arial,helvetica,sans-serif;
    	color:#333;
    }
    
    #pageWrapper {
    	min-width:752px;
    	max-width:1104px;
    	width:95%;
    	margin:0 auto;
    	text-align:left;
    }
    
    * html #pageWrapper {
    	/*
    		IE knows not the min-width, but we can fake it with an expression.
    		First, scripting off gets a crappy fixed width (oh well), then
    		the expression.
    	*/
    	width:752px;
    	width:expression(
    		(document.body.clientWidth>1152) ? "1104px"
    			: ((document.body.clientWidth>800) ? "auto" : "752px")
    	);
    }
    
    h1 {
    	padding:20px;
    	background:#ABC;
    }
    
    #mainMenu {
    	list-style:none;
    	background:#CDE;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li a {
    	display:inline-block;
    	padding:4px 8px;
    }
    
    #columnWrapper {
    	position:relative;
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    	background:#DDD;
    }
    
    .fauxColumn {
    	position:absolute;
    	bottom:0;
    	left:0;
    	width:75%;
    	height:999em;
    	background:#EEE;
    }
    
    #content,
    #sideBar {
    	position:relative;
    	padding-top:1em;
    }
    
    #content {
    	float:left;
    	width:75%;
    }
    
    h2 {
    	padding:0 20px 0.25em;
    }
    
    p {
    	padding:0 20px 1em;
    }
    
    #sideBar {
    	overflow:hidden; /* prevent line indent after float */
    	height:1%; /* holly hack, trip haslayout, prevent float indent IE */
    }
    
    #footer {
    	padding:20px;
    	background:#ABC;
    }
    Is probably how I'd go about doing that... well, not true... I'd use a fixed side column width as variable width and narrow columns cause more problems than they solve (though I'd CONSIDER using EM there) which would open the door to using a faux-column images on #columnWrapper instead of the sandbag div.fauxcolumn I'm using. Works flawlessly all the way back to IE 5.5!

    The real laugh being that's the base HTML almost every website I've written the past six years is based on.

    My advice to ANYONE interested in HTML5, particularly if you care about people actually USING your sites, is don't even bother with that fat bloated wasteful idiocy. It only seems to exist to sell more books, prey on the ignorance of nubes and satiate the desires of the people who have the overwhelming need for "ooh, shiney and new!"... It certainly has NOTHING to do with making sites better, improving coding standards or rational decision making on the part of developers.

    To be frank, ANYONE out there promoting it's use should be ASHAMED OF THEMSELVES!

    Sorry, didn't mean to borderline threadjack -- but it needs to be said... repeatedly, over and over again until people GET IT.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Ah ds, you'll never change

    The reason the styling isn't happening in IE 6-8 is because the new html5 elements need to be added with a js script before styles will be applied to them.
    Code:
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    I don't personally use the HTML5 elements yet like section, header, footer because of that reason.
    Still, the js script will work well enough for all the major user groups.

    The wrappers div's are the only thing that's unnecessary in your layout so far.
    clearfix is still widely used a helpful style, stick with it, looks fine.

    If you're just looking for a solid base for HTML5 you might just want to go with http://html5boilerplate.com/

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    The reason the styling isn't happening in IE 6-8 is because the new html5 elements need to be added with a js script before styles will be applied to them.
    and I quote:
    Quote Originally Posted by deathshadow60 View Post
    NOR is throwing some stupid javascript shiv at it the answer (though guaranteed some nimrod will propose that sooner or later).
    Then this... even more laughable.
    Quote Originally Posted by markbrown4 View Post
    If you're just looking for a solid base for HTML5 you might just want to go with http://html5boilerplate.com/
    Wow, why don't you just tell him to use Frontpage at that point...

    Or were you intentionally bear-baiting?

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:


    Or were you intentionally bear-baiting?
    Just being relevant and not a militant arrogant expert at the same time.

    It's a brave world out there Jason, the times they are a changin'
    HTML5 can be used, html5 boilerplate has heaps of good stuff in it, people should start using this stuff and learning about it yesterday.

    Most of HTML5 was designed to be backwards-compatible so there's no harm adding what falls into that basket.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    HTML5 can be used
    If you don't mind flushing your website down the toilet.

    Quote Originally Posted by markbrown4 View Post
    html5 boilerplate has heaps of good stuff in it
    ... and methinks we have a different definition of "good" -- as much like every other html/css framework out there it's some of the biggest idiocy I've seen this side of "OOCSS" or still making pages in Frontpage.

    Quote Originally Posted by markbrown4 View Post
    Most of HTML5 was designed to be backwards-compatible so there's no harm adding what falls into that basket.
    Unless it's your own head after falling for the snake oil. Hell, I can't believe anyone who actually knows ANYTHING about building a website can actually see ANY benefit from the markup parts of HTML 5... unless again it's the people who still vomit up HTML 3.2 and until recently slapped a 4 tranny doctype on it. Go progress...

    Newer isn't always better.
    Newer isn't always Better

    Say it with me people!

    Newer isn't always Better!!!

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Braveheart4 View Post
    I'm experimenting with different ways while trying to find the best, simplest, yet buletproof way that can be backward-compatible down to IE6.
    Then why, why, why on earth are you playing with HTML5?

    See below -

    Quote Originally Posted by markbrown4 View Post
    HTML5 can be used, html5 boilerplate has heaps of good stuff in it, people should start using this stuff and learning about it yesterday.
    If you're just mucking around then sure, have a play with HTML5. HTML5 is just the latest (partially built) new toy for noobies in the web development sandpit. But if I'm building and/or maintaining a commercial website I can't think of a single valid reason why I would consider, even for a nano second, using html5.

    HTML5 IS NOT EVEN FINISHED YET..!!! and so why use a half baked spec which won't be officially released for at least a few years and will most likely at least in parts be different to what it is today.

    Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers. So it never ceases to amaze me that people come waltzing into forums with their brand new shining html5 code and wonder why it works in some browsers and not in others - oh dear .

    Playing with html5 atm and wondering why it doesn't always work is a bit like moving into a partially completed house and wondering why the lights don't work WHEN THE FRIGGIN' WIRING ISN'T DONE YET.

    Use html5 at your own risk

    When html5 is fiiiiinaaaally released, and it's better supported by the major browsers, then I'll have a tinker with it. Until then, it's a waste of time.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I agree with ds and webdev that if the single most important thing about your website is it being bulletproof all the way down to a ie6(over a decade old) then don't use HTML5.

    Apart from that, I find your arguments against html5 weak yet entertaining.

    ds, you nailed it - we have very different definitions of what makes a good website. If it serves the users well and is satisfying to make that's good enough for me.
    I don't care for a religious debate about stuff that doesn't matter - e.g. you get yourself all worked up over white-space and indenting, It just doesn't matter.

    HTML5 is just the latest (partially built) new toy for noobies in the web development sandpit.
    HTML will never be finished, it's an evolving spec, some of the best web developers are using it already.

    So it never ceases to amaze me that people come waltzing into forums with their brand new shining html5 code and wonder why it works in some browsers and not in others - oh dear.
    The person waltzing into the forum doesn't need others calling him a noob and flaming him for asking a simple question.

    Neither of you have proposed any serious argument other than dismissing it out of hand.

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Here's what I might do with your html, only very minor changes.
    Code html5:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>2 Column Layout - Percentage based</title>
    <style>
    body {
    	width: 100%;
    	min-width: 960px;
    	max-width: 1200px;
    	margin: auto;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	color: #333;
    }
    #header {
    	background-color: #ABC;
    }
    #main {
    	overflow: hidden; /* instead of clearfix */
    	width: 100%; /* instead of clearfix */
    	background-color: #DDD;
    }
    #content {
    	float: left;
    	width: 75%;
    	background-color: #EEE;
    }
    #aside {
    	margin-left: 75%;
    }
    #footer {
    	background-color: #ABC;
    }
    #header, #footer, .inner {
    	padding: 20px;
    }
    </style>
    </head>
    <body>
    <div id="header">
     
    </div>
    <div id="main">
    	<div id="content">
    		<div class="inner">
    			<h1>Content</h1>
    			<p>Content</p>
    		</div>
    	</div>
    	<div id="aside">
    		<div class="inner">
    			<p>Content</p>
    		</div>
    	</div>
    </div>
    <div id="footer">
     
    </div>
    </body>
    </html>

  11. #11
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I agree with ds and webdev that if the single most important thing about your website is it being bulletproof all the way down to a ie6(over a decade old) then don't use HTML5.

    Apart from that, I find your arguments against html5 weak yet entertaining.
    The browsers don't have to be a decade old.

    I repeat:

    Quote Originally Posted by moi
    HTML5 IS NOT EVEN FINISHED YET..!!! and so why use a half baked spec which won't be officially released for at least a few years and will most likely at least in parts be different to what it is today.

    Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers.
    I haven't had a client so far that would be happy with their website working in only some of the major browsers.

    And I still haven't seen your "bullet proof" solution to IE6 as requested by the op using the op's markup.

    "bullet proof" means without the use of javascript because not all users will open the page with js enabled.

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers.
    Relax, Breathe.

    You are wrong. The browser vendors are all working together along with people who care about the spec towards the same goal.
    There is a whole host of HTML5 that you can use without any ill-effects. In newer browsers you get benefits, in older you don't. That's fine.

  13. #13
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    ....You are wrong......
    No, I'm not wrong because you yourself said

    The reason the styling isn't happening in IE 6-8 is because the new html5 elements need to be added with a js script before styles will be applied to them.
    I see adding js code just to use some additional html5 elements as a waste of time if I don't need to use the elements in the first place.

  14. #14
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    In newer browsers you get benefits,....
    not all of them.

    <input type="number" is not supported in IE9 but it is some other browsers.

    That's the point I am making. With varying degrees of support like this, "playing" with html5 for me atm is a waste of time, especially for commercial work.

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I see adding js code just to use some additional html5 elements as a waste of time if I don't need to use the elements in the first place.
    I agree in part - which is why I don't use those HTML tags that don't do all that much really..
    I don't agree with the whole comment - I find some js shims to enable support for newer features great.

    Two examples are Doug Crockford's JSON implementation
    https://github.com/douglascrockford/JSON-js

    Remy sharps localstorage shim
    https://gist.github.com/350433

    There's a heap more that can be used which fix a lot of the inconsistencies you're claiming makes newer features unusable.

    not all of them.
    <input type="number" is not supported in IE9 but it is some other browsers.
    This is not a problem for me, or HTML5. This is what I am referring to as backward compatible implementation of a feature.
    If the browser doesn't support a number spinner they just get a normal text input. That's fine.
    If they support the spinner, great! they don't have type the numbers.

    These are not mission critical elements, web pages don't have to look the same in every browser, just makes something that works for real people. That's all that matters.

  16. #16
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @markbrown4

    Quote Originally Posted by webdev1958 View Post
    And I still haven't seen your "bullet proof" solution to IE6 as requested by the op using the op's markup.

    "bullet proof" means without the use of javascript because not all users will open the page with js enabled.
    still waiting

    The only way I know to make it bullet proof down to IE6 is by ditching the html5 specific elements, which in this case are not needed to get the required layout.

    Let's see how you would make the op's markup "bullet proof" down to IE6.

    It's the only way you are going to convince me you know what you're talking about

  17. #17
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    It's the only way you are going to convince me you know what you're talking about
    I don't actually care about convincing you if you're stuck in your ways.

    still waiting
    Uh, see post #10

  18. #18
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    If the browser doesn't support a number spinner they just get a normal text input. That's fine.
    If they support the spinner, great! they don't have type the numbers.
    Imo that's ludicrous and I would never do that to a client.

    I wouldn't even waste my time coding an <input type="number"..... in that case.

    I would create my own spinner with javascript which would work in all browsers and then only give them preferably a <select> or a text input if javascript is not available.

  19. #19
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Uh, see post #10
    oh dear

    I said
    Let's see how you would make the op's markup "bullet proof" down to IE6.
    What you have done in post 10 is remove the html5 specific elements which is what I was saying all the time - don't use html5 because it isn't finished yet

    Your own solution is in fact proving the point I have been making

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    http://dowebsitesneedtolookexactlyth...rybrowser.com/

    What you have done in post 10 is remove the html5 specific elements which is what I was saying all the time - don't use html5 because it isn't finished yet
    That's the wrong reason. You don't seem to be listening to me - but I said in my first reply "I don't personally use the HTML5 elements yet like section, header, footer because of that reason." Apart from that one thing, we are in complete disagreement about how a web page should function and the point of HTML5.

    Your own solution is in fact proving the point I have been making
    I didn't realise you made a point.

  21. #21
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I didn't realise you made a point.
    The points I have been making:

    Quote Originally Posted by moi
    If you're just mucking around then sure, have a play with HTML5. HTML5 is just the latest (partially built) new toy for noobies in the web development sandpit. But if I'm building and/or maintaining a commercial website I can't think of a single valid reason why I would consider, even for a nano second, using html5.

    HTML5 IS NOT EVEN FINISHED YET..!!! and so why use a half baked spec which won't be officially released for at least a few years and will most likely at least in parts be different to what it is today.

    Especially because html5 is only half baked atm, browser support for it varies greatly amongst the browsers. So it never ceases to amaze me that people come waltzing into forums with their brand new shining html5 code and wonder why it works in some browsers and not in others - oh dear .
    And even your own solution did not use any html5 specific elements which is what I am saying above should be the case.

  22. #22
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Do you know there's a heck of a lot more to HTML5 than <header> <footer> <section> and <article> ?

    Those are the least of HTML5 in my opinion.

  23. #23
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and when it's finished I'll have a closer look at it for commercial use.

    Before that, I'm not going to waste my time with it for the reasons I mentioned earlier. So in the mean time we can just agree to disagree on the merits of using it before it is finalised.

  24. #24
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys guys, sorry for interrupting, but even from your arguing I learned a lot. So keep doing that :P

    To get to the point. Yes, I don't know how I didn't realized about the un-suportivness of the HTML5 tags in older IE browsers versions. Thanks for reminding me that. So my solution is, if the website's visitors are going to be tech-savvy and modern, they are most most probably not going to have JS turned off. For that reason I would use a little JS help from modernizr to get my HTML5 tags working. However, if I develop a website for older and more inert people, and especially a website with tens of thousands of hits per day, I wouldn't risk and layout it with HTML5, in case someone does not have JS enables. So it all comes down to the stats. Who know if HTML5 will be finally implemented in 2020? Why don't we just start using it today, if it's logical to do so, like I stated above.

    One thing I still can't quite get it is, how can you add a fixed padding (in this case 20px) if the DIV already has a relative width (in this case %)? I though that's not possible, so I used one wrapper with particular width in percentage, and then use an inner div just to set the fixed padding. Thanks for providing me an alternative solution.

    Post #10 is really helpful. Thanks for that too! Are there any layout tutorials that I can really understand not just how, but why it is done as it is done? Matthewjamestaylor gives some really cool starter layouts, but doesn't give much explanation of what's going on. Any other, more modern, layout solutions like that out there? I plan to develop my own set of starter layouts, some with fixed sidebars and flexible main column, while some even 3 column-based. That will help me with fast prototyping when starting new projects.
    Author at GraphicRiver

  25. #25
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Braveheart4 View Post
    Why don't we just start using it today, if it's logical to do so, like I stated above.
    That's where we differ. I don't think it is logical to use html5 yet for the reasons I mentioned before.


Tags for this Thread

Bookmarks

Posting Permissions

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