gannett.com - anchor hover background colors are only rendered on the bottom 13 pixels of transparent GIFs

VERIFIED FIXED in Nov

Status

P2
normal
VERIFIED FIXED
18 years ago
4 years ago

People

(Reporter: samg0d, Assigned: bc)

Tracking

unspecified

Details

(URL)

Attachments

(6 attachments)

(Reporter)

Description

18 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; m18) Gecko/20010131
Netscape6/6.01
BuildID:    2001050518

Sample URLs:
	http://jobs.gannett.com/service/ala/local/FindJob/?srv=FindJob&act=ShowOptions
	http://jobs.gannett.com/service/mad/local/FindJob/?srv=FindJob&act=ShowOptions
	http://jobs.gannett.com/service/tbb/local/FindJob/?srv=FindJob&act=ShowOptions
	http://jobs.gannett.com/service/rdc/local/FindJob/?srv=FindJob&act=ShowOptions
	http://jobs.gannett.com/service/tcs/local/FindJob/?srv=FindJob&act=ShowOptions
	http://jobs.gannett.com/service/poc/local/FindJob/?srv=FindJob&act=ShowOptions

	(Run a job search for more examples if you're bored.)

The icons in the upper-right corner of the page are 2-color transparent GIFs--
white and transparent.  Their apparent colors are determined from their TD's
background-color, which changes on :hover.  In IE, the entire background of the
icon changes color on rollover.  In Mozilla, only the bottom 13 pixels of the
images change color.  The icons are actually the same image files accross all
the above URLs, different only in linked CSS files.



Reproducible: Always
Steps to Reproduce:
Move your mouse onto the icons in the upper-right corner of the provided URLs.

Actual Results:  The icons change color only on the bottom 13 rows of pixels.
However, the bug is even more obvious in the included CSS/HTML code because it
occurs before the mouse is over the icon as well.  The background color appears
only on the lower 13 rows of pixels of the image.

Expected Results:  The background color behind the full transparent area of the
image should render, and change on hover, according to the CSS rule.  Not just
the bottom 13 rows of pixels.

Images with no transparant pixels in the bottom 13 rows don't appear to change
on hover.  Furthermore, if the only visible color in the 2-color GIF matches the
page's background color, then everything above the 13th row of pixels from the
bottom is invisible.

<style type="text/css">
.Icons A { background-color: #999999; }
.Icons A:hover { background-color: #CC0000; }
</style>

<table>
<td class="Icons"><A HREF="blaa"><IMG
SRC="http://jobs.gannett.com/img/icons/print.gif" WIDTH="30" HEIGHT="36"
BORDER="0" ALT=""></A></td>
</table>

Comment 1

18 years ago
Confirming issue in the June 13th build.

http://jobs.gannett.com/service/tbb/local/FindJob/?srv=FindJob&act=ShowNumberedJobs&PAGE_NUMBER=1&SO=&SD=1&L=All
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 2

18 years ago
See also bug 67966, a related problem involving the focus outline.

Comment 3

18 years ago
This is a dup of or depends on bug 5693 (see third testcase attached in that bug
attachment 8284 [details])

Comment 4

18 years ago
Err scratch my previous comment. This bug affects even non-hovering css. I'll
attach a testcase.

Comment 5

18 years ago
Created attachment 38902 [details]
gif for testcase

Comment 6

18 years ago
Created attachment 38903 [details]
testcase

Comment 7

18 years ago
Created attachment 38905 [details]
testcase that works better than the previous one

Comment 8

18 years ago
Few questions:

1) It would seem that <img> is not inheriting <a> background-color (css)
attribute. is it suppost to?
2) Or is the size of <a> incorrect? Is <a> suppost to size to contain <img> ?
3) does this work in any build of NS4? (Doesn't seem to work with NS4.71 win32)
4) does this used to work in the past in Moz?
5) this seems to work only in IE, can someone try in opera?
6) the background color seems to overlap the border drawn around the <img>. Is
it suppost to be drawn in the <img> at all?

Comment 9

18 years ago
After thinking abit more and reading bug 5693 more carefully I've come up with
some answers to my own questions:
2) the size of <a> is correct
3) no, since background-color is not implemented in NS4
6) It is not suppost to draw over the border. (another bug?)

