718757 - Phone book Entries are Unreadable

Status: RESOLVED FIXED

(Webtools Graveyard :: Phonebook, defect)

Description

[Damon Sicore (:damons)]

Attachment: Screen shot showing impossible to read phone book entry.

The font colors are the same as the background making phone book entries impossible to read.  See attached schreen shot.

Comment 1

[Karen Prescott]

This should be a Desk top support or IT issue.  My screen also looks different than yours.  Wondering if this could just be a quick IT fix?

Getting Desk top involved..

Karen

Comment 2

[Wil Clouser [:clouserw]]

I think this is a nightly thing.  It's been like this for a few weeks (confirmed on other user's browsers also).

Comment 3

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

Looking at comment 2, and glancing at the CSS involved, bug 497995 might be relevant.

Comment 4

[Michael Morgan [:morgamic]]

So... can we make the CSS more graceful or is it just a bug w/ layout in nightlies?

Comment 5

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

The border image spec changed, and we updated our implementation.  Phonebook needs to update its CSS.

Comment 6

[Michael Morgan [:morgamic]]

Alright, we'll take a look -- thanks Kyle.

Comment 7

[Michael Morgan [:morgamic]]

Lookin at the CSS I'm seeing:

  .vcard .header {
    border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    -moz-border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    -webkit-border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    border-width: 0 132px 0 16px;
    height: 45px;
    position: relative;
    }

  .vcard .body {
    border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    -moz-border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    -webkit-border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    border-width: 0 16px;
    color: #343434;
    font-size: 0.875em;
    line-height: 1.3;
    overflow: auto;
    padding: 1em 0.5em;
    }

I read the spec on MDN:
https://developer.mozilla.org/en/CSS/border-image

I'm trying to figure out what to tweak to fix the image repeat in the center body because I'm not too up to date on what changed -- so next I'll try to read through bug 497995 and figure out what to change in .vcard border-image styles.

Comment 8

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

Hmm, that looks fine.  It might be something else, of course.  Try a nightly on either side of that bug landing to see?

Comment 9

[Michael Morgan [:morgamic]]

In 12.0a1 (2012-01-18) if I add fill after the slice then it does preserve the middle image, but now the outer borders are bad and the header is not rounded.  I'll update to today's and see if it changes.

Comment 10

[Michael Morgan [:morgamic]]

Ok, in both cases the border-image-slice part of border-image does not have the fill keyword, which should precede the border-image-repeat values.  That causes the middle of the image to not be repeated.

For both .vcard .body and .vcard .header there is no border-style defined.  My theory is that pre-patch the default may have been different or it didn't affect the visibility of -moz-border-image.

In addition to adding the 'fill' part of border-image-slice, each class needs to have 'border-style: solid;' added so the the border shows up at all.  Without it, there is no border and nothing is displayed.

Comment 11

[Michael Morgan [:morgamic]]

Attachment: fixes for missing borders/backgrounds

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Isn't the addition of 'fill' going to break this on all the browsers that don't support that keyword?  (It's right for the unprefixed version, though.)  And wouldn't it be better to declare a background-color so you have good fallback for when border-image isn't supported, which would also fix this?

Comment 14

[Fred Wenzel [:wenzel]]

Comment on attachment 590162 [details] [diff] [review]
fixes for missing borders/backgrounds

r-ing this based on dbaron's comment. I have a quite similar patch in a second.

Comment 15

[Fred Wenzel [:wenzel]]

Attachment: border-image fun, part 2

I tried adding a background color, but that would poke out of the box on the sides as the image is half-transparent. What I ended up doing now is, "fill" for the unprefixed version, and a duplicate -moz prefixed line, one with, one without "fill". The "fill" one will be ignored in Firefox 4 (thus using the previous declaration), and in Nightly, it'll overwrite the declaration without fill.

I tested this and it works in Fx4, Nightly, Safari, and Chrome.

Comment 16

[Fred Wenzel [:wenzel]]

Comment on attachment 591038 [details] [diff] [review]
border-image fun, part 2

All right, I got code review from Rik in #webdev. I'll move the unprefixed version to the bottom of the bunch, then I'll land it.

Comment 17

[Fred Wenzel [:wenzel]]

Committed to r100303. I'll file an IT bug to get this pushed.

Comment 18

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Yep, r100303 looks good to me.

Comment 19

[Fred Wenzel [:wenzel]]

Thanks!

Comment 20

[Michael Morgan [:morgamic]]

Sweet!  Thanks guys.