What is Digg?47 Comments
- armbar, on 10/12/2007, -3/+19CSS the easy way:
1. Make it look right in Opera
2. Fix the small inconsistencies between Firefox and Opera
3. Don't forget Safari, etc.
4. Do a few hacks to get it right in IE7
5. Write an IE6 conditional style sheet, because there's no way you're getting it right otherwise unless you have several days to waste
Opera is generally more accurate for interpreting CSS standards, except for a few small things, which is why I suggest getting it right there first. Firefox and Opera disagree on a few things, but it's not hard to get them to look the same. - krazyken, on 10/12/2007, -2/+13CSS the easy way:
1. Make it look right in Opera
2. Fix the small inconsistencies between Firefox and Opera
3. Don't forget Safari, etc.
4. Do a few hacks to get it right in IE7
5. Write an IE6 conditional style sheet, because there's no way you're getting it right otherwise unless you have several days to waste
Opera is generally more accurate for interpreting CSS standards, except for a few small things, which is why I suggest getting it right there first. Firefox and Opera disagree on a few things, but it's not hard to get them to look the same.
---------
I'm fairly new to Digg, more of a lurker, but this thing is pretty frustrating. Don't start with learning these menu's, start with basics. But A List Apart (http://www.alistapart.com/articles/slidingdoors/) is kind of the defacto here guys, and its good clean semantic code with minimal bloat.
As for armbar that I quoted above, I don't think I've ever checked opera first, my usual steps are Firefox, IE, Safari, then the smaller guys like Opera and Netscape. And hacks are way out of hte question man, how can you even justify that, sure sometimes they are necessary, but just jumping straight to them because you don't have the time? Your screwed when IE7 comes out full force, and then your javascript/ conditional methods will just bloat things even more.
And as a last asstastic remark, and I'm done, you forgot to check your own page in Firefox. Your comment forms at the bottom are a mess and a half. - bertram, on 10/12/2007, -1/+9"Side-to-side tabs are not easy to create in CSS..."
um, "side-to-side" tabs aren't hard to do in CSS. But pretty nice and clean code for this without extraneous markup, so Digg for you. - haxx4, on 10/12/2007, -2/+10No need to fear, duggmirror is here! http://duggmirror.com/programming/How_to_create_CSS_overlapping_tabs/
- inactive, on 10/12/2007, -2/+10Yeah. Not webmaster's fault for using CSS, or the W3C's fault for creating it; but Microsoft and Mozilla Foundation's fault for ***** it up in their browsers.
- armbar, on 10/12/2007, -0/+8So, you're saying CSS bloat is bad, but non-semantic HTML bloat is good?
There's nothing wrong with using a list and background images; why use divs? - akinder, on 10/12/2007, -1/+8Looks neat, but did they HAVE to package it in YetAnotherZip format? I don't care if Winzip is OMG closed source, just package the damn thing as a .zip or at least .rar!
- beejay, on 10/12/2007, -3/+10Actually the example is here:
http://www.osresources.com/files/css-overlapping-tabs/index.htm
...and it doesnt work for me under Firefox or IE, because there is no javascript behavior to change the id's. If I were making an example for a how to, I'd at least make it slightly functional... - uptown, on 10/12/2007, -3/+8How do you suggest they do that? Fire up their cluster of 10,000 drone PCs to test their load-balancing?
- arizonagroove, on 10/12/2007, -0/+4"I wish I knew how to make actual text a background in CSS. Like this: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/"
That example you link to doesn't use text as a background image. I can't imagine how such a thing would be possible except to create an image that contains some text. How would you specify some text in the background-image attribute of your CSS? - inactive, on 10/12/2007, -0/+3Luckily, myself, the submitter, doesn't own this site and thought it'd be a decent article to submit. The things I have submitted from my site has been well received and has yet to be taken down by the digg effect =)
- jasz, on 10/12/2007, -1/+4Funny I was trying the same lately..
http://jasz.org/tabs.html
But IE breaks them on the 2nd tab set :( - inactive, on 10/12/2007, -4/+7AHAHAH.
Honestly though, if your goal is to hit a site like digg, do not use:
1. Wordpress
2. Cheap hosting. - iamapun, on 10/12/2007, -1/+4@ecable
Yup, I agree. People seem think Wordpress can't handle being dugg, but it's all down to the fact that WP is usually hosted on the cheap. - armbar, on 10/12/2007, -0/+3@krazyken:
The reasoning behind checking Opera first is really because it's more correct than the other guys; I know that the market share is way lower, but that's not really the point.
By hacks for IE7, I mean extraneous clearing, several changes to the box model, and things that IE7 still doesn't support correctly. Like I mentioned, they're in conditional style sheets anyway, so they automatically go away as soon as IE starts supporting better selectors and such. I'm not screwed when IE7 comes out, because it doesn't see anything that my IE6 stylesheet does. I don't use Javascript to implement CSS tricks, so I'm not sure where that came in.
The point is, as long as IE-only tricks are enclosed in conditional style sheets, there's nothing wrong with using them. Other browsers don't see them, they get the job done, the HTML validates--why are you against it? I'm not doing hacks because I don't know better, I'm doing them because I know it's 1) going to save me time, and 2) IE doesn't always have the functionality to do everything, so I have to give it a crutch. For example: min-width and max-width.
Finally, the comment forms on my site weren't a mess and a half. They extended a total of 5 pixels over the border. Anyway, thanks for pointing that out--I fixed it. - SPThom, on 10/12/2007, -1/+4Wow, what a coincidence... I found this page last week and started implementing a design with it. This is a terrific solution... *Overlapping* tabs are so much nicer than regular tabs. Plus this implementation is easy to tweak without breaking.
@ djlosch: So tell me how you overlap your table cells?
Don't get me wrong, I'm not a CSS elitist... I'll use tables when they're appropriate... Yes, even for layout. But a table of links isn't going to play nice as overlapping tabs, not "out of the box". You'll wind up doing as much hackery with that solution as you would with this one, so why bother? Makes more sense to build links out of an ordered list. - pucosk, on 10/12/2007, -0/+2Why image? Just absolutly position a text in the containing element (needs to be positioned as relative) and there you have it.
- Chewie67, on 10/12/2007, -0/+2@beejay - "...and it doesnt work for me under Firefox or IE"
Nice! A CSS tutorial that doesn't work in over 95% of web browsers. Brilliant! - inactive, on 10/12/2007, -2/+3"You will need to create 4 images:"
No no no.. four images? It's called Navigation Matrix and it can be used to achieve the appearance of "overlapping tabs" if done correctly.
Navigation Matrix: http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
Navigation image example: http://homepage.mac.com/bbabics/navi.gif - pucosk, on 10/12/2007, -1/+2OK, all of those examples are lame. Why using 4 images if you can use 2 (yea it could be done). Why using a matrix? You sacrifice great deal of accessibility, its hard to generate the matix, it is too big etc. Plus I would really just have some tiny imperfections in rendering that only the designer can tell then to bloat the page by a few kB. And now you can bury me for this arrogant comment.
- burke, on 10/12/2007, -0/+1Wow, you posted the exact same link 2 days late.
- hurfydurfur, on 10/12/2007, -0/+1Speaking of divs and backgrounds... I wish I knew how to make actual text a background in CSS. Like this:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
But with the number in the comment box instead of to the left. Overlapped. Z-depth never really worked for me. - krazyken, on 10/12/2007, -0/+1@armbar
Apologies, guess I glazed things over pretty quickly and jumped hastily to a conclusion. This digg is frustrating though, I'm really not a fan and haven't dugg it. The biggest frustration honestly is the fact that its taking off a ton and there's thousand times better ways to do these things. A List Apart and the Matrix methods have always been loads better and more widely used than this, I was shocked that this wasn't pointing to one of those.
I guess I've never been much of an opera checker if you will. Once I finished the coding I do, never really had many problems with Opera. I've always found that if its right in IE, FF and Safari, it ended up being right in opera, but because I know I'll be spending most of my time checking IE mac and pc, I'd nail it in FF (ends up the same both ways on mac and pc) and then fix the tiny discrepencies in opera and netscape. I've always found if you can get it looking right in the big stuff without hacks, you have very few problems in the smaller guys. Your way probably is a bit more disciplined than mine.
There's some great ways to get around adding the extraneous clears and such, but I know thats not your point so I'm not gonna go there. The point is there are several issues with IE you can hack for, but they aren't necessary. I couldn't have been more general when I was talking about the hacks, but I was really saying that they aren't necessary all the time, and I disagree with the fact that it takes days to get around them. Once you learn the proper workarounds and expect the outcomes, your golden. But thats even more disciplined and purist than I am, and I'm arguing the point, lol. Your completely right that your conditional stylesheets disappear. I assumed you were checking with javascript, so more apologies, your method really is good. I still puristically (that a word) defend not using hacks, but in real world situations, they are necessary evils sometimes.
It's the actual comment box I'm talking about, you've got some clear issues maybe, but the box containing the input for a comment isn't seeing the comment field. Of course I failed to mention its in FF on Mac. I put up a screenshot for ya here:
http://csspassion.com/images/heliostudios.tiff
its most likely because I'm on my mac.
Sorry for the attack armbar. I guess the only thing I'd like to take away with and argue is the fact that this is a pretty gross method (not bad, but not the best) compared to ALA's sliding doors and Superfluous' matrix techniques. And that in my purist mind, there are ways around hacks that don't take a lifetime. - haxx4, on 10/12/2007, -0/+1Here's a digg story which explains why Wordpress has so many problems. http://digg.com/programming/How_Not_To_MySQL_Connection_Management_in_PHP
- sc0ri0n, on 10/12/2007, -0/+1Down already:
User osr_admin has already more than 'max_user_connections' active connections in /home/osr/public_html/inc/mysql.php on line 78 - krinthekuz, on 09/16/2008, -0/+1sorry for digg borking up the snippet i quoted. i switched it to html &whatever; and it still messed up for some reason
@SPThom: anyone who is anyone in web programming is using a scripting language that has the power to echo dynamic tables. just change the background image on each td tag. besides, you'll need your scripting language to specify the "active" class when using css.
additionally, all of my sites look 99% the same in every browser (even dillo, but links is missing pictures... obviously). the only major difference (besides links not having pictures) is custom bullet placing. IE mounts from the top and FF mounts from the bottom. the effect is weird bullet placing when you increase the size from the default size.
i've looked into css/xhtml strict compliant sites and they use extremely butchered code like quadruple spans or custom list tags (instead of standard tables)... or they look bland like the w3c site. - krazyken, on 10/12/2007, -0/+1@armbar
yeah, honestly, I think I'm going to end up starting out with opera from now on. Give it a shot for awhile.
I do alot of web 2.0 stuff for fun when I'm not plugged in at work, and I don't mind doing the javascript for the hover stuff. Most of my sites already have the prototype and scriptaculous libraries on there anyway, so the javascript is manipulating the dom. I'm not so sure how much of a hack i see that as, but for stuff that I do for accessiblity, I'm pretty much gung ho about just skipping the frills for things that require it, like the hover stuff. But if you can flex on the javascript, you can do alot of nice things for rounded corner solutions that degrade nicely (Nifty Corners 2+). That's made my code boatloads cleaner, so I'm with ya on the javascript stuff. Thats just when I throw caution to the wind though.
Have you checked out browser cam yet? It's a great utility that does screenshots spannign 3 or 4 operating systems and every version of browsers for the last like 4 years. AND they are starting to do deviceCam, where they let you test on diff pda's and such. Definitely should give it a look see. - hurfydurfur, on 10/12/2007, -0/+1Well all this conversation started me on another google-fest. I figured it out. Nested two divs, set the margin-top to be negative (to get rid of the auto div break) and didn't set the background color.
Arizona is right, but I was trying to show an example of what is close to what I was going for.
I'm afraid to post the full html source that works for me... so hopefully this screenshot link works. Here's what I meant.
http://x5.freeshare.us/122fs997612.jpg
The number 1 is one div, white font to match the background, the sample comment text is a nested div moved up by 2x the font size (ugly hack?). This will work WONDERFULLY in my wordpress theme (with iterating comment numbers).
Yay, one question down, a million to go. - angulion, on 10/12/2007, -0/+17-Zip.. last 7z I stumbled into WinRAR opened fine.. try before yelling.. ;)
Just a more effective Zip. - armbar, on 10/12/2007, -0/+1@krazyken:
Yeah, I guess it's 2 methods to the same end. It's personal preference at this point, but I've found that if you start with a standards-based browser for testing first, the rest of your development goes much faster.
Saying that IE hacks take days to get around was an exaggeration, although that hasn't always been the case. In the "early days", it took a very long time when the techniques we see today weren't as well known. Thanks to Position Is Everything, et. al., we don't spend hours fixing bugs any more :)
For the most part, the "easy" stuff in CSS does end up looking correct in IE6, it's the additional selectors, arbitrary :hover, and others that cannot be done without the hacks.
Anyway, thanks for clarifying yourself: you made very good points. Also, thanks for the screenshot. I don't have the ability to test on a Mac, so I end up relying on iCapture to see what it looks like, and that only works for Safari. - Ludwig, on 10/12/2007, -0/+1A List Apart demonstrates a much better way than using JavaScript to show which page is current. Keeping it server-side with php eliminates issues of older browsers or js disabled.
http://www.alistapart.com/articles/keepingcurrent/ - angulion, on 10/12/2007, -0/+1But with your method there is no easy way to dynamically add/remove entries - the article I think talked about chat and ajax.. so tabs would be ppl coming and going.
- armbar, on 10/12/2007, -0/+1@hurfydurfur
Eventually, you'll be able to use the counter() option in CSS, once enough browsers support it. Something like below would do it for you, but you'll probably have to wait 5 or 6 years :)
.comment:first-child:before {
color: #CCC;
content: counter(comment);
counter-increment: comment;
font-size: 3em;
} - ihaterobots, on 10/12/2007, -1/+1how on earth has the comment thread gotten this long?
tab shaped div's. write a javascript function that changes the z-index. modify background colors/graphics however you like.
tabs are easy. this is a 5 minute job. buried as lame. - inactive, on 10/12/2007, -0/+0If you read into that page a ways, you'll find they aren't really 'problems' at all. Check Otis' comments - obviously coming from someone who understands PHP & WordPress.
Most WP blogs will do just fine if they're using the WP-Cache plugin. - martin84, on 10/12/2007, -0/+0The CSS tabs described in this story are damn clunky!
Check out my ones:
http://anythingclose.com/css-overlapping-tabs.php
Couldnt be simpler! - RevEng, on 10/12/2007, -1/+1As a web developer, I say this is lame. First off, there are barely any comments on how this works or why he used the styles he shows. Secondly, his example doesn't even show the tabs switching. Thirdly, he hasn't used any special tricks here: changing the background and the z-index is hardly a novel idea. And let's not overlook the fact that he uses an IE hack without even mentioning it.
This is a great example of how learning to code by example (or better yet, blindly copying and pasting) can do more harm than good. I can already see the newbies copying this without a clue why it works or the implications of its use. Examples are great, but without explanation, it's asking to be copied blindly. - sensibledriver, on 10/12/2007, -1/+1Lame. "CSS for Dreamweaver users!!!"
- inactive, on 10/12/2007, -6/+5I gotta agree about the cheap hosting one, but... what's wrong with wordpress?
- dshPls, on 10/12/2007, -5/+3Ugh....the beauty of CSS...that look different in every browser.
- logic, on 10/12/2007, -6/+4Dugg...but if it works so well then why is the only example output on the page a png image?
- dk911, on 10/12/2007, -6/+1I agree that Opera is the best CSS implementation, but FF/Mozilla is (bar none) the best Javascript implementation. IE is a distant second to FF/Moz in JS, and definitely third overall in CSS. I just wish that Opera would fix some of the basic Javascript issues it has, like unmodifiable standard event objects. I have a 2.5/3.0 app that loads, but starts complaining because I need to embed values on the event object.
Opera, you are so close... why do you have to fail me now?? - xeno439, on 10/12/2007, -9/+3Looks like this site was not prepared for the front page of digg. You should made sure you can handle the traffic before submitting.
- krinthekuz, on 09/16/2008, -9/+1another douchebag site that thinks this custom, totally nonstandardized code:
Jack
John
David
Paul
is better than a table that looks the same for EVERY browser and anyone who knows html can instantly read it and figure out what's going on. no digg.
and dont forget the css file with all that custom code. - inactive, on 10/12/2007, -18/+2WHEEEEEEEEEE! CSS BLOAT! gtfo.
But honestly, more easily accomplished with divs / bg image on div, or just 1px border + :hover for the simple folk.
Check out the new & improved 
© Digg Inc. 2009
— Content created and posted by Digg users is 