I'm still not sure about question 1) and 5)

Note that in question 1) I meant image inheriting background-color (and maybe
other css attributes) all the time, regardless whether there is :hover, :active
or neither.

Comment 10

18 years ago
sorry for the spam, forgot to add self to cc

Comment 11

18 years ago
It's not only the background colour which has a problem here.  Try this html:

<html>
 <body>
     <a href="http://bugzilla.mozilla.org" style="border-width:thick;
border-style:double">
     <img src="http://bugzilla.mozilla.org/ant.jpg">
    </a>
 </body>
</html>

Comment 12

18 years ago
Created attachment 39481 [details]
testcase

Comment 13

18 years ago
After hours of investigation, I found that Mozilla is actually displaying per
css spec. Was rather busy the last few days, sorry for not getting back to this
bug sooner.

1) See Ian Hickson's comment in bug 38883 for a quick solution.

2) The css spec has 2 type of boxes involved in inline elements. They are called
inline boxes and line boxes.

3) Each inline element has an inline box ( see
http://www.w3.org/TR/REC-CSS2/visuren.html#q7 ), sometimes anonymous inline
boxes are also created ( but that has nothing to do with this bug ).

4) Each line has a line box (see
http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting ). The line box
will adjust to fit all the inline boxes in it.

5) So what does that have to do with anything? Well, since the <a> element is an
inline element, it has a inline box. The <img> element is also an inine element
has a inline box.

6) The <a> element being a non-replaced inline element gets its height from the
font height (see
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata#x41 ).

7) The <img> element is a replaced inline element in this case (see
http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element ) and therefore gets
its height (obviously) from the image (see
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata#x16 ).

8) when you add any styles like border and background to an inline element it is
applied to the "inline box", not the "line box".

9) in this bug the <img> is displayed on top of the <a>, which is expected, but
due to the standard compliant behavior mentioned in 6) and 7), <a> doesn't have
the height of <img>

I'll post an example that demonstrates my point and some examples that works per
css spec.

Comment 14

18 years ago
Created attachment 39529 [details]
transparent gif

Comment 15

18 years ago
Created attachment 39531 [details]
example

Comment 16

18 years ago
changing component: sorry! I forgot to change it before making all the comments
above. Want to get a css expert to take a look. Should this go to evangelism
later? Should there be a technote on this, I've found quite a number of bugs on
this.
Component: Compositor → Style System

Comment 17

18 years ago
Sending to evangelism, should to inform webmaster. Reporter: wanna help with that?
Component: Style System → Evangelism
Reassigning to evangelism

Assignee: kmcclusk → bclary
QA Contact: petersen → zach
(Assignee)

Updated

18 years ago
Priority: -- → P2
Summary: anchor hover background colors are only rendered on the bottom 13 pixels of transparent GIFs → gannett.com - anchor hover background colors are only rendered on the bottom 13 pixels of transparent GIFs
(Assignee)

Comment 19

18 years ago
see http://bugscape.mcom.com/show_bug.cgi?id=7054
Status: NEW → ASSIGNED

Comment 20

18 years ago
Bob: could you explain what that bug is about? I don't have access to it.
(Assignee)

Comment 21

18 years ago
Essentially layout problems. I get reports on sites both internally in bugscape
and here in bugzilla. I am just trying to consolidate them so I can manage the
two databases better. Unfortunately bugzilla does not support duplicates between
multiple databases.  
(Assignee)

Comment 22

17 years ago
All Evangelism Bugs are now in the Product Tech Evangelism. See bug 86997 for
details.
Component: Evangelism → US English
Product: Browser → Tech Evangelism
Version: other → unspecified
(Assignee)

Comment 23

17 years ago
follow up with these sites by 0.9.5
Target Milestone: --- → mozilla0.9.5
(Assignee)

Comment 24

17 years ago
-> 0.9.6, need to follow up on these asap
Target Milestone: mozilla0.9.5 → mozilla0.9.6
fixed, seems to have changed layout. reopen if you still find a site with this
Status: ASSIGNED → RESOLVED
Last Resolved: 17 years ago
Resolution: --- → FIXED

Comment 26

17 years ago
Verified
2002022703/WinXP
Status: RESOLVED → VERIFIED
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.