CSS again

[Rar]

css:
http://home.pages.at/deridiot/Playpen/working.htm
current:
http://home.pages.at/deridiot/Playpen/animedb.htm

Fixes:
Wide URL problems
Javascript off and popups 1 2 3
Layout breaking with font size changes 1
Design staticity

Side issues:
Page is 10kb smaller, for 11kb vs 3kb of once-off download css
's *probably* valid xhtml 1.1, bar the missplaced prologue (damn IE...)
All interface graphics are in the design (css) rather than hardcoded (html)

Deliberate differences:
Graphics not identical, angle changed on bottom of menubar, not jepgs any more, etc
Help icon in menu bar is now part of the link to help, rather than just decoration
Horizontal dividors look different at the ends (no longer a collapsed box)
Behaviour on text resize is different, sometimes better sometimes worse.
Anime pic and info is somewhat different
Changed vote boxes slightly
Anime table black line under the heading row has gaps
Loses some titles on things. I plan to JS these back in.
Opera might have a couple of black pixels in the search box
IE has no vertical center on the anime info, some text instead of images, some missing padding and other misc alignment issues

Differences from petriw's:
Does all the page rather than just the layout
More random experiment, less scandinavian structuralism
He has some kinda real naming scheme
Not 4-divs for everything to cater for the round corners crowd
Menu isn't a list
Footer behaves right (he's fixored this now apparently)
Less sucky image replacement

I re-did it not because the current is bad, but 'cos I was learnin' as I went. The layout is 2kb of a 33kb page, 's not much of an issue. Lots of stuff still needs resolving with the whole conversion idea, not in the least how-much-will-we-break-older browers. I know exp said on 29.05.04 (scroll to the bottom of the main page!) that we don't care about them, but IE is still teh popular.

Semantic questions:
Menu - list or not?
Anime details - table? definitions list? something else?
Image replacement - see below.

Image replacement cases:
Decorative (no text, no title, no copy) eg. background images, old help icon in menu
Functional (text, title, no copy) eg. expand/collapse buttons,
Semantic (text, title, copy) eg. qual rating, dub/sub lang

All might need to be inline/block display, all but decorative might be links. Image replacement is variously borked for people who 'turn images off' - but it's easy to provide an image-less css.

Anyway, the real question is... how painful is the code that generates these pages, and is exp willing to do a total rewrite. And if not, is he willing to release some of it for others (not me!) to rewrite.

Rar

[exp]

well,

I am willing to implement a css conversion on anidb page by page once I get a ready to use css example version and we've all more or less agreed that this is the way we want to do it. :P

BYe!
EXP

[Amour]

Page is 10kb smaller, for 11kb vs 3kb of once-off download css

Current size of some pages is 2,5 MB...
You should start by fixing this issue:
http://www.anidb.net/tracker/view.php?id=180

[Rar]

That's under 'side issues' for a reason amour, converting the design won't have a great effect on page sizes, and (as I'm about to prove) may increase some. I don't have the access (or ability) to fix that issue - fortunately few users are as prolific as your 2.5meg ass.

Looked at petri's layout again - there's only one significant difference between his and mine that prevent me putting my content in his wrapper. Should probably resolve that before going much further. The heading in his version follows the current anidb tabular layout and is in it's own parcel, whereas in mine I glued it to the content. I'd say with the content is right, bar the fact it gets trimmed with the layout on nonav=1 pages. It's pretty easy to emulate this with css, setting display: none then using an adjacent selector to stick it back when the layout is present (though see below), or by sticking a class on the body of pages generated with nonav=1. The question is... what makes more sense...

Anyway, did one of the simples pages anidb produces:

html:
http://home.pages.at/deridiot/Playpen/episode.htm ref
xhtml:
http://home.pages.at/deridiot/Playpen/episode_work.htm *
page specific css:
http://home.pages.at/deridiot/Playpen/c ... yle-ep.css *

Amour will note that the revised version is actually over half a kb larger - small pages with mostly semantic markup are gonna bloat somewhat. He'll also note that my version is somewhat borked in IE, through lack of +, >, and :after selectors and stupid triggering of quirks mode on xml prologue. Fixable/workroundable/ignorable.

So, what are the changes and why? I didn't really explain on the last one... Firstly, add a bunch of w3c bumpfk to the head, then do more 'correctness' changes like & -> & and closing <option> tags and also the dreaded self closing />. That's the dull bit. Then break stuff up into classes and delete any non-semantic code, and css it back so it looks the same. Then use a different style to display the data whoever you want. (note though, rarstyle is rather borked and not very pretty, 's just a testy thing).

Rar

[Rar]

Right... so what bits of pages need to be generated when?
-Same in all generated pages
-Same in all pages, but omitted with nonav=1
-Same for a particular generated page
-Varies depending on user

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>::ANIDB.net:: __PAGETITLE__ :: </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="__USERSTYLE__" type="text/css" title="AniDB Style" />
<link rel="icon" href="http://www.anidb.net/favicon.ico" />
<link rel="meta" type="application/rss+xml" title="AniDB RDF" href="http://anidb.info/anidb.rdf" />
<script src="js/anidbscript.js" type="text/javascript"></script>
<!--only a few pages--><script src="__PAGESCRIPT__" type="text/javascript"></script>

</head>
<body>

<div id="layout-menu"><div class="mainmenu">...</div><div class="usermenu">...</div></div>

<div id="layout-search">...</div>

<div id="layout-content">......bits based on user preferences/mylist......</div>

<div id="layout-footer">...</div>

</body>
</html>

Could arrange the head to keep like-with-like if it makes any difference, and there are probably other relevant changes/improvements that could be made. Need a real expert.

Oh, and mainpage:

current (old current):
http://home.pages.at/deridiot/Playpen/main.htm
xhtml:
http://home.pages.at/deridiot/Playpen/main_work.htm *
css:
http://home.pages.at/deridiot/Playpen/c ... e-main.css *

(borked in IE again, and a little different in layout. Oh, and I had to edit a bunch of posts... someone needs to teach these mods what a <li> element does...)

Rar

[fahrenheit]

if you are going to use xhtml, IE is going to break the pages more often than not, IE doesn't follow any specific standart, just more or less some, and xhtml isn't one of those standarts that it follows more than less..

I would sugest sticking with HTML 4.01 Transitional, very nicely layed out (the tags all in small, all closed, like the <br /> and <img /> tags.) and then when the newer version of IE is released with expected "true" support for xhtml, you just do some simple code changes to convert everything to xhtml.

In this way we keep the site more accessible, or we could just piss on the IE users and implement whatever feels right.

[Rar]

Most all the IE issues are down to either: #lack of/poor support for some css feature or other I've not bothered to write an IE-only hack for, or #wrongly triggering quirks mode due to the xml prologue. What/how a document is actually served to clients I don't much care, as you say, it's easy to change (and the code above is not quite 'correct'). However I have seekret reasons for wanting the markup to be well formed 1.1, so that's how I'm doing stuff atm. As has been mentioned in the past, what would be really kewl would be serving xml and assembling the pages client side

Anyway, I'm off for a coupla days, so I expect some action by the time I return!

Rar

[kidan]

As IE isn't officially supported the answer could be:

Who the f*** cares about that broken PoC?

[fahrenheit]

As IE isn't officially supported the answer could be:

Who the f*** cares about that broken PoC?

officially or not. I bet it's the browser most users use to access anidb. [this is to show that i would very much like to see the access stats of anidb ]

you can't design a site excluding IE users, but oh well, i don't use IE, so let it burn anyway

[exp]

I would have absolutly no problem with shutting all M$ IE users out, presenting them a nice page telling them to download firefox or opera.

Oh and btw., believe it or not, firefox is the most used browser on anidb (about 50%)!
Then comes M$ IE and then Opera.

Ok, there are quite a lot of ppl using M$ IE, even on anidb, but still, I couldn't care less about them :P

I'd actually be more concerned on how pages will display in lynx/links/elinks than in M$ IE :P

BYe!
EXP

[Amour]

I can hack my IE to identify as Firefox, but who cares...

[fahrenheit]

I'd actually be more concerned on how pages will display in lynx/links/elinks than in M$ IE

they look like text.. but overall the pages are good right now with lynx at least

[Rar]

For those who didn't get it first time round, what the page idents itself as and what your client idents itself as are irrelevant. 's just a question of if they read the stylesheet stuff - old clients will pretty much as they do now, but have less table stuff to deal with. Anyway, as exp completely failed to do stunning things while I was away... ;_; I'll have a go at writing some expandy collapsy JS that petri is so keen on for the anime page.

Rar

[exp]

well, you need to get some agreement for others, that your way of doing css is the right way to do it :P

please also keep in mind, that it should be easy to create own css themes which change the looks of anidb.

BYe!
EXP

[Rar]

<rar> I don't expect perfection at first try
<pelican> Getting exp to make it the default would you bring the css experts out of the woodwork

Anyway, felt like dipping into the evil world of JS today, so, pulled egg's anime hint page to bits. Or rather collected all the bits, and made sense of them. Fixed various bugs and greatly reduced the volume of script, and moved it all out of the page and into the header where it belongs. Best line of code in the current:

var FilterHideText = '<input type="hidden" name="mylistfltr"><input type="hidden" name="watchedfltr"><input type="hidden" name="blwlfilter"><input type="hidden" name="votefltr"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genremanor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="genreexcor"><input type="hidden" name="AnimeType"><input type="hidden" name="MinEps"><input type="hidden" name="MaxEps"><input type="hidden" name="MinRecUsers"><input type="hidden" name="MinOverallVote"><input type="hidden" name="MinOverallReview">';

Anyway, collapse is no longer a hacked up weirdness thing, but I've not put much effort into making layout/other things nice.

html:
http://home.pages.at/deridiot/Playpen/hint2.htm
xhtml:
http://home.pages.at/deridiot/Playpen/hint2_work.htm *
page specific css:
http://home.pages.at/deridiot/Playpen/c ... -hint2.css *

JS issues:
-page may load with everything expanded, then collapse at the end. This is partly intended behaviour, but perhaps a bit odd.
-weird people with JS on and CSS off will still have a meaningless box in their page (but it's no longer in the html at least).
-uses string.replace and some other common methods without checking if they exist.
Markup/Layout issues:
-needs some cleanup post-table death.

Rar