1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

cross browser compatability

Discussion in 'HTML & Website Design' started by peter lewis, Mar 9, 2013.

0
  1. #1
    I am planning a site and am doing my best to make it compatible. After a lot of reading and searching, here is what I think is correct:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
    and using the yahoo yui reset css file
    I am new here and first searched the forums to see if this has been answered. I don't think it has, but my apologies if it was.
    Would love to hear if I am on the right track.
     
    Solved! View solution.
    Last edited: Mar 9, 2013
    peter lewis, Mar 9, 2013 IP
  2. #2
    My suggestion would be to use XHTML 1.0 Strict Doctype

    http://www.w3.org/QA/2002/04/valid-dtd-list.html
     
    abyse, Mar 9, 2013 IP
  3. peter lewis

    peter lewis Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    which meta tags, if any, do you suggest? the conflicting info i find online and in books is driving me crazy
     
    Last edited: Mar 9, 2013
    peter lewis, Mar 9, 2013 IP
  4. abyse

    abyse Notable Member

    Messages:
    346
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    245
    #4
    only the default ones...
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="your description" />
    Optional: <meta name="keywords" content="keyword1, keyword2, keyword3" />
     
    abyse, Mar 9, 2013 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    It may sound harsh, but no.

    Having a doctype is a must, not a choice or a way to escape the quirks mode in internet explorer just to make it "cross browser compatible".
    Tell you what, that term was made by people who don't know a damn about HTML and internet, applying some half-assed hacks and using outdated methods in detriment of the "SEO" (another overused and, in most cases, nonsensical term, used by the same half-assed experts in "web design and development") just to make a website "look good" in all browsers. This has been explained an awful lot of times in these forums (guess by who, cock-a-doodle-doo), so I'm not going to act like some parrot.

    However, since you posted a bit of HTML, I'm just going to throw a few comments at it, give some explanations and examples, if needed.

    HTML5, one of the worst choices out there, unless you want to stuff your markup with redundancies and do less with more of it. The previous post was correct, XHTML 1.0 Strict is recommended. If you prefer the HTML syntax (no self-closing), then go ahead and use HTML 4.0 Strict.


    I'm sorry to say, but this is really dumb. As long as a doctype is declared (PROPERLY), the quirks mode will be avoided. Some people use it because they are forced to, since they use some half-assed CMS, which either doesn't allow them to add a doctype or it inserts comments before the DTD for "copyright reasons" which can trigger that notorious mode. But I guess you are not one of them, or are you?

    I wouldn't recommend using it. It's overfstuffed, and it resets some form elements it shouldn't, making them harder to work with. The input is one of them.

    Personally, I would go with this one :

    <!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"
><head>
</head><body>
 
</body></html>
    Code (markup):
    Make sure you add a few meta tags, including charset, a description, keywords and viewport for handheld devices (since you are concerned about compatibility, or are you?) You can also add some attributes to <html> (lang for instance).

    For the reset, I recommend you just to null margins and paddings of all elements you use to give them a good baseline, except label, or input, unless you love having headaches. You can also remove borders of fieldsets and images.

    And now to answer to your question about the compatibility : It's all about using the right tags in the right time and NOT choosing them by their default appearance, since the latter may vary. You must also understand that some CSS properties, like margin and padding, are not always interpreted the same way. Fixing widths, heights, font sizes and line heights is like peeing in the Amazon river (ever heard of toothpick fish?). It destroys you from the inside.

    Hope it helps
     
    wiicker95, Mar 9, 2013 IP
  6. lilpeanut

    lilpeanut Greenhorn

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #6
    My typical headers look like this:


    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of Site</title>
