View Issue Details

IDProjectCategoryView StatusLast Update
0000611HTML & PERLBug Report - Interfacepublic2007-04-14 21:05
Reporterspider0042 Assigned Toepoximator  
PrioritynormalSeverityminorReproducibilityalways
Status resolvedResolutionfixed 
Summary0000611: Compare Lists - Text showing over misaligned Icons (css/html inconsistency) Old html code?
Description[ Problem ]

For All icons (with the exception of div 'layout-menu') the span text is not being hidden on the Compare Anime Lists page.
- In the right menu under 'by state'
- All 'state' status indicators in the anime list table

(Tested Firefox, but likely broken for all browsers)

This is an issue for Any CSS stylewith the exception of only the few listed below. (see ‘Additional Information’)

An Example: (when logged in and using this random user)
http://anidb.info/perl-bin/animedb.pl?show=mylist&do=cmp&uid=131869


[ Comments ]

The html code generated for this page might be ‘old’.
This would be most obvious when comparing the code of the right side menu sections which you can see in ‘Attached File’.

(Maybe it had been missed during a conversion/recoding of the css styling system?)

Some work maybe needed to 'convert' the page so that it becomes more consistent with the rest of the site. (This is only my opinion, but rather then a css hack it might be better to change the page generation.)

Re-coding the generated html might only disturb the style sheets listed below (if at all) - would fix all current sheets - and would ensure future css devs have a consistent platform. (ie. devs won’t end up overlooking the current inconsistencies and create ‘broken’ sheets. Yes anidb might change in the future, but it would result in less broken styles until then. :p )

There may be other sections that might be ‘old code’ in need of replacement, but the parts of the Right side Menu and the Anime list Table are the ones that are visually noticeable.
Additional Information[ Exceptions ]

‘Darkstyle’ and Any ‘Sub: ‘* styles
For all these style sheets the coders noticed the exception, therefore the menu icon text is hidden. BUT, the Anime List Table’s icons are not currently right justified anyway.


[ Code Snippets ]

Attached File contains Quick Examples for the
 - Right Side Menu
 - Anime Table

Also note: (not shown here or in file) The image for 'state: state all' is hard coded into an img (ie. not in css) on the Compare Anime page.
TagsNo tags attached.

Relationships

related to 0000612 resolvedepoximator Compare Lists - page= param carried over when it shouldn't be 

Activities

2007-03-27 21:37

 

compare_lists_old_code_examples.txt (3,635 bytes)   
AniDB Bugtracker
BUG:  Compare Lists - Text showing over misaligned Icons 
      (css/html inconsistency) Old html code?


********************[ Right Side Menu ]********************

Example of the current (working) My List page's menu:
--------------------------------------------------------------------------
	<div class="g_menu mylist_menu">

  ...removed code to save space...
		
		<ul class="state">
			<li><a href="animedb.pl?show=mylist&amp;uid=137427&amp;showheader=1&amp;orderby=name"><span class="i_icon i_state_all" title="all states">all states</span></a></li>
			<li><a href="animedb.pl?show=mylist&amp;uid=137427&amp;onlystate=-1&amp;showheader=1&amp;orderby=name"><span class="i_icon i_state_mixed" title="file with status: mixed state">mixed state</span></a></li>
			
  ...removed code to save space...

			<li><a href="animedb.pl?show=mylist&amp;uid=137427&amp;onlystate=4&amp;showheader=1&amp;orderby=name"><span class="i_icon i_state_deleted" title="file with status: deleted">deleted</span></a></li>
		</ul>

   ...removed code to save space...

	</div>
--------------------------------------------------------------------------


(Note the nice div/classes and the <ul><li>s above and how they are not in the Compare Anime page's code below)


Example of the current <u>Compare Anime</u> page's <u>menu</u>:
<i>(located at bottom of the generated html code)</i>
--------------------------------------------------------------------------
<td width=120 align=right valign=top>
	<table cellspacing=0 cellpadding=0 width=110>
	<tr>
	<td align="center" width=110 class="nav"> MyList CMP </td>
	</tr>
	<tr>
	<td width=110>

    ...removed code to save space...

<b>by state:</b><br>&nbsp; <a href="animedb.pl?do=cmp&amp;show=mylist&amp;uid=131869&amp;orderby=name"><span class="i_icon i_state_mixed" title="file with status: mixed state">mixed state</span></a> <a href="animedb.pl?do=cmp&amp;show=mylist&amp;uid=131869&amp;onlystate=1&amp;orderby=name"><span class="i_icon i_state_unknown" title="file with status: unknown">unknown</span></a> <a href="animedb.pl?do=cmp&amp;show=mylist&amp;uid=131869&amp;onlystate=2&amp;orderby=name"><span class="i_icon i_state_onhdd" title="file with status: on hdd">on hdd</span></a> <a href="animedb.pl?do=cmp&amp;show=mylist&amp;uid=131869&amp;onlystate=3&amp;orderby=name"><span class="i_icon i_state_oncd" title="file with status: on cd">on cd</span></a>
-------------------------------------------------------------------------


ALSO NOTE: (not shown here) the image for 'state: state all' is hard coded into an img (ie. not in css) on the Compare Anime page.




********************[ Anime Table ]********************

Example of the current (working) My List page's anime table:
--------------------------------------------------------------------------
		<td class="title">
			<div class="icoco"><span class="i_icon i_state_oncd" title="file with status: on cd">on cd</span>
			</div>
			<span><a href="animedb.pl?show=anime&amp;aid=1135">.hack//GIFT</a></span>
		</td>
--------------------------------------------------------------------------


Example of the current Compare Anime page's anime table:
--------------------------------------------------------------------------
	<td>

			<table width="100%">
			<tr>
			<td>
			<a href="animedb.pl?show=anime&aid=1135">.hack//GIFT</a>
			</td>
			<td align="right">
			<span class="i_icon i_state_oncd" title="file with status: on cd">on cd</span></td>
					</table>
--------------------------------------------------------------------------

epoximator

2007-03-28 11:34

reporter   ~0001210

currently there are two pages (i can think of) that are still not touched @ cssify:
- review page (animeatt)
- mylist compare

also, see:
http://wiki.anidb.info/w/User:Der_Idiot/css

spider0042

2007-03-29 08:35

reporter   ~0001212

Consider the 'related' issue 0000612 before 'css-ification'
http://tracker.anidb.info/view.php?id=612

Issue History

Date Modified Username Field Change
2007-03-27 21:37 spider0042 New Issue
2007-03-27 21:37 spider0042 File Added: compare_lists_old_code_examples.txt
2007-03-28 11:34 epoximator Note Added: 0001210
2007-03-29 08:30 epoximator Relationship added related to 0000612
2007-03-29 08:35 spider0042 Note Added: 0001212
2007-03-31 16:49 epoximator Status new => assigned
2007-03-31 16:49 epoximator Assigned To => epoximator
2007-04-14 21:05 epoximator Status assigned => resolved
2007-04-14 21:05 epoximator Resolution open => fixed