669618 - fok.nl - Text cut off at NIEUWS part of http://frontpage.fok.nl/

Status: RESOLVED FIXED

Description

[Tom Levels]

Created attachment 544228 [details]
Screenshot of problem

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:8.0a1) Gecko/20110706 Firefox/8.0a1
Build ID: 20110706030833

Steps to reproduce:

Go to http://frontpage.fok.nl/


Actual results:

Look at the "NIEUWS" part on the left part of the frontpage of the site. The times/dates of the different topics are cut off.


Expected results:

The times/dates should be displayed correctly like in IE or older versions of FF.

Comment 1

[Mats Palmgren (:mats)]

Created attachment 544239 [details]
Testcase #1

Distilled markup / styles from the URL.

Comment 2

[Mats Palmgren (:mats)]

Firefox (7 and newer) implements text-overflow markers on both sides of the
block per http://dev.w3.org/csswg/css3-ui/#text-overflow
(other browsers don't do this, yet)

The ellipsis on the left side is triggered by this rule:

span.trackerTime {
	color: #909090!important;
	font-family: arial!important;
	font-size: 9px!important;
	padding-left: 1px!important;
	margin-right: -4px!important;
	margin-left: -1px!important;
}

in http://i.fokzine.net/fp/fp2009/s/fp2009.css?20110624.css

If you don't want the ellipsis on the left side you should remove the
"margin-left: -1px" as that creates overflow that triggers a text-overflow
marker.

Comment 3

[Tom Levels]

So this behaviour is according to the specs and the site should adjust their css?

Comment 4

[Mats Palmgren (:mats)]

Yes.  Please contact them if you now the language and can find any contact info
for the site.  Give them the URL to this bug report.  Thanks.

Comment 5

[Tom Levels]

I contacted the site and they already changed the css, but is still does not work:
span.trackerTime {
	color: #909090!important;
	font-family: arial!important;
	font-size: 9px!important;
	padding-left: 1px!important;
	margin-right: -4px!important;
	position:relative!important;
    left:-1px!important;
}

Comment 6

[Mats Palmgren (:mats)]

Thanks for contacting them, it's good news that they are trying to fix
the issue.  The new CSS rule has the same problem as the original -
"position:relative; left:-1px;" also creates overflow.  They should just
remove that, and remove the "padding-left: 1px" in the same rule if they
want the text to start at the edge.  That is:

span.trackerTime {
	color: #909090!important;
	font-family: arial!important;
	font-size: 9px!important;
	margin-right: -4px!important;
}

Comment 7

[Tom Levels]

The site is fixed now, I will set the status as Resolved Invalid.

Comment 8

[Chris Lawson (gone)]

Since this was a site problem and the bug lives in TE, FIXED.