<link rel="stylesheet" href="css/960.css" type="text/css" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="js/default.js"></script>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
    HTML:
    That's for HTML5. The html5.js file allows IE8 and below to use the tags such as header, footer, section, article, etc. =) Hope that helps a bit!

    And HTML5 not only allows you to keep up with standards, but it has helped many people with not going into the whole DIVITIS problem. A the hacks for IE7 and below follow with an asterick since they don't support a lot of CSS3 attributes I tend to use such as box-sizing, etc. Since box-sizing is one of my favorites since it prevents you from having so much DIV's which is super ugly.
     
    lilpeanut, Mar 9, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    I was going to go on this long diatribe ripping HTML 5 a new arse, but I see Wicker95 did my work for me...

    ... and then lilpeanut chimes in with a laundry list of how not to build a website with the HTML 5 asshattery, grid asshattery, CSS framework idiocy, jquery bloat, dumbass javascript shiv/polyfill/whateverThe****TheyWantToCallItThisWeek garbage...

    This is what I use as a starting point for pretty much EVERY site I write:
    <!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"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Template Design CSS
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Site Title
		<span><!-- image replacement --></span>
	</h1>

	<ul id="mainMenu">
		<li><a href="home">Home</a></li>
	</ul>

	<hr />

	<div id="contentWrapper"><div id="content">
		Page Content Here
	<!-- #content, #contentWrapper --></div></div>

	<hr />

	<div id="sideBar">
		SideBar content Here
	<!-- #sideBar --></div>

	<hr />

	<div id="footer">
		Footer Content Here
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>
    Code (markup):
    I rarely have to change any of that, and if I do it's usually for something like a 100% min-height layout. XHTML strict, proper content-type and content-language for local-testing (since local there are no http headers, somethign the HTML 5 re-re's forgot), the viewport meta is there so mobile does what I tell it instead of it mangling the page with it's "let's force desktop pages to kind-of work" garbage, a proper CSS LINK with media targets...

    Notice I put <html><head>, </head><body> and </body></html> together on single lines -- this is a reminder that NOTHING should EVER go between those. The commenting style is important too -- putting the closing comment before the element prevents it from ending up between sibling elements -- since comments between sibling elements can actually result in a number of bugs in IE and some versions of FF, such as disappearing content and double-render. I also don't waste time saying "end" since that's what </div> means, nor do I waste time on the idiotic garbage comments some people use like <div id="footer"><!-- start footer --> -- since that's some real "no **** Sherlock" territory.

    The horizontal rules may be removed if there's a proper heading indicating a section change -- since that's what numbered headings and HR's are for, indicating section changes. (hence why HTML 5's "section" is pointless idiotic garbage). In the CSS I typically hide them as they serve no purpose on the screen layout, and are present for heading navigation and or non screen.css clarity/semantics. Likewise the H1 is already in place since that's the heading under which all other headings on the page are -- by definition -- the start of a subsection of. Just as H3 are the start of subsections of the H2 before it. Too bad most people writing HTML don't know enough about WRITING to understand how to use numbered headings properly.

    ... and of course the outer wrapper is there mostly just because we can't properly leverage BODY in all browsers for width setting... to be honest IMHO treating HTML as a rendering element doesn't make any damned sense anyways.

    Simple, clean baseline.

    ... and to help get even cleaner and easier for cross browser, one can use a reset. There are big fat bloated garbage resets like Eric Meyers "Reset reloaded" -- which is more framework than reset and to be frank, gives resets a bad name. (of course CSS frameworks are idiotic BS in the first place that as a rule of thumb defeat the point of using CSS in the first place!) -- there are smaller resets like the universal one of "* { margin:0; padding:0; }" but that can wreak havoc on form elements given how IE and FF don't apply margins or padding the same to INPUT, SELECT or TEXTAREA (and in fact apply their own over which you have no control!).

    What I use is a nice clean middle ground that only recently broke past a quarter K in size, and that was to make mobile behave on font sizing and actually do what you tell it.

    
