Closed Bug 718757 Opened 12 years ago Closed 12 years ago

Phone book Entries are Unreadable

Categories

(Webtools Graveyard :: Phonebook, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: damons, Assigned: wenzel)

References

Details

Attachments

(1 file, 1 obsolete file)

The font colors are the same as the background making phone book entries impossible to read.  See attached schreen shot.
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
I think this is a nightly thing.  It's been like this for a few weeks (confirmed on other user's browsers also).
Looking at comment 2, and glancing at the CSS involved, bug 497995 might be relevant.
So... can we make the CSS more graceful or is it just a bug w/ layout in nightlies?
The border image spec changed, and we updated our implementation.  Phonebook needs to update its CSS.
Alright, we'll take a look -- thanks Kyle.
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.
Hmm, that looks fine.  It might be something else, of course.  Try a nightly on either side of that bug landing to see?
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.
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.
Assignee: karen → morgamic
Status: NEW → ASSIGNED
Attachment #590162 - Flags: review?(thepotch)
Attachment #590162 - Flags: feedback?(khuey)
Group: mozilla-corporation-confidential
Component: Facilities Management → Phonebook
Product: Mozilla Corporation → Webtools
QA Contact: facilities-mgmt → phonebook
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 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.
Attachment #590162 - Flags: review-
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.
Attachment #590162 - Attachment is obsolete: true
Attachment #590162 - Flags: review?(thepotch)
Attachment #590162 - Flags: feedback?(khuey)
Attachment #591038 - Flags: review?(dbaron)
Attachment #591038 - Flags: feedback?(morgamic)
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.
Attachment #591038 - Flags: review?(dbaron)
Attachment #591038 - Flags: feedback?(morgamic)
Committed to r100303. I'll file an IT bug to get this pushed.
Assignee: morgamic → fwenzel
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Blocks: 720656
Thanks!
Sweet!  Thanks guys.
Product: Webtools → Webtools Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: