LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 June 15 2012

Kassem
Member

*Proper* HTML and CSS References

Hey everyone, we've recently moved away from building Silverlight applications in favor of HTML applications/websites. I've noticed that the my team-mates and I have been spending most of our development time in the presentation layer. We spend hours trying to stuff aligned properly across browsers. We do not have a problem with the JavaScript part as I'm doing most of it, but we definitely have issues with HTML and CSS.

So the question is, does anyone know about any reference or training courses (in person or online) that are actually useful? And when I say useful, I mean something/someone that could teach us tips and tricks to solve real-world scenarios that do occur during our daily development. I do not want to know what a div is, what an anchor tag is...etc, we're already past this by a long shot. In brief, we need to learn how to write markup that is concise and standards-compliant.

Suggestions please?

Offline

#2 June 15 2012

rtp
Member

Re: *Proper* HTML and CSS References

i like using float a lot since it get rendered the same way across all browsers...

ofcourse for some fancy things floats might not work... but for like 80% of designs it does....

so for positioning i do recommend float.. tables are good as well for some scenario such as forms mainly...
since aligning a form with divs can be annoying...

not sure of any reference tho but the concept is really simple...

you can either float a div to the left or to the right and you can clear either to the left , right or both...

but first you need to understand the difference between display:block and display:inline... which is quite simple... block take all the line that the div is on while inline doesnt... an example of a block by default is a div and an example of an inline is the span tag...

so when you do a float:left you are telling the div to go the left and make space for another div to come near it...

<body>
  <div> Hello </div>
  <div> World </div>
</body>
<!-- output -->
Hello
World
<!-- output end -->

<body>
  <div style="float:left"> Hello </div>
  <div style="float:left"> World </div>
</body>
<!-- output -->
Hello World
<!-- end -->

now if you want  to have the same effect like the first one using float:left then you simply add a clear:left which points that the second div should clear to a new line and fit itself to the left

<body>
  <div style='float:left'> Hello </div>
  <div style="float:left;clear:left">World </div>
</body>
<!--output>
Hello 
World
<!-- end -->
</body>

with this simple example you cant accomplish nearly most designs... all you need is some padding margin and you can do nearly anything with this simple but powerful styling...

padding vs margin
-padding is the space from the border to inside, be advised that when you add a padding you will have to decrease the size of the div since padding increases the size of the div...
- margin is the space from the border to the outside (surrounding divs) i usually use margin to push surrounding divs... lets say you have an image and you want to push the content under it to 10px...

<div style="float:left;margin-bottom:10px">
  <img src="#" />
</div>
<div style="float:left;clear:left">
content goes here
</div>

Last edited by rtp (June 15 2012)

Offline

#3 June 15 2012

Joe
Member

Re: *Proper* HTML and CSS References

rtp's suggestions are valid, if only that he concedes the use of tables for positioning. Let me say this loud and clear:

In 2012, using tables for anything but tabular content is a crime against the Internet

As for what you're looking for Kassem, I don't think the reference you're talking about exists on the net. If you know what a div is, how to apply a class or an id, and are familiar with common CSS and/or html tags, than there's nothing a standardize cheat sheet can do for you.

I am not a designer, but I know how the web works. Here's what you can do:

- ask on a per case basis, here on LG or other places like StackOverflow.
- join an online community of designer. Be active, and read their already existing content.
- look into alternate markup languages (like markdown) or template engines like Jinja.

Ultimately, one on one sessions with designers and workshops are most gratifying on the short term, but at the end of the day, what you are asking for can only be acquired through hours of practice, trials and errors.

Offline

#4 June 16 2012

rolf
Member

Re: *Proper* HTML and CSS References

The proper reference would be the official spec, but virtually nobody reads them.
For your alignment problem, you need to get your DOCTYPE right to begin with, I use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

It gives me consistent results across browsers.
You may also need a CSS reset. at least margins and paddings! Example:

* {
font-size:12;
padding:0;
margin:0;
border:0;
}

Building on top of that you should have consistent results across browsers. IE8 sometimes requires some adjustments, and there's a bug with PNG transparency (with workarounds). IE7 will need more adjustments. Inline blocks will need a fix in CSS:

.someInlineBlock {
display:inline-block; /* standard compliant */
*display:inline;  /* these will make it work in IE7 */
*zoom:1;
}

CSS rules prefixed by an asterix will only be parsed by IE browsers. Another trick to target IE browsers with fixes are conditional HTML, only understood by IE browsers:

		<!--[if lt IE 8]>
			<link rel="stylesheet" type="text/css" href="css/ie7.css" />
		<![endif]-->

That says "if less then IE8... non IE browsers will interpret the whole block as a comment.

rahmu wrote:

In 2012, using tables for anything but tabular content is a crime against the Internet

