Page 1 of 11

AniDB CSS - Feedback Thread

Posted: Wed Nov 30, 2005 9:27 am
by exp

this is the thread where you should put in all your feedback about the new css layout which can be found here:

basically it is supposed to look exactly like anidb does now.
but by use of css which allows alternative "skins" to be written for anidb.


Posted: Wed Nov 30, 2005 9:29 am
by exp
DonGato wrote:Two things about the CSS pages that exp posted as news.

Anime page: I don't like that the anime data is bellow the image. You have to move down to see it in most screens.

Messages page: it has a lot of empty space to the left. Why?

Posted: Wed Nov 30, 2005 9:50 am
by OnegaiNL
Nice, so if I look into CSS a bit I can change AniDB so that it will be even easier to browse?


When is it going to be implented? this week?

Posted: Wed Nov 30, 2005 9:59 am
by DonGato
If you want such code to be really customizable you should give an unique ID to each object. So the TD for a group has a unique id, the TD for a file has an unique ID and so on. This way we can use custom JavaScript code to make tasks and reorganize pages as we like.

Posted: Wed Nov 30, 2005 12:08 pm
by Der Idiot
exp wrote:
DonGato wrote:Anime page: I don't like that the anime data is bellow the image. You have to move down to see it in most screens.
thats NOT intended. (try switching to another style and back again)
anyway known bug caused by firefox - adblock combination

specifically by the options:

- check div blocks
- check links of the elements

we encountered that bug quite some time ago, though rar couldn't figure out how to fix that. only option so far is to n ot use adblock or disable those 2 options.

Posted: Wed Nov 30, 2005 1:17 pm
by BelGarion
Agreed, the info under the picture is annoying. And, no, I don't use Firefox, I use MSIE 6.0 SP1 on a Win2k Pro SP4 system. :D

*exp edit - stuff removed to keep this thread on topic*


Posted: Wed Nov 30, 2005 1:29 pm
by Skywalka
This thead is not about categories. Please refrain from commenting on AniDB features and just focus on the style of the CSS.

My opinion: Where is the difference?

I don't notice anything changed! I like that! Proceed as planned, CSS NOW!

Posted: Wed Nov 30, 2005 1:42 pm
by BelGarion
Ok, I'll reiterate, the anime info under the anime picture is annoying, should be beside it like it is now. And no, I don't use FireFox, I use MSIE 6.0 SP1 on a Win2k Pro SP4 system.

Skywalka wrote:This thead is not about categories. Please refrain from commenting on AniDB features and just focus on the style of the CSS.

My opinion: Where is the difference?

I don't notice anything changed! I like that! Proceed as planned, CSS NOW!

Posted: Wed Nov 30, 2005 1:49 pm
by InsaneLampshade
The voting dropdown lists on the new layout pages don't seem to be centered/aligned properly, see screenshots:

Old Layout
New Layout

Also, the messages page seems to be aligned to the right in the new layout, instead of centered like in the old one.