/* 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,dl,dd,dt,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

@media (max-width:480px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}
    Code (markup):
    It takes a bit to get used to how browsers behave once you've used a reset, but at least at that point they all behave THE SAME... or at least as close to the same as to make no never mind, certainly far closer to the same than they are without it.

    That's pretty much where I start from for EVERY project.
     
    deathshadow, Mar 9, 2013 IP
    SoftCloud likes this.
  8. lilpeanut

    lilpeanut Greenhorn

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #8
    Wow glad to see people trash HTML5.. O_O Seriously, if you are doing this in a SERIOUS matter, then you should be staying up to date with the latest techniques and not be too scared to dive into something new.
    Most front end developer positions requires HTML5 and CSS3 knowledge so please keep up to standards. There may be some negatives just like everything else, but everything has negatives. If you assume HTML5 is crappy.. that's probably because you're doing it wrong just like a lot of people bash on MVC structures when programming with procedural languages like PHP. A lot of people don't want to learn something new and can manage with what they do.

    But being a front end developer for the past 3-4 years working in a professional workplace such as Aultman Hospital (which I've just moved out of and onto bigger better things last week) and doing HTML and CSS for the past 10 years of my life, you should really keep up to standards. If you look at all the job postings on Indeed.com or anyone looking for a front end developer position, 85% of those ads list HTML5 and CSS3 in the requirements..

    If you haven't already, please do your research: http://blog.ninethsense.com/why-you-should-upgrade-to-html5/
    KEEP UP TO STANDARDS. The technology just keeps advancing so don't just sit back and mess with old soon-to-be out-dated code just because some people don't like certain parts of it.
     
    Last edited by a moderator: Mar 9, 2013
    lilpeanut, Mar 9, 2013 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    That is assuming it IS the 'latest' instead of just everything that was wrong with HTML 3.2 warmed over -- from re-introducing redundancies, accepting into the specification things that were rejected as redundant, and creating all new redundancies. I cannot fathom how ANYONE can see ANYTHING of value in HTML 5 so far as actually writing markup goes -- see the link in my siggy for moron that. (and I do mean moron in terms of the people embracing it)

    With most people being 100% ignorant of most of the existing 4 strict tags much less how to use them properly, throwing even more tags at it is NOT the answer... from NAV being redundant to heading navigation if people would bother using numbered headings properly (and only seems to exist for the dumbasses who wrap DIV around a menu UL for nothing), to SECTION being redundant to numbered headings and horizontal rules if people would just learn to use them properly, to ARTICLE which people seem to be slapping around damned near everything for no good reason (and only seems to exist for the data scraper asshats people come to forums like this one asking how to block), to HEADER being redundant to the existing heading tags, to FOOTER serving no legitimate purpose (since the last flow content after the last numbered heading or HR should be clear enough to say what it is), to ASIDE which is either presentational markup like CENTER and FONT, or is so restricted in meaning (as in a literary aside) there is no legitimate reason to use it, to garbage that makes forms harder to use like PLACEHOLDER... VIDEO and AUDIO ruining a industry that was finally settling on a standard just to give the FLOSS whackjobs a chubby and make Apple happy -- much less introducing two more tags that are REDUNDANT TO OBJECT (just as BGSOUND, EMBED, APPLET and IMG were redundant to object... and if M$ hadn't dragged thier heels on implementing OBJECT properly, we'd not be using IMG anymore and could have had jpeg2000 support by now)... I love how they've tricked the flosstards into vendor lock-in!

    How about the new tags that have NO legitimate reason to even EXIST since they only work with javascript?!?

    NOBODY who has bothered understanding semantic strict markup, using separation of presentation from content, or any of the two to three dozen other improvements in code practices of the past decade and a half could possibly thing HTML 5 is worth ANYTHING. The only people I can see it having any appeal to is the suits who use it as a sick buzzword akin to "web 2.0", the authors looking to slap a new title on their decade out of date books, the 'professional lecturers' looking to put more buns in seats so they can run their mouths for money over **** they don't understand, and finally the sleazeball asshats who continue to crap out HTML 3.2 and until recently were slapping 4 tranny on it... now they just slap 5's lip-service around it while still vomiting up the same fat bloated idiotic garbage markup.

    When people call HTML 5 the future, I really have to go "REALLY?!? Looks more like the worst of 1997 to me!"

    Though notice I'm singling out HTML 5 for MARKUP - as that's what it should be, a MARKUP specification - CSS3 and the new scripting are cool; as I've said a million times by now that's why they had to slap them under HTML 5's banner, as without them the emperor is standing bare for the world to see.

    NOT that it even qualifies as a specification since much like HTML 3.2 it's just documenting whatever the hell presentational or data scraping garbage browser makers come up with, instead of being an authoritative document telling them what and how to implement things. Where I'm from with my engineering background that's not how you make a "specification".

    It's why I and several others around the web have ZERO plans to migrate past XHTML 1.0 Strict for the time being -- at least not until something like a '5.2 STRICT' comes along and deprecates/obsoletes all the pointless idiotic garbage that serves no legitimate purpose apart from adding code bloat.

    To be brutally frank, when most developers can't even use tags like THEAD, TBODY, TH, CAPTION, LABEL, FIELDSET, LEGEND, OBJECT, or even numbered headings properly, THROWING MORE TAGS AT IT IS NOT THE ANSWER!!!

    But then, I'm the guy who'd obsolete the STYLE tag and all ONevent attributes, and deprecate STYLE as an attribute - so YMMV.
     
    deathshadow, Mar 9, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Oh BTW, that crappy inaccessible page of slides crap you linked to about 5's "merits"

    1) Doctype, because not clearly stating what we are using or even worse, whatWG's idiotic nonsense of not even having versions makes everything so much clearer and easier -- NOT. Much less the loss of http-equiv headers that actually provide functionality during local testing or should http headers not be served.

    2) Self validation -- redundant since you still have to check it server side.. and if you REALLY have those types of issues enough for the bandwidth saved by not submitting for check to be worth it, there is probably something disastrously wrong with how you built or labelled your form.... things like garbage making it HARDER TO USE like the idiotic bullshit 'placeholder' instead of actual labels.

    See http://baymard.com/blog/false-simplicity for more on that one.

    3) ContentEditable -- I still fail to see how/why this would be useful unless you are doing things client side that has no malfing business being done client side -- or if it should, should be a TEXTAREA, not some other tag. It certainly is not useful without some form of javascript assist, which is why IMHO it has no business even being an HTML attribute!

    4) The new structural tags -- All pointless redundant bloat wrapping extra 'meanings' around elements that already HAVE meanings if you bother using numbered headings and horizontal rules properly.

    5) VIDEO and AUDIO -- should be redundant to OBJECT just as all the other media tags were redundant to OBJECT. There is NO legitimate excuse for these new tags to even exist apart from someone failing to get the entire POINT of why BGSOUND and EMBED weren't accepted into STRICT, nor was APPLET or IFRAME -- and even IMG was SUPPOSED to be on the chopping block! ALL redundant to OBJECT -- just as MENU and DIR were redundant to UL.

    The whole idea being one consistent tag for all non C-DATA content to which new formats could be added on the fly (and even sandbagged) -- but no, instead we have to go for vendor format lock-in so the browser makers can pimp their favorite codec/container combinations so we have to encode everything to four or five different formats. Yeah, that's SUCH an improvement. Why they couldn't have just added this functionality to OBJECT is beyond me... and don't give me this "Oh it would have been to hard to code" crap. One if statement and MAYBE a new attribute. (though really I thought that's what classID was for)

    6) Web storage -- JAVASCRIPT ONLY. Has absofragginglutely NOTHING TO DO with writing markup, and as such there is NO reason you cannot use it with the older specifications in supported browsers.

    7) Geolocation -- See 6). JAVASCRIPT ONLY.

    Both 6) and 7) really piss me off when people pimp them as "HTML 5" -- again it's crap being slapped under it's banner that should have ABSOLUTELY NOTHING TO DO WITH A MARKUP SPECIFICATION. The same goes for the new idiotic elements CANVAS, METER and PROGRESS. Mind you, what they do is nice, but since they only actually do anything with javascript enabled/present, they have ZERO BUSINESS HAVING TAGS OR BEING PUT IN THE MARKUP! -- that's NOSCRIPT's job.

    8) HTML 4 still works -- so why use 5? Of course most people's HTML 4 won't work or is invalid HTML 5 becuase they're still in 'transition' from 1997 to 1998 coding practices.

    9) Hey, canvas. Cool scripting API, see above -- it HAS NO MALFING BUSINESS IN THE HTML SPECIFICATION AS A TAG!... which is why when I use CANVAS in the older specs, I use document.createElement to add it. (which is basically what it should have been from the damned start!)

    10) Web Worker -- Do I have to say it again? SCRIPTING -- NOTHING to do with writing markup.

    11) "offline applications" -- which 99% of the time is just as broken as online crapplications; I'm really not sold on web apps as being anything other than a bad idea with the rarest of exceptions.

    12) More input types -- one of the few things that could actually be useful -- BUT, if you really need those there is likely something wrong with your server side code or your labels... assuming one is even using LABEL and making accessible forms... which admittedly is one HELL of an assumption given the idiotic garbage most people deploy as websites thanks to their heads being permanently wedged up 1997's arse. But again, that does seem to be HTML 5's target audience.

    13) Server-sent... AGAIN, SCRIPTING.

    14) Draggable -- Useless without... you guessed it, SCRIPTING.

    15) SVG -- ugly, bloated, slow... really should remain an 'also ran' as image formats go. It looks really cool, ever try to actually use it for anything? There's a reason it's biggest promoter when it was created -- adobe -- the people who made the plugin that made it work inside OBJECT for IE 5 -- dropped it like a hot potato the DAY they bought out Macromedia! Another relic of the '90's that's better off staying there. (one look at the filesize, much less the code of a SVG version of a font should tell you all you need to know about it!)


    16) "Go mobile" -- what the *** does that even MEAN? The only thing that helps with mobile really is media queries -- and guess what?!? THAT'S CSS, NOT MARKUP!!! As such it too has NOTHIGN to do with "HTML 5" as a markup spec and it too can be used JUST FOXTROT FINE in the older doctypes!

    17) Windows 8 Store Apps -- because metro programs are working out SO well for everyone... NOT. That idiotic pile of steaming useless garbage, at least so far as the desktop is concerned, is why stardock is seeing an upsurge in business and 99% of why most techies will tell you that if you are on 7 already, don't even BOTHER with 8. Again, HTML crapplications gets down on it's knees behind the proverbial equine -- see how most webmail services are less useful than they were a decade ago before all this AJAX for nothing crapped all over them. Five or six years ago I thought webmail was spelling the death of the mail client -- now thanks to the scripttards trying to turn them into 'applications' all they've managed to do is send me screaming back to M2 and/or Thunderbird.

    18) "Don't be left behind" -- don't let yourself be duped into pretending it's 1997 either, which is from a markup standpoint what 99% of HTML 5 is. All the forward looking stuff is CSS or Scripting, which is why I am pissed at them for slapping it all under 5's banner since you can use it -- as I keep telling people -- JUST FOXTROT FINE in the older doctypes!

    Again, the future? BULL, looks like 1997 to me. I know, I was there.
     
    deathshadow, Mar 9, 2013 IP
  11. lilpeanut

    lilpeanut Greenhorn

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #11
    I'm not even gonna bother arguing with you because if anything HTML5 allows you to NOT be redundant unless you're idiotically doing your markup in a senseless way. You obviously aren't handling the tags as they should be used. It has made me have WAY less tags in my markup than ever. As you can see my most recent example in my portfolio (http://www.intellectproductions.com/portfolio/eca233_emr), the markup is SUPER clean thanks to HTML5.

    And it allows you to NOT have those stupid senseless ID and CLASS's in EVERYTHING just to style it instead you can use the section, footer, header, etc to style it that way and then the classes won't interfere with eachother. If I have a class named copyright and then I have it somewhere else where I'm putting a javascript effect on it, it's gonna mess up BOTH of them when it really shouldn't. Yes you can specify which one you want... but hmmm that involves MORE TAGS. So you're points are pretty much invalid. Sorry to say.
    You're using HTML5 WRONG if you assume it's redundant. It has made my markup way less redundant then it ever has.

    You have to validate your forms client and server side as it IS RIGHT NOW if you want the end-user to have a good experience so they don't have to hit that stupid annoying submit button just to see their errors. You can do it with jQuery and now HTML5 allows you to do it so you don't have to have 5 million script tags on every single page which is pretty crappy and makes your page load slower even if you do put the script tags in the footer.

    All your points kinda made me laugh because.. I can just tell by what you're saying about HTML5 is actually because your ignorance in how to code it.
     
    lilpeanut, Mar 10, 2013 IP
    NetStar likes this.
  12. peter lewis

    peter lewis Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    thanks for the input, sorry it caused so much tension, lets consider this thread extinct
     
    peter lewis, Mar 10, 2013 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Shame, you could use it...

    I wouldn't hold that up as a great example of work -- with the inaccessible fixed width layout, absurdly undersized fixed metric fonts, and once again, illegible color contrasts, it reeks of "WCAG, what's that?" and the worst of 1990's development, and that's without even looking at it's code.

    Of course, the non semantic use of P+STRONG to do numbered headings job, endless pointless wrappers for nothing, presentational images in the markup, attributes like TARGET that have ZERO business being used in any website written after 1997, lack of ALT text on images, abuse of the semantic SECTION tag for clearing DIV style nonsense as if it's still 2001, use of the SUBscript tag for subtext (entirely the wrong meaning -- what do you think SUP means "supertext" or something?!?), double breaks doing padding's job, grid nonsense defeating the entire point of using CSS in the first place, H2's preceeding H1's (yeah, that makes sense), pointless opening comments and comment placements that could trip rendering bugs, lack of media targets on the CSS, Jquery for NOTHING, Scripting attempting to do CSS' job, section in a section in a section just like div inside a div inside a div or table inside a table inside a table for nothing (changing to HTML 5 or HTML 4 'style' does NOT improve the markup)... again, probably about a sixth of that belongs on the cutting room floor and is a poster child for HTML 5 bloat. Probably more like 2k, but once you get actual ALT text on your IMG tags LIKE YOU'RE SUPPOSED TO EVERY TIME YOU USE IMG...

    Especially with the NON-SEMANTIC use of HTML 5 tags that are supposed to have meanings.

    I mean even this:
    <h2>In-Network</h2>
    <h1>Application</h1>

    What in the blue blazes makes that two separate headings. Only thing I can figure is you chose the tags based on their default appearance, which has NOTHING to do with why one should choose tags to do ANYTHING!!!

    Might also help if you had VALID code and actually closed your tags properly. (You've got a <ul> where you should have a </ul>)... but of course then you wouldn't be able to use some of the attributes you've got in there. It goes on... class="grid_12 quotation" -- with manual quotes? We have a TAG for blockquotes, you may want to try using it. Likewise one probably shouldn't use angled quotes in ENGLISH. This isn't pharsi... of course what in blazes would make a blockquote be an "article" is beyond me... incorrect meaning using a redundant tag... same thing for putting IMG in article for NO GOOD REASON since there's not a blasted thing you are doing that couldn't be done DIRECTLY to IMG. (particularly with all those nice block-level siblings in a floated section!)

    Hell, this ALONE

    <p><strong>QUICK LINKS</strong></p>

    Shows you have no clue how to use HTML properly, even HTML 5... since those are NOT paragraphs, nor should they be receiving emphasis! I'm also laughing at the "&copy; copyright" part, though that's just a classic literary blunder.

    Even so, well... here's a one minute rewrite as XHTML 1.0 strict using semantic markup, logical heading orders, block level containers where they add proper structure, etc, etc...

    
<!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"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Network Administration
</title>

</head><body>

<div class="widthWrapper">

	<h1>
		<span>Network</span>Administration
		<b><!-- image sandbag --></b>
	</h1>

	<ul id="employeeBar">
		<li><a href="#">Employee Login</a></li>
	</ul>

	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Our Physicians</a></li>
		<li><a href="#">Patient Registration</a></li>
		<li><a href="#">Visits</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
	
	<hr />

	<div id="featured">
	
		<div id="featuredRotate">
			<img
				src="http://assets.intellectproductions.com/eca233_emr/img/pic1.png"
				alt="DESCRIBE THIS!!!"
			/>
			<img
				src="http://assets.intellectproductions.com/eca233_emr/img/pic2.png"
				alt="DESCRIBE THIS!!!"
			/>
			<img
				src="http://assets.intellectproductions.com/eca233_emr/img/pic3.png"
				alt="DESCRIBE THIS DAMNIT!"
			/>
		</div>

		<h2>
			In-Network <span>Application</span>
		</h2>
		<p>
			The in-network administration website allows you to:
		</p>
		<ul>
			<li>Keep logs of visiting information</li>
			<li>Track down patient history diagnoses</li>
			<li>Update patient, physician, and visit information</li>
			<li>Allows physicians to check daily schedule</li>
			<li>Gives insight and organization to the company</li>
		</ul>
	<!-- #featured --></div>
	
	<hr />

	<blockquote>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget nulla leo, in dictum orci. Morbi ac nunc sapien. Mauris pellentesque accumsan rutrum.
		</p>
	</blockquote>

	<div class="smallSections">

		<img
			src="http://assets.intellectproductions.com/eca233_emr/img/person1.png"
			alt="AGAIN, DESCRIBE THIS!!!"
			class="leadingPlate"
		/>

		<div>
			<h2>
				Title Can Go here<br />
				<small>A small tagline/subheader</small>
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut lacus vel arcu fermentum aliquam. Quisque pellentesque dictum urna, id vulputate orci dapibus nec. Nam sapien purus, gravida et faucibus blandit, fringilla nec metus.
			</p>
		</div>

		<img
			src="http://assets.intellectproductions.com/eca233_emr/img/person2.png"
			alt="DESCRIBE THIS!!!"
			class="leadingPlate"
		/>

		<div>
			<h2>
				Title Can Go here<br />
				<small>A small tagline/subheader</small>
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut lacus vel arcu fermentum aliquam. Quisque pellentesque dictum urna, id vulputate orci dapibus nec. Nam sapien purus, gravida et faucibus blandit, fringilla nec metus.
			</p>
		</div>

	<!-- .smallSections --></div>

	<img
		src="http://assets.intellectproductions.com/eca233_emr/img/person3.png"
		alt="CHRISTMAS ON A CRACKER!"
	/>
	<h2>
		Title Can Go here<br />
		<small>A small tagline/subheader</small>
	</h2>
	<p>
		Duis faucibus tortor ac nulla eleifend a faucibus dui imperdiet. Aliquam diam nunc, tristique consequat imperdiet sed, lobortis a quam. Sed a magna dui, ac faucibus tellus. Curabitur sollicitudin laoreet euismod. Sed vestibulum suscipit risus in egestas. Donec bibendum ante <a href="#">id nunc commodo</a> imperdiet. Maecenas quis dui pretium elit elementum interdum vitae sed enim.
	</p><p>
		Fusce odio arcu, elementum ut mollis eget, facilisis sit amet tortor. Vestibulum viverra, justo vel euismod sollicitudin, lorem ipsum ornare purus, et mattis nunc urna facilisis tellus. Sed sit amet ante at risus faucibus viverra vitae sit amet ligula. Cras elementum, ipsum eget pellentesque sollicitudin, turpis odio congue erat, sed tristique dolor nisl nec mi.
	</p>

<!-- .widthWrapper --></div>

<div id="footer"><div class="widthWrapper">

	<div>
		<h2>QUICK LINKS</h2>
		<ul>
			<li><a href="#">Job Opportunities</a></li>
			<li><a href="#">Donations</a></li>
			<li><a href="#">Directions to Us</a></li>
			<li><a href="#">Operational Hours</a></li>
		</ul>
	</div>
	
	<div>
		<h2>QUICK LINKS</h2>
		<ul>
			<li><a href="#">Clinics &amp; Centers</a></li>
			<li><a href="#">Find a Physician</a></li>
			<li><a href="#">Get My Medical Records</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
	
	<hr />
	
	&copy; Hospital Name 2013. All Rights Reserved
	<ul>
		<li>
			<a href="#">
				<img
					src="http://assets.intellectproductions.com/eca233_emr/img/layout/facebook-icon.png"
					alt="Facebook"
				/>
			</a>
		</li><li>
			<a href="#">
				<img
					src="http://assets.intellectproductions.com/eca233_emr/img/layout/linkedin-icon.png"
					alt="LinkedIn"
				/>
			</a>
		</li><li>
			<a href="#">
				<img
					src="http://assets.intellectproductions.com/eca233_emr/img/layout/myspace-icon.png"
					alt="Myspace"
				/>
			</a>
		</li><li>
			<a href="#">
				<img
					src="http://assets.intellectproductions.com/eca233_emr/img/layout/twitter-icon.png"
					alt="Twitter"
				/>
			</a>
		</li>
	</ul>
	
<!-- .widthWrapper, #footer --></div></div>

</body></html>
    Code (markup):
    Despite the 'added weight' of the non 5 header and the presence of *SHOCK* alt text on ALL the IMG tags, hey look, it shed 1k. Admittedly it would gain another 128 bytes or so putting in a proper script load before </body> where it will load faster than putting all that crap in HEAD, and of course would run faster and load faster since I'd do it without the jquery bloat, and of course I'd do it with responsive layout, accessible font metrics, legible color contrasts, etc, etc...

    If that's typical of your work, you're not done learning yet, and sure as shine-ola aren't qualified to tell anyone if 5 is worth using or not! Your pages don't even seem to bother TRYING to be accessible, you're abusing SECTION just like people abused DIV and table before it, (even worse since SECTION has meaning, that is either the wrong meaning in some places or redundant whenever you use a numbered heading), You've got article around things that aren't even articles (like the blockquote), have gibberish use of numbered headings, and provide little to no graceful degradation... That's not good design OR development!
     
    Last edited: Mar 10, 2013
    deathshadow, Mar 10, 2013 IP
  14. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #14
    DS, it's the difference between BTDT (5 or 10 times already - do we start with Isis or do we limit it to 1990 as a starting date?) vs. "I've been doing this for 2 years, so I'm some kind of expert".

    "We want a C developer with 5 years of C experience (2 years after Ritchie wrote it) to develop our new accounting program." Remember those days?
     
    Rukbat, Mar 10, 2013 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Was worst in the late '80s and early '90's with people asking for a decade of experience with clipper, paradox or netware -- when said products were barely out of the gate a year or two. "Ten years experience with Netware 3.12" is kinda hard to find in 1992. (the year 3.12 was released... and netware as a whole was only seven years old at that point)

    Could be worse though, could be all the sleaze-by-night computer shops in the 90's bragging about "20 years combined experience" when they had ten employees, and being able to double that just by walking in the door.

    Still though in this case it still really boils down to the simple fact that the only people who can see merit in HTML 5 are the ones who never bothered using 4 Strict / X1.0 Strict properly... Never really practicing separation of presentation from content, semantic markup, logical heading orders... much less concepts like accessibility standards.

    ... and it's why it's so frustrating when people start running their mouths about HTML 5 and it's alleged 'benefits' when they quite obviously were a year or two ago still sleazing out HTML 3.2 and slapping a tranny on it.
     
    deathshadow, Mar 11, 2013 IP