Don't listen to him :) Tables are valid HTML. But make sure you use DIVs. By floating them, or by setting display to  inline-block and by using relative alignment, margins and padding you should be able to cover all usage cases without having to resort to tables. But tables have some useful features; their cells expand automatically and their height expands to the height of the tallest cell, something that you can't reproduce easily with DIVs, which sometimes makes them useful in design, in some particular and complex cases.

Offline

#5 June 16 2012

rtp
Member

Re: *Proper* HTML and CSS References

i believe tables are still useful...

@rofl

<!DOCTYPE html> <!-- html5 somebody-->

again sorry i dont know of any reference maybe you can check w3schools.com and see if they got anything

Last edited by rtp (June 16 2012)

Offline

#6 June 16 2012

Ra8
Member

Re: *Proper* HTML and CSS References

I like this reference: http://help.dottoro.com/
It helped me in some cases..

Offline

#7 June 16 2012

Joe
Member

Re: *Proper* HTML and CSS References

I cannot believe I'm still getting drawn into an html table argument, I thought we had defeated this evil. There's a big difference between "it works" and "it's correct". Open your tabled-layout page in an alternate browser, like screen readers or text browser. Don't even go that far, open it with your smartphone  browser. Oh no! It doesn't make sense anymore!

Talk to people manipulating the DOM of your page. Talk to people developing layout engines. They HATE pages using tables for layout. It cripples their work. Not only it's non-standard, it is just wrong.

HTML (messed up as it is), stands for a Markup language. Before suggesting to "read the spec" I suggest you read a definition of markup and what it stands for.

But of course who cares what purists have to say. They are old and cranky and don't understand modern youth. We revel in approximating laziness, claiming some bullshit about "only the end result matters". God forbids we read something longer than 50 lines or spent more than 15 mins working on some technical detail. The most important thing is that we crap some website that my friends can look at on their IE browser. The world won't go beyond our own limited perception.

Oh @rolf, maybe it's time you went from HTML4 to something a "bit" newer. Just saying.

Finally out of respect for the OP, I contacted some designer friends who suggested this website. I don't know what it's worth really, but Kassem you can always check that out.

Offline

#8 June 16 2012

Kassem
Member

Re: *Proper* HTML and CSS References

rolf and rtp have provided some valuable tips. Most of rtp's tips I already know, but the IE fixes provided by rolf are totally new to me, so thanks for the tips guys, much appreciated.

As for the discussion about tables, I totally agree with rahmu. In fact, the following sentence is literally the same thing I said yesterday to a fresh graduate who has just got hired to join my team at the company:

rahmu wrote:

There's a big difference between "it works" and "it's correct".

I did not say it in this particular context though, I was explaining to her why developing loosely coupled components in a system is a much better approach than what she has been taught to do at school. So yeah, tables are for tabular data. Period. I am sure the guys behind HTML came up with the div element for a valid reason, otherwise they could have just settled with tables if it were the right way to go.

I personally believe that HTML markup should not be taken lightly. Just like you normally take the time to write clean and maintainable server-side code, you should also attempt to write expressive and correct HTML markup. And learning how to do the latter is exactly what I was asking for in the first place. :)

Offline

#9 June 16 2012

rolf
Member

Re: *Proper* HTML and CSS References

rahmu wrote:

I cannot believe I'm still getting drawn into an html table argument, I thought we had defeated this evil. There's a big difference between "it works" and "it's correct". Open your tabled-layout page in an alternate browser, like screen readers or text browser. Don't even go that far, open it with your smartphone  browser. Oh no! It doesn't make sense anymore!

Talk to people manipulating the DOM of your page. Talk to people developing layout engines. They HATE pages using tables for layout. It cripples their work. Not only it's non-standard, it is just wrong.

HTML (messed up as it is), stands for a Markup language. Before suggesting to "read the spec" I suggest you read a definition of markup and what it stands for.

But of course who cares what purists have to say. They are old and cranky and don't understand modern youth. We revel in approximating laziness, claiming some bullshit about "only the end result matters". God forbids we read something longer than 50 lines or spent more than 15 mins working on some technical detail. The most important thing is that we crap some website that my friends can look at on their IE browser. The world won't go beyond our own limited perception.

Oh @rolf, maybe it's time you went from HTML4 to something a "bit" newer. Just saying.

Finally out of respect for the OP, I contacted some designer friends who suggested this website. I don't know what it's worth really, but Kassem you can always check that out.

