Today's CSS quirklets - Grin with cat attached — LiveJournal
Previous Entry Next Entry
Today's CSS quirklets Mar. 31st, 2004 11:03 am
<span style="display: hidden"><br /></span> in IE-Mac will cause a line break.

<p style="position: relative"> elements don't correctly act as absolute positioning parents in Gecko-Mac.

From: deliberateblank
Date: March 31st, 2004 - 07:49 am (Link)
Hmm. REC-CSS1 states that that behaviour of BR elements cannot be styled and that browsers must implement their behaviour as a special case. (Once replacement and inserted content is fully supported there is a chance that BR behaviour can be implemented as a pure style using an inserted pre-formatted linefeed character.)

IE gets several other cascade/inheritance bits wrong - for example a width:100% TABLE within a width:auto parent gets 100% of the width of the page, not of the computed width of the parent; to get 100% of the parent you need to insert an additional DIV element between the two with width:100% set on that too. That it fails to push visibility down to something it is already having to treat specially doesn't surprise me. (Does inserting an extra span or div, possibly with its own display style, around the BR make any difference? You could also try, instead of the BR, an emty div, a div containing only &nbsp;, a pre block containing a single newline.)
From: wechsler
Date: April 1st, 2004 - 01:46 am (Link)
Thanks, you've inspired me to the solution:

Actual code was:

.textonly { display: none; visible: invisible }
<span class="textonly"><br /></span>

Assuming that IE-MAC was broken/inconsistent not only in the way noted, but also in related ways, I added:

.textonly br { display: none; visible: invisible }

And it works.

(NB: exact same bug with an empty 'p' tag)
(NB2: not yet tested in IE-PC, as IT *still* haven't got me a keyboard for the NT box)
From: mageboltrat
Date: April 1st, 2004 - 02:07 am (Link)
This brings me to my latest bit of wierdness... This was a piece of CSS I had to put in while trying to format the summary on my LJ...

.summarylink {
width: 170px;
height: 1.4em;
line-height: 1.4em;
overflow: hidden;
margin: 0px;
padding: 0px;
font-size: 7pt;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=75, StartY=0, FinishX=175, FinishY=0);

That was a hard one to work out. But I tried all kind of things and this was the only one that worked..
From: wechsler
Date: April 1st, 2004 - 02:34 am (Link)
Is "Filter" CSS3 or proprietary, then? In either case, you're unlikely to get wide support for it.
From: deliberateblank
Date: April 1st, 2004 - 05:58 am (Link)
(NB2: not yet tested in IE-PC, as IT *still* haven't got me a keyboard for the NT box)

Install VNC and drive it from a different machine? (Of course you'll need to temporarily nick a keyboard from somewhere else to install VNC...)
From: wechsler
Date: April 1st, 2004 - 06:37 am (Link)
I've tried that one before - I can't get a VNC connection from PC to Mac to stay up for more than about 1/10 second, having tried a range of OSX VNC clients.
From: mageboltrat
Date: March 31st, 2004 - 03:47 pm (Link)
<td> elements don't seem to work correctly as absolute positioning parents in Mozilla and it's friends Firefox and Firebird on the PC.... hmm