Help Beta Test Slashdot CSS

After almost 8 years, Slashdot's HTML is finally getting an overhaul. For now the changes are almost entirely under the hood, as we migrate the current skin to CSS. Slashdot itself will migrate in the next few weeks, but for now, we'd appreciate it if people who understand CSS could take a look at Slashcode. If you use a browser that lets you select a stylesheet, you can take a look at that site with the Slashdot CSS Skin. Keep in mind that Slashcode doesn't look exactly like Slashdot, so there will be some differences between that site, and the final version that will appear on Slashdot. We're mainly looking for feedback on compatibility issues and blatant bugs. You can use our our SF bug tracker to submit bug reports. Thanks for your help. Once we move Slashdot, work will begin on a new look & feel. If you have ideas, you could start playing with the CSS stylesheets now!

css!!

[jlebrech]

If you do change to CSS beware as some CSS is IE specific, like list trees.

No logon

[liam193]

Is there a separate user database for slashcode? Logon doesn't seem to work and even a "send my password" doesn't recognize the login id. Perhaps this is just a Beta/Test issue, but it would be nice to test with real-world configurations and customizations.

The Big Move

[qw(name)]

It's good to see that you're moving on to something more modern. HTML 3.2 is very antiquated and isn't CSS friendly. It would more work to move to XHTML 1.0 Transitional but I would think that it would pay off big dividends in the future.

Re:css!!

[VJ42]

That shouldn't be a problem if the developers remember to use the w3c CSS validatior:
http://jigsaw.w3.org/css-validator/ [w3.org]

But seeing as they don't bother using even the html validator I'm not counting on it.

Re:XHTML

[schon]

but why HTML 4 as opposed to XHTML 1 Strict?

Here is a good list of reasons [utvinternet.ie] why HTML4 is preferable to XHTML.

Re:The Big Move

[Sentry21]

I'm curious as to what you mean when you say 'HTML 3.2 ... isn't CSS friendly'. the CSS1 recommendation is actually older than the HTML 3.2 recommendation by about a month. Sure, it's not as CSS-friendly as, say, HTML 4.01 or XHTML 1.x, but I don't think 3.2 is explicitly unfriendly.

Re:finally... lol

[joeljkp]

Here's one explanation, from CmdrTaco's Journal [slashdot.org]:

"Pudge has been working a lot on that problem. Specifically we've got scripts to fix HTML in all editor & user contributed content spaces. A lot of this is under way already. Old comments are being automatically fixed in the background. HTML in articles from 1998 is being corrected. Scripts are working very hard. And in some cases, tired editors have been re-reading stories from 1998 to correct HTML errors that boggle the mind. None of this is perfect, so don't be to surprised if you find something wonky. Feel free to mail me URLs if you see it. We've got almost 60,000 articles, 900,000 users, and like 13 million comments. There will be mistakes."

Re:Sigh

[Anonymous Coward]

Look at the articles URL

Re:Sigh

[daniil]

Ages ago. Go to Preferences -> Homepage (or just click here [slashdot.org]), and set Date/Time Format to something other than the default. And then forget to click Save.

Re:MOD PARENT UP

[IMarvinTPA]

Got it finally: http://greasemonkeyed.com/tag/slashdot [greasemonkeyed.com]

IMarv

Re:MOD PARENT UP

[VJ42]

An (almost) comrehnsive list of greasemonke\slashdot user scripts.:
http://dunck.us/collab/GreaseMonkeyUserScriptsSpec ific#head-ec4846dd1f06f8efd2d256a59577b3faaebbbf12 [dunck.us]

Re:css!!

[Corbie]

Which is why you should design for standards first, and then fix what you can for non-compliant browsers. Make it accessable, but make it standards-based first and foremost.

Re:css!!

[seriesrover]

Show me a business that has decided to cut out 85% of its customer base and I'll show you a thousand that have decided not to. The need for standards vary from "not important" to a "must have" depending on their application. To pretend IE doesn't exist, or code as if they don't matter, is business suicide.

Besides, does any browser meet all of the W3C standards flawlessly?

Re:Fortunately

[arkanes]

Fortunately, in today's world it is possible to use standards AND design for all (modern) browsers at the same time!