I have nothing against purists, nothing against you either, I believe, although you seem to push my buttons sometimes for some reason (not saying you're doing it on purpose). And I guess that last allusion you made to me "still using" HTML4 is one of them.

Yet, as far as I know, you're not an HTML developer, you said it  yourself in your first post in this thread. Please correct me if I'm wrong. It doesn't make your opinion less valid, it just changes my perspective on things a bit.

I don't know where you got all your examples from, but they don't apply to what I'm talking about. I have used tables now and then when I found that DIVs could not provide what I wanted, and I have never had any problems at all with them in this particular scenario. Now of course if you do all your layout using nested tables, then you're gonna end up with unmanageable HTML and might run into problems like what you described, although what you described is most probably not only the result of using tables but plainly bad development.

And the part where you say "God forbids we read something longer than 50 lines or spent more than 15 mins working on some technical detail." clearly does not apply to me, and if it does then you clearly know nothing about me and how I work.

I am sorry if my message did not go through in the first place. Just to make sure, my message was (and remains):
You should use DIVs for the layout. You should do every practical and realistic effort to use DIVs, yet if you find yourself in a situation where using a SINGLE table would solve a problem that is virtually impossible to solve with DIVs, then I think it's OK to use a table. Tables are valid HTML, and nowhere in the HTML specs does it say what you can put inside them and what you can use them for (and hopefully never will), so I'm sure that using tables for layout is not "a crime" or "evil" especially if you know what you're doing.

Last edited by rolf (June 16 2012)

Offline

#10 June 16 2012

Joe
Member

Re: *Proper* HTML and CSS References

@rolf: My attacks and rants have nothing personal against you. I sincerely apologize if I offended you in any way, it was not my intention.

What is unacceptable on the other hand is advocating the use of tables for layout now. I am not being a bitch gratuitously; I am sincerely shocked someone would still advocate this malpractice in 2012.

My comment about "not reading anything longer than 50 lines" referred to the HTML spec that by your own account haven't read.
Had you done it here's what you would've found:



The Web Hypertext Application Technology Working Group (WHATWG) is one of the bodies writing the spec for HTML5. Here's what they have to say about it:

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

Note:There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.

.

By digging in the source code for the HTML page, I found the following comments that explain why they added the above paragraph (emphasis mine):

<!-- The paragraph below replaces the above one in the W3C copy due
  to a WG decision. It is not used in the WHATWG copy for the
  following reasons:

   * "should not" implies that there may be valid reasons to use
     tables for layout, which there are not.

   * The second sentence appears to be grammatically incorrect, and
     more importantly, does not clearly state that use of tables for
     layout has always been a misuse
. This implies it may have once
     been correct (even though that is not the case), and that further
     may reduce the effectiveness of advocacy on this topic.

   * The paragraph below seems to assume that only ARIA-enabled ATs
     are a concern, when in fact there are numerous UAs other than
     ARIA-enabled ATs that are harmed by this use of layout tables.

   * The text below actually contradicts other requirements in this
     specification (<table>s represent tables, and elements must be
     used per their semantics
, so the requirement that tables not be
     used for layout is in fact technically redundant, and the
     paragraph below doesn't change that).

   * There really is no good reason to use tables for layout anymore,
     and conformance criteria should support best practices, not
     obsolete authoring practices.

  -->

Okay, but maybe this is new HTML5 mumbo-jumbo, it's supposed to be the future. What do current standards say?
Ignoring xHTML, since it's only a rebranding of HTML4, let's go directly to the spec of version 4:

Note. At the time of writing, some HTML authoring tools rely extensively on tables for formatting, which may easily cause accessibility problems.

If you're wondering, this document was last modified in 1999. 13 years, at least, that governing bodies have raised awareness against this evil and people still do it... :-/

Offline

#11 June 16 2012

rolf
Member

Re: *Proper* HTML and CSS References

rahmu wrote:

My comment about "not reading anything longer than 50 lines" referred to the HTML spec that by your own account haven't read.
Had you done it here's what you would've found:



The Web Hypertext Application Technology Working Group (WHATWG) is one of the bodies writing the spec for HTML5. Here's what they have to say about it:

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

Note:There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.

Thanks for this info, I've learned something new today, and I stand (partly!) corrected.

Yet there are not always alternatives to tables. As I said, I used tables for layout on a handful of occasions, and only after spending considerable time trying to get the result I wanted using DIVs. It's rather experimental stuff, and the emphasis is not on readability for alternative reading tools. With time it should happen even less.

Tables are a tool, and a certain amount of creativity should be allowed to the developer. If, for example, tables were never ever used for layout, we might still be reading plain text pages with no layout like in the first days of web. I believe that the use of tables for layout pushed innovation forward, and created a need for ways to have complex layout without breaking the semantic structure of HTML, hence DIVs.

Whether using tables for layout is evil, plain dumb, or innovative (or all at once) can be debated, but you don't seem to be open for debate.

Anyway, thanks for correcting me, I appreciate being corrected and learning something new for a good cause.

One more thing: any perceived attacks against you from me are not personal either.

Last edited by rolf (June 16 2012)

Offline

#12 June 16 2012

samer
Admin

Re: *Proper* HTML and CSS References

You should definitely start following A List Apart if you don't already. Some articles are gems. For best practices, check out Zeldman's "Designing With Web Standards", it's a classic.

For quick references, I would avoid w3schools and go with MDN or dochub (which sources most of it content from MDN). Another valuable resource is dottoro, which does a great job highlighting the various discrepancies in output and behavior of various browsers.

Offline

Board footer