I wonder why…
I have set a background-color to the html tag but Opera does not take it.
If i klick on it in Dragonfly than Opera takes the color.
Testsite:
balkenhantel.de/test.html
I don’t se a background-coller deff between your ite in chrome and Opera, (but the gogle maps on the bottom is shifted to the left)
The site / the footer are work in progress 
What version of Opera are you on?
Here in 11.11 my color #F3F4EE does not show up on the html…
Why are you trying to set the background-color in the HTML instead of in the CSS where it belongs?
Also if you have the # on the front of the color then it must go in the CSS as the antiquated HTML attribute that not all browsers support any more required that the color be specified without the #.
Hi,
It’s this script that stops the background from working.
<script src=“http://balkenhantel.de/design/js/js.php?v=4”></script>
It must be messing with the dom and confusing Opera.
You should rarely use the html element for any styling anyway except to negate margins and padding. Use the body element for your background colours and images and they propagate automatically to html. Otherwise if you apply background to html then the body shrinks to content height and not viewport height.
If you add your background colour to the body element then Opera works fine with that script in place.
Paul started on it, I have to second that you REALLY should NOT be trying to apply styling to the HTML tag, it’s unreliable PERIOD. The only things I would ever set on HTML is height:100%; for either faux-fixed or 100% min-height. It simply cannot be relied upon cross-browser to accept styling and TECHNICALLY it’s not a element that should even be RENDERED since it’s DOMParent.
The script does indeed seem to be screwing up the DOM, though I’m stuck asking what the heck is that script even in there to do given there is NOTHING on that page that should even warrant the presence of javascript!
Of course, it’s a train wreck of deploying that bloated garbage HTML 5 before it’s ready, nonsensical heading orders, endless IE conditionals for nothing, bunch of meta tags that nothing actually uses, presentation inlined in the markup, multiple DIV and classes that are cryptic AND unneccesary. (c751?!?), presentational classes… in fact there’s so much presentation inlined I’m stuck asking why bother using CSS in the first place… and I’m even seeing comment placements that could be tripping rendering bugs in FF and IE. Even the CSS links are missing important attributes and/or media types.
My advice is to throw that away, use one of the latest RECOMMENDATION doctypes, and try practicing semantic markup… and a stylesheet that you can send to all browsers and not have to resort to all that IE conditional nonsense. At 21k of HTML for 7k of plaintext, I would suspect you have 30% more HTML that should be necessary for such a page.
Basically, you’ve taken something really simple and made it really complicated – but of course that seems to be what HTML 5 is for.
Does anybody read it work in progress
First thing. I have a lot of books from sitepoint and a have books from others like Andy Clarke. And it one it says that the html can be stylet like anything else.
Why are you trying to set the background-color in the HTML instead of in the CSS where it belongs?
It is set in the stylesheet. Dont know what you mean?
CSS links are missing important attributes and/or media types
Do you mean “text/css” if yes - this is set in the php that compines and gzips all the css files.
presentation inlined / comment placements
That is what i allways to at work in progress before i remove them. Its easier to put the css in the html to quick test the look. And comments help to know where you are.
IE conditional nonsense
So you think hacks are better? I think setting a class in the body that you can use for ie is better. Hm, its what html5 boilerplate does…
NOTHING on that page that should even warrant the presence of javascript
???
So how does Google Maps, Geolocation work without javascript?
How does Cufon, Qtip, jQuery Validat, Shadowbox and VidoeJS??
Unfortunately a lot of authors have great technical knowledge but a lack of practical application which only comes with coding hundreds of sites. After you have seen hundreds of problems associated with a certain practice it makes sense to avoid that practice
See mine and Tommy’s comments at the bottom of this article.
The w3c specs (14.2 background) recommend that for html pages the html element is not styled.
Of course if there’s a typo somewhere at the top and the page slips into quirks mode then in IE you won’t have an html element to style anyway because body becomes the root.
So taking all that into consideration applying the background colour to the body instead is really a no-brainer.
Don’t take Deathshadows comments to heart he just says it as he sees it in plain English. He isn’t a fan of html5 as you can tell and to be honest I don’t really get it either.
Since I think HTML 5 is bloated unneccessary bull, I’m not exactly going to take ANY of what that boilerplate crap does as good advice on building a website. Especially since as a rule, HTML and CSS frameworks, ESPECIALLY those that rely on scripting to function most always defeat the point of using HTML and CSS (or more specifically separation of presentation from content) in the first place!
As to hacks, it depends, if they validate I’m really not going to sweat it. I hate things like the stupid underscore hack, and try to avoid using * html except for when implementing things like expressions for min/max-width. In any case I’d rather put my fixes/workarounds in the CSS where it is cached across pages, than bloat out the markup that is sent with EVERY page… much less relying on conditional comments to actually play games with the HTML tag – that’s just begging for it to fail and making the HTML more complicated than it needs to be.
As I’ve said many a time – anyone tells you to use a IE conditional to target EVERY version of IE, they’re so full of dung I’d be tempted to spread lime on them… It’s almost justifiable for IE6-, but if you follow a few simple rules and toss in the occasional harmless haslayout trigger, you quickly find IE conditionals to be nothing more than a waste of time if you can get visitors to go to more than one of your pages. (in other words, visitors who don’t bounce!)
That may have been a my bad – as in Opera those weren’t showing up either… Was quite surprised when I opened it in firefux and there’s a map at the bottom. So I didn’t think they were actually present on the page.
However:
Those are ALL garbage I would NEVER consider bloating out a website with. PERIOD. Jquery is just pointless bloat and some of the BIGGEST idiocy you will find on the Internet this side of 4Chan’s /b/
Cufon can now go the way of the dodo since webfonts are now deployable (font squirrel good as any) – not that I would use them since most font files are half my total target size, many are the size I allocate for HTML+CSS+SCRIPTS+IMAGES on a page… But again, I consider 70k the ideal total target and 140k the upper limit. Anything more than that is useless bloat that does NOT enhance the user experience for a normal website! Of course, the obsession with artsy meant for print illegible fonts that kern like ass never really appealed to me – but what do I know; I consider Arial the best font ever made for screen use.
Shadowbox I assume is a lightbox ripoff? If so that crap pisses me off on most every page it occurs on making me yell “oh for *** sake just let me open the **** image” which is why I’ve gotten in the habit of ALWAYS middle clicking on thumbnails now to give the scripting “The Rock” treatment. (which involves shining, turning, sticking and candying)
Never heard of Qtip or VideoJS – but they SOUND like more of that stupid “let’s throw javascript at it for NOTHING” idiocy I’m seeing all the damned time these days – all to do what CSS can handle without assistance or an existing tag would actually do if you used it properly – which I believe describes each of those respectively.
Which is how one typically ends up with 21k of markup, 521k of javascript, 600k of images in 44 separate files and 48k of CSS all to deliver 6k of plaintext and a mere 15 content objects/images… The total handshakes alone taking 10 seconds on firstload for a normal US broadband user… Basically what 15k of markup, 20k of CSS and no javascript should be required to pull off. (excepting the map at the bottom, which frankly I’d just have a link to instead of doing it live so people who know where it is aren’t forced to waste bandwidth on it!)
Ah, thanks for the hint on the html. Im allways willing to learn something new. Its the first time i have problems with it. The idea allways was to get rid of an extra div for styling.
The div soup is because of yaml. When i started i found yaml and it was good because it worked allways in IE6 and IE7 without problems. I like the flexibilty of yaml but there are to much divs. But i started to don’t show pages to IE6 and IE7 users, so i can get rid of it.
There are some good things that are developing out of it, like video tags, and maybe some of the new structural tags. No, they’re not widely supported, but things need to start somewhere. I probably won’t use them myself until they become widely supported and standardized. And I agree, that using a lot of JS to provide support for them when most browsers don’t take advantage of them (or even implement them in the same way) is a little silly.
I actually favor the use of JS libraries, when used appropriately. They sure do make a lot of browser compatibility problems go away with JS, and sure makes JS coding easier for certain things. However, it can be detrimental to use more than one framework library, so I usually stick to just one per site.
Never heard of Qtip or VideoJS – but they SOUND like more of that stupid “let’s throw javascript at it for NOTHING” idiocy I’m seeing all the damned time these days – all to do what CSS can handle without assistance or an existing tag would actually do if you used it properly – which I believe describes each of those respectively.
Qtip looks like a jQuery tooltip solution. I actually built my own solution a while back, which was certainly much lighter in the way of options. The reason for things like this is because there is no longer a wide division between applications and web applications.
I was actually looking into videoJS recently. I thought it looked promising in that it supported both HTML5 video tags and flash video players. It’s somewhat similar to JWPlayer, but completely free even for commercial use (unlike JWPlayer)
Since flash is disallowed on many mobile devices, I’m seeing HTML5 video tags as the only other alternative for displaying multimedia content.
Shadowbox I assume is a lightbox ripoff? If so that crap pisses me off on most every page it occurs on making me yell “oh for *** sake just let me open the **** image” which is why I’ve gotten in the habit of ALWAYS middle clicking on thumbnails now to give the scripting “The Rock” treatment. (which involves shining, turning, sticking and candying)
Yes, shadowbox is another implementation of lightbox. The original lightbox solution does only images. Many of the other solutions out there do a whole range of things, offer different styling/themes, and are based off of different JS libraries. The Lightbox Clones Matrix « planetOzh
When used appropriately, I actually like to see lightbox solutions implemented.
Which is how one typically ends up with 21k of markup, 521k of javascript, 600k of images in 44 separate files and 48k of CSS all to deliver 6k of plaintext and a mere 15 content objects/images… basically what 15k of markup, 20k of CSS and no javascript should be required to pull off. (excepting the map at the bottom, which frankly I’d just have a link to instead of doing it live so people who know where it is aren’t forced to waste bandwidth on it!)
Well, we don’t like in a world of plaintext anymore. People want things presented in certain ways–colorful, graphical manner with appropriate whitespacing and font sizes, and like to interact with content (be it text, images, audio, or video). In order to do that, yes, you probably will be light on markup and a little heavy with presentation code. But, if you really don’t want to view the web that way, you can always disable JS, uninstall flash, disable the website’s CSS and write your own basic CSS browser stylesheet.
Cufon, Qtip, jQuery Validat, Shadowbox and VidoeJS are ALL garbage
How do you validat the user input in forms if you can’t use php?
The other stuff is taste. I like lightboxes and hate if images open in another page or just open and i have to click the back button and then the next image in the gallery and so on… . Thats annoying if you have a gallery and want to see all 100 images. In a lightbox you can zip throug them.
All that stuffs are gadgets (Cufon, Qtip…). I mean do you want the web to look like as it was bevor 15 years? Plain text, just arial?
From your point of view there are all wrong - amazon, youtube, maps…
@deathshadow60, do you have some sites you can show? Im curious how your sites look without all this stuff. I really want to see a book from you at sitepoint, where you tell all the other book authors and sitepoint article writers that they are wrong
Don’t know if its a bug. On another site the html background color works in Opera. But Opera is the only one who makes a horizontal scrollbar there:
odenwaldsport.de/0ee/
-
I’ve rarely if ever had a situation where I can’t use php.
-
Regardless of what the form is, it HAS to be run past SOME form of CGI on a server to even be useful – that CGI/SSI/whatever other tech you are using MUST for security reasons ALONE perform it’s own validation since client-side validation can NEVER be trusted (as it’s easy enough to bypass and/or BS). Rule #1 of server side code, user input can NEVER be trusted.
-
if you take the time to use minimalist semantic code with separation of presentation from content most of the page layout information and presentation should be cached, so that ‘dreaded page load’ should be a non-event.
-
If you label and color code your forms for users, the number of times the validation fails should be the exception, NOT the rule, making any client side validation a waste of code for most users.
-
I’m not saying don’t use javascript for client side validation, I’m saying don’t use some fat bloated 21k minified script that relies on a 56k minified library to do 3k of flat javascript’s JOB!!!
-
Though HTML 5’s client side check attributes are cute – one of the few things in HTML 5 that looks like anyone took the time to think about properly. (the new tags and the loosening of structure rules certainly don’t look that way)
There is NO good reason for a simple universal form validation script to take more than 7k comment stripped RETAINING formattting. Mine is only 3k, 6.2k with comments – and doesn’t need any fat bloated garbage library to function!
Index of /html_tutorials/formValidate
Older copy, but still holds up well… and since you should be doing your validation server side too, if the scripting is not present your server validation should transparently work the same.
That’s what I mean on how jquery is nothing but bloat… and needlessly overcomplicated bloat at that! People are taking moronically simple things and throwing tens and even hundreds of K of javascript at it for NOTHING! Tens and hundreds of K of javascript doing single digit K of javascript’s JOB or worse, CSS’ job!
It’s like the idiots who now chime in when someone asks “I want a link to turn red when I hover” and they immediately go “add jquery”.
Maybe it’s just because I know how to use a browser, but I find using lightbox to go through “hundreds” of thumbs annoyingly and uselessly slow – but see, I know how to MIDDLE CLICK and/or CTRL-SHIFT-CLICK to open a link in a new tab in the background – so I just middle click a whole bunch of them, then go through and view the tabs. Then all I have to do is close the tab to go to the next one – which are loading in the background while I view ones before them. It also means I can use my browsers zoom function to rescale the image as desired instead of dealing with that garbage auto-scaling and oddball restrictions most lightbox implementations shove down your throat.
But then I’m an opera user, so I’ve added custom buttons to ‘close current and go to next’ and ‘close current and go to previous’ in a fixed location, and have my tabs in portrait view on the right. (which honestly makes a hell of a lot more sense than across the top in the age of widescreen displays)
I prefer arial because it’s LEGIBLE for me, but in terms of the other stuff as I said Webfonts mean cufon no longer serves any good purpose – not that it ever did given how it drags most browsers to their knees when you try to scroll a page using it, how blurry and illegible even arial is when run through it, how flash’s anti-aliasing of text is a joke and how badl y th e te xt i s ker ne d.
I can now get the same effects out of webfonts through conversion services like Font Squirrel’s generator – though on the whole most font files are larger than I’d allow a single page on a site to be… but then 80% of the people within a 60 mile radius of me are at 768kbps or LESS – which is why my ideal target size for a page is 70k, with an upper limit of 140k – preferably in 20 separate files or less.
Much less server side concerns – where I can serve 10 times as many users with a 100k page as I can a 1 megabyte one.
Qtip – that’s less than 1k of CSS’ job!!! MAYBE a 3k behavior shim for JUST IE6- to help it’s lack of :hover “anywhere”… assuming you are willing to axe the uselessly annoying “sometime this year” fade-in/fade-out animated garbage… so what do they waste on it? 38k of minified javascript that relies on that BS 56k library – to do what written as flat javascript leveraging CSS (keeping the fade-in/fade-out effects) shouldn’t take more than 8k without white-space stripping? That can be done without the stupid animation in all modern browsers without even USING javascript?!? That with their approach has no javascript off fallbacks?
Pure 100% unadulterated idiocy!
Correct, and they could probably have all the same functionality WITHOUT jquery and save themselves some 50% on every page load without that bull.
I’m not even talking about reducing functionality or appearance, I’m talking about efficient coding techniques and proper solutions to problems instead of just sleazing out copypasta. More and more websites are being flushed down the crapper by their use of scripting for nothing, gee ain’t it neat bull, and other asshattery; just look at the forum skin over on digital point (vBull 4) for examples of said dumbass approaches to sitebuilding… or the new hotmail… or GMail… It’s bad when “Mr. Use Webmail” (as a few people used to call me) has said “**** this” and is now using Opera M2 instead because I can’t put up with the annoyingly slow bloated ajax for nothing BULL anymore.
Well, I am retired, mostly did government agencies… but there are my two personal sites.
Home - EWI USB
Home - DEATHSHADOW PASCAL
Excuse the hideous green on the latter, it’s a retrocomputing joke.
Though you want to see some real examples of my code, look no further than my rewrites directory… where I’ve done rewrites for people here and on digital point over the past six years. Some of the directories are just small example snippets, others are full-on rewrites of people’s page templates to illustrate EXACTLY what I’m talking about here.
Most of these are other people’s designs, just my code.
Index of /for_others
Take this rewrite:
Black Cypress Capital Management - Principles
Web fonts, opacities, image heavy, and 136k… and not a javascript to be found.
Or this:
Blog feature overview - part of AnooX Social Networking service
Flyouts, hover effects, and the only script is a behavior file for IE6-… said script being peterNed’s hover:anywhere. Which is how it comes out to 31k uncompressed, 26k compressed when the original was around 200k.
Or this:
Inicio - Cursos de chino KCS - Aprende mandarín este verano.
Which swung a giant axe at the original’s 32k minified image rotator that relied on the 56k jquery library to replace it with a moronically simple 1.6k without minification flat script.… I could add paging controls to that and STILL not even break the 5k mark.
Take that idiotic Jquery-ui garbage; 279k of script MINIFIED for some sixteen or so functions that shouldn’t average more than 4k apiece WITHOUT jquery. (excepting perhaps “autocomplete” – that I’d ballpark at 8-16k by itself)…
Just for an example, my multi-function radio capable accordion script from four years ago:
Index of /html_tutorials/accordion
Is 7.7k with comments and full on formatting. Stripping just the comments and nothing else drops it to 3.9k. No stinking Jquery needed. Most people who do their own accordion script using jquery without jquery-ui end up what, 8k to 20k or so WITH needing the bloated library? That’s EXACTLY what I mean when I say “could be written smaller as flat javascript WITHOUT the stupid library!” – ESPECIALLY if you take the time to leverage a little CSS instead.
But then I still create code size target limits – a lost art in this day and age of “just throw more hardware at the problem who cares what it costs” (and again, we wonder why the economy is tanking… here and now, who cares if it screws us later!)
Part of why I say that minification of code in the age of mod_deflate is nothing more than trying to cover up inept coding practices. Instead of fixing pointless/bloated code, they just try to hide it. It’s also why jquery isn’t just bloat by itself, almost everything written using it is pointlessly cryptic bloat too! We’re seeing sites now with HUNDREDS of K of javascript doing tens of K (or less) worth’s job! Before you dive for minification, see if you can’t fix the codebase FIRST.
Though to put that in perspective, that’s coming from someone who would rather hand assemble 4k of Z80 machine language and enter it in a debugger one byte at a time in hex than deal with 24 lines of typical C code.
Basically I’m not saying don’t use scripting, I’m saying don’t use fat bloated pointless scripting that takes two to ten times as much code as it would if you didn’t use the stupid library. Remember the old rule – Unless it absolutely cannot be done using javascript (google maps is a great example) scripting should ENHANCE functionality, not supplant it. Progressive enhancement == graceful degradation.
Christmas only knows with the raging chodo for HTML 5 and Jquery the recent releases have been teaching people to take a dump all over their own websites, it’s not a bad idea! But then, the only book release they have I consider worth a damn is Ian’s beginner book. – To call me underwhelmed and often offended by the other books is something of an understatement.
Sorry if this is turning into a threadjack.
Hm, ok. Your right. I also try to make allways everything smaller. But i’m not a javascript god. Nice for you that you can do all this stuff. I wish i could. But a lot of stuff i just can do with jquery.
And now i find out why my html has no background color in Opera. Its the new jQuery 1.6.1 that i use here and not on the other sites where styling the html never made problems. With jQuery 1.5.2 everything is ok.
Well, that is another problem with relying on other people’s libraries; They often change things that break your code without your knowing it.
I’m going through and doing a rewrite of your page (less the video’s – placeholder text for now) just to show how I’d go about what you have in a “look ma, no scripting” manner.
Came across a few things in the CSS that I’d advise against – like you use the universal reset
- { margin:0; padding: 0; }
That COMPLETELY shtups form elements cross-browser, which is why people tend to use targeted resets for that instead. Just a word of warning.
Just curious… You’re such an adamant purist, yet you cling to XHTML 1.0 Strict. Why? It’s being served as MIME type text/html (and a good thing, too, since IE<9 would fail instantly), so the browser isn’t seeing XHTML at all - it’s just seeing HTML with some syntax errors (tag closers) that it’s willing to tolerate.
Is there a good reason not to use HTML 4.01 Strict?
The ONLY reason I use X1.0S instead of H4S is the more rigid and consistent structural rules make the code easier/clearer to maintain.
Because I practice rule 76, and take advantage of HTML’s white space neutrality to often make code clearer, being able to say /> on a line by itself or at the end of a line lets me know at a glance that it’s the end of a tag, instead of the start of one.
For example if the open of the tag is scrolled off the screen and the attributes and close are hanging down:
class="switchyNarrow"
>
Without seeing the tag you don’t know if that’s a standalone like LINK, META or IMG or the start of a block level tag like DIV, SCRIPT, etc… Having a different closing format for tags that wrap content and tags that don’t require a separate tag to close makes it easier to read.
I also dislike not seeing closing tags, so having a set of rules saying you HAVE to use closing tags prevents that bit of sillyness from being an issue. I’ve also seen it cause rendering problems cross browser when people omit </p> or </li> – to me block level tags should ALWAYS have a closing tag. It might suck down a few extra characters, but it makes the code clearer and easier to maintain.
Which IMHO is the ONLY thing XHTML 1.0 actually gives you that’s useful over HTML 4. To me what HTML allows you to “get away with” structurally is as much at fault with the lack of clear comprehensible and easily maintained code as PHP developers who waste their time using double quotes for every string manipulation, those who don’t even TRY to maintain clear formatting of their output when PHP can preserve whitespace using single-quotes, unescaped html output, libraries that don’t wrap their functionality in functions or objects, or the people who waste their time white-space stripping to hide bloated coding practices like slapping DIV and classes around EVERYTHING instead of just fixing the bloated code.
Rules in programming are a good thing, well established rules can stop you from even making mistakes in the first place and remove the need to rely on goofy broken tools to do the simplest of things.
But you’ll always have the people who want to sleaze by without “rules” vomiting up code any old way. Those of us who are Wirth language fans call them “C programmers”.
That’s pretty much what I thought - glad to know I’m not missing something more significant. I guess the counter-argument is that, as long as XHTML is actually being served up as HTML, and being parsed by the browser as HTML, there’s a “let’s pretend” quality to using XHTML that’s somehow unsettling.
I also dislike not seeing closing tags…
It doesn’t bother me with the link and meta tags, since the tags stand alone, and don’t surround content. But elsewhere, I agree that it’s messy. But H401S at least doesn’t prevent me from doing things more neatly. It would be nice if the validator at least warned about things like unclosed <li> tags, as in, “This is valid, but are you really sure you want to do this?”
I guess what we need, and should have had years ago, is HTML 4.x Strict, that embraces the tighter requirements of X10S, but without pretending to be anything other than HTML.