Well - no. Not unless what you actually mean is "use a small subset of CSS 1". And even then there are minor incosistencies and differences that can end up biting you (although they often won't). If you want your site to work in IE, and you do, then you either need to stick with minimal CSS support, or have forked or otherwise hacked up CSS. Period. Additionally, if you want to support IE 5 (not nearly as rare as Netscape 4), you have to be aware of the broken box model and work around it via hacks. IEs behavior prior to IE 6 (with the right doctype) is just plain wrong and CSS written for it will *not* work in other browsers.

Re:Does the new version...

[JHromadka]

Yes, it's called Safari [apple.com].

Re:Oh My God, It's Actually Happening!

[XO]

apparently slashcode is so incredibly bad spaghetti that it has taken this long to actually work with it. blargh.

Re:XHTML

[ZeroExistenZ]

# Lot's of other sites use it, so it must be good.

Lot's of Lemmings are jumping off cliffs, do you want to be a Lemming?

Lemming suicide is fiction [snopes.com]

But can it validate?

[uodeltasig]

Is it really too much to ask that you run your site through a validator? [w3.org]
Really come on now, I'm sure you've duped the 'importance of validating' articles before. And what's up with HTML Strict, why not XHTML strict? Get your nerd programming skills together.

Re:Fortunately

[Nurf]

I like the sound of what you say. I would love to be able to do CSS web sites that work on everything.

I am a very technical guy who is usually designing and building hardware and software. However, I am in a small company, and am going to end up producing a web site for it whether I like it or not.

Soo.. could you provide a few links or names of books that I read that would allow me to make web sites in the way you describe? Assume someone who is used to being given a pile of books in a new subject, and has a working prototype running in about three weeks. I normally sit down and just start implementing stuff, using the books as a continuous reference. Then I redo the stuff I did badly, once I know more about the subject. I suppose this means that little code snippets are of the most use to me, along with good explanations of what is actually going on.

I realise you may have better things to do, but I am interested in what you consider to be "good" sources of information for this; you approach is one I appreciate.

Thanks

a quick css review

[kavin]

it does not validate[1] -- you've got 2 typos:

line 242: "#adminfooter label , #adminfooter legend,{". remove the comma
at the end of the selector, and then line 488: "#usermenu ul.menu
a.end... padding: 5px 11px 0 0 2px;". you've got 5 values for the
padding property. it only takes 4 (for top, right, bottom and left,
respectively).

other suggestions:

- use descriptive names for classes. i'm seeing things like: #misc,
#frame and it's hard to remember what you're styling when you've
labelled it in a rush and just given it a placeholder for a name. other
class names are bound to locations (like #topnav) which is meta-semantic
rather than semantic and confusing since it's easy enough to decide to
css position it elsewhere and then you're going to have to change the
code again. (the point of css is to separate content from
presentation, so take the presentation out of your class names/ids and
leave it up to the css properties.) also, there are known quirk issues
with underscores in class names, eg your: #index_qlinks-content. rather
use hypens.

- for screen media, use a default font of sans-serif (you're using
serif). sans-serif is proven easier on the eye on low resolution devices
(like your monitor).

- when specifying a colour, you're encouraged to always provide both
foreground and background colours in the same css rule, as it's often
not obvious what the cascade will do and you can easily end up with
illegible text. for example, at least replace your:

a { color: #066; }

with:

a { color: #066; background-color: inherit; }

- you're using a mixture of css unit measurements. if you want text to
resize and print easier, try replacing the pixel (px) measurements with
ems or percentages (aka fluid layout). or provide a print stylesheet.

- i'm not sure on this[2], but apparently most elements do not have
intrinsic width and when you float something you should give it a width
even if it's just a width:auto.

- p

--
1.
W3C CSS Validator results for http://www.slashcode.com/slashdot.css [slashcode.com]
http://jigsaw.w3.org/css-validator/validator?uri=h ttp%3A%2F%2Fwww.slashcode.com%2Fslashdot.css&userm edium=all [w3.org]

2.
Visual formatting model
http://www.w3.org/TR/REC-CSS2/visuren.html#floats [w3.org]

I like it.

[ManuelKelly]

It looks pretty good on: Mozilla/5.0 (compatible; Konqueror/3.2; Linux) KHTML/3.2.3 (like Gecko)

It even works well with the larger fonts I prefer to use.