(I'm using the latest version of Firefox... 1.5)

Since you're trying to be as similar as possible...

Posted: Wed Nov 30, 2005 2:10 pm
by rikai
Copy/Pasted straight from irc:
[08:30:50] <rikai> lol, i only notice three differnce at all between the old and new anidb pages, at least on the main page. The bulets seem a bit messed up on the new page, the "menu" graphic on the left is slightly longer, annnd.... the anime stats boxes are slightly wider.
[08:31:06] <rikai> overall, pretty nice, although for some reason, the bullets are annoying me :P
[08:36:49] <rikai> oh, i much prefer the way the old temp and permanent vote looked, much cleaner.... it's all spread out now.
[08:37:28] <rikai> probably some stray element :P
[08:38:17] <rikai> same thing happened with the vote on the eps page, though that could very well be intentional.
[08:40:47] <rikai> hm, the year field on the latest anime page seems extremly wide for just displaying a year.
[08:41:15] <rikai> that, and the anime names on that page seem excessively large compared to the old ones. o.o
[08:44:13] <rikai> lets see, the stuff on the msg page seems to be not centered...
[08:45:46] <rikai> the top column names on the latest reviews page arent flush any more... ie: "date, anime, by user and your vote" are lower than "review and anime".
[08:46:58] <rikai> hm, there seems to be more wasted empty space between the bottom of the page and the copyrights...
[08:48:26] <rikai> annnnd... the new buttons on the category page look nice, but the subcategories seem wayyyy too indented, imho.
[09:07:34] <rikai> oh, just noticed that, on the anime page, theres some breaks in the black bar seperating the column headers from the rest of the colums, and the PA number is left alined as opposed to right aligned like it used to be, and the rest of the episodes are.
[09:08:30] <rikai> and the note at the bottom of the anime page has a wider wraparund than the old one.
There you go, hope that helps.

Posted: Wed Nov 30, 2005 4:26 pm
by Rar
Hm... this thread needed a KNOWN ISSUES thing, I think everything mentioned is just awaiting solutions. For more background on everything, see the earlier thread.

Anime page image/data issue: it's basically a bug from the dodgyness of vertical center in w3c specs, as far as I can see it's unfixable in the code, the easy answer is just to scrap the vertical center.

Msg page alignment is because I've not worked out how to center two differently sized boxes adjacent to each other. The #id school of css design is terrible, that's simply not going to happen, I'll post a guide later for people who are interested in making their own styles so they can see how the system works.

IE issues - these will always exist, due to the fact IE uses a different box model, a different float model, and fails to impliment a wide range of css selectors and properties. In general the page should display in a usable fashon, but *is* likely to look different from the layout in decent browsers. If there are big issues, the _hacks css file contains IE only overrides, I'll take submission of fixes.

Vote boxes, as the baka pointed out, I broke recently, fixed, then broke again. I guess I'll have to fix it again. o_O' :D

For rikai, the bullets on the main page are your browser deafult, if you hate them that much, I'd change your default. Menu graphic is longer yes, and better (thanks to teh baka mostly), and the stats are rendered completely differently, I didn't bother making that pixel perfect (though I probably could). Votes as above ^. Latest anime... er.. isn't finished, I think I'm gonna change the default design for the whole page rather than emulating the old one. Msg page as above ^. Latest review header layout I'm not decided on yet, I don't like the current rowspan shizzle. Indent on hints page is your browser default again, though some layout changes might happen there. Breaks in the thick black line in the anime page table are inevitable without changing the way it's rendered, most of the other changes there are cosmetic and non-fatal, see the detailed post in the thread I linked above.

Oh, and BIG NOTE, in a decent browser, try the two alternative styles as well (View/Page Style in Firefox, View/Style in Opera).


Posted: Wed Nov 30, 2005 8:44 pm
by Keeper of Demons
Congratulations on your decision to switch to the css way of applying styles... finally people with artistic skills will be able to make us all happy.

Here are a few links that may prove useful with the problms currently encountered above:
  1. 1. Since the perl script output seems to be utf-8 encoded, maybe the charset could be changed to utf-8 ( charset=utf-8 )

    Code: Select all

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    This would solve the current issue with some characters not being properly displayed. For instance, on this page, the quote from WorldWarII's is not properly displayed.

    2. The technique presented here could prove useful in making the picture and anime description sit side by side in two floats. This other article has a very good description of how floats actually work (the method described starting with the Floating Colums header deserves to be ignored, though).

    3. Centering vertically with CSS is possible, and I know it because I used that technique. You can see it described here.
This is all, I hope it would prove useful.

Posted: Wed Nov 30, 2005 9:04 pm
by Rar
1: In fact, the backend database content and text generated via script should all be ascii (with html entities for other characters), which is served as latin1 for bad historical reasons. The  problem is due to character encoding in POST requests, when, *when exp* we switch to a full unicode system all these painful legacy issues should be gone.
Note, there's actually an issue you've missed here, in that to serve XML as anything other than unicode you *must* supply a prologue that specifies the encoding. However, IE triggers quirks mode if it sees a prologue, regardless of the doctype specified, and quirksmode in IE is even more of a giant fuck up than their strict rendering. An amusing upshot of this is that it's impossible to serve valid xhtml 1.1 in non-unicode encodings and have it correctly rendered in IE. Anyway, all this is relatively unimportant, as it's no work for exp to change all page headers generated, and 'standards' are only as useful as the support available for 'em.

2 & 3: Did you even bother looking at the css? Yes, the page is using the (broken) w3c method of vertical centering arbitary blocks, and yes it's using floats. The fact is the implimentations are bugged.


Posted: Wed Nov 30, 2005 9:07 pm
by ttg
1. In firefox, on every page in the default AniDB Style, menu items and login information overlap, such as "help/howto" is displayed over the "User: rar" and "AniDB Forums" is displayed behind the "Profile/Logout" buttons.

2. Also in firefox, on the Messages page, message and menu boxes overlap and are drawn on top of each other. This happens both with "AniDB Style" and with "Brown 2" style.

Both issues seem to be connected with font sizes. I have 'Minimum font size: 14' in my Firefox options. If I change that to 10 the pages look OK but I need a magnifier to read the text. If I change that to None, the pages are not displayed at all (font size 1 is used or something).

The old (current) ANIDB layout does not have any of those problems with min font size 14, all pages are displayed correctly, and are continued to display correctly if I change min font size to None.

Posted: Wed Nov 30, 2005 9:12 pm
by Rar
ttg, do you mind supplying screenies of the old-and-new with your font-sizes? Use or similar. The current design is not very font-size flexible, but we should try and avoid overly brokeness.