[Clipart] banner-html issues

Jonadab the Unsightly One jonadab at bright.net
Wed Feb 15 09:36:09 PST 2006


Okay, I'm using DOM Inspector to investigate, and here are some
notes...

 *  Almost all of the content of the page, except the header, is outside
    the boundaries of the body tag.
 
 *  div#cc_tab is not visible to the user, but Inspector sees it as
    hanging from the very top of the page, indented a bit from the left,
    overlapping with the content of banner-html.
 
 *  div#cc_wrapper1 corresponds exactly to the colored background bar
    for the header.  It has a min-width of 710px set in
    skin-openclipart.css, no margins or padding (that must be on the
    parent element, I guess), and, surprisingly, no rules about colors
    or backgrounds.
 
 *  div#cc_wrapper2 takes up exactly the same space as div#ccwrapper1,
    but it too has no rules about colors or backgrounds.
 
 *  div#cc_header, despite being a child of div#cc_wrapper2, extends
    below it.  Very wonky.  It has a lot of rules, but its background
    color is either black (from .cc_header) or white (from #cc_header,
    which is listed later and so probably takes precedence).  It does
    specify a foreground color, black.  It specifies a background image,
    ccmixter/bg_header_bottom_left.png, but I cannot verify that this
    image exists on the server.  background-repeat is set to repeat-x
    and background-attachment is scroll.
 
***  div.cc_headerpadding appears to exist only to push the other stuff
     in the header down.  Adjusting the styling on this class might be
     the way to raise the contents of banner-html higher on the page.
  
*** h1#cc_site_name, despite being a child of div.cc_headerpadding,
    is positioned mostly outside of it, in the upper-left corner of
    div#cc_wrapper2.  Wonky.  It is styled with a white color,
    four-pixel top and left margins, bold font-weight, and a font-size
    of 2.5em to make the text large.
    
***** There is an a element here, a child of h1#cc_site_name, but
      which extends beyond the borders of its parent element.
      Specifically, the bottom edge of it goes all the way to the
      bottom of div#cc_wrapper2 (but not beyond, although the text
      inside does go beyond).  It is styled color:white,
      display:block; width: 400px; height: 60px; text-decoration:
      none; all of this is in skin-openclipart.css, mostly for
      #cc_header h1 a (starting around line 64).  This styling
      is likely to be a significant source of wonkiness, IMO.

      The img element with the logo is contained here, but is
      set float: left;
      
      The text Open Clip Art Library is here also, loose in the
      strangely-styled a element with no additional container.
      It extends beyond the edges of the a element, probably because
      400x60 isn't large enough to contain it.  Whoever thought it was
      a good idea to put pixel width and height on an a element with
      text contents ought to be hung upside down by his small toes
      until he repents.  This is our problem.





More information about the clipart mailing list