[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
* 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
* 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