span in firefox

[Moneypenny]

Hello,

I've got an editable <span> in a website page.

But FireFox don't show anything.

Is there a solution?

<span id="story_new" contentEditable="true" style="{text-align:left;
width:200px; height:200px; border:buttonface 1px solid; border-color:black;
overflow-y:auto; overflow-x:auto;}">

 

[Steve Pugh]

I've got an editable <span> in a website page.

But FireFox don't show anything.

Is there a solution?

<span id="story_new" contentEditable="true" style="{text-align:left;
width:200px; height:200px; border:buttonface 1px solid; border-color:black;
overflow-y:auto; overflow-x:auto;}">

No problem with it being editable, but problems with your CSS.

1. Firefox also doesn't like the {} inside the style element.

2. Hheight and width don't apply to inline elements like span. Hence
FireFox treats your span as if it was

<span id="story_new" contentEditable="true" style="text-align:left;
border:buttonface 1px solid; border-color:black; overflow-y:auto;
overflow-x:auto;"></span>

i.e. one character high and zero width.

Either use a div or apply display: block to the span.

Steve

 

[Steve Pugh]

1. Firefox also doesn't like the {} inside the style element.

attribute. Whoops.

Steve

 

[Moneypenny]

Ok, tnx for youre description.

I use the "display:block" and that works better. But now is te problem that
there are nog scrollbars.

The "overflow-y:auto; overflow-x:auto;" not seems to work.

I guess it's impossible in FF?

 

[Steve Pugh]

Ok, tnx for youre description.

What description? Please don't top post.

I use the "display:block" and that works better. But now is te problem that
there are nog scrollbars.

The "overflow-y:auto; overflow-x:auto;" not seems to work.

Those are MS inventions but thought that Gecko was adding support for
them, but clearly not in FF 1.0.7, maybe 1.5.

Add overflow: auto; as well to cover all browsers.

I guess it's impossible in FF?

Not at all.

Steve

 

[Jukka K. Korpela]

No problem with it being editable,

Apart from contentEditable being an IE-only attribute, you mean?

but problems with your CSS.

The element also lacks a closing tag and sense. We haven't been told what the
big idea is, and we cannot see it in context, but it's apparently an attempt
at creating some interactivity with wrong tools. It's probably a broken
imitation of <textarea>.

In addition to the technicalities you mentioned, using px in dimensioning a
piece of text is wrong approach, border:buttonface 1px solid is undefined by
CSS specs, and so are overflow-x and overflow-y.

 

[Dung Ping]

Ok, tnx for youre description.

I use the "display:block" and that works better. But now is te problem that
there are nog scrollbars.

The "overflow-y:auto; overflow-x:auto;" not seems to work.

I guess it's impossible in FF?

I am told that the contentEditable is an IE-only feature, and does not
work on FF. A page of mine proves the same.

http://www.pinyinology.com/pinyin/content.html

I am still looking for a solution for FF, and like to hear successful
experience.

Dung Ping

 

[Jonathan N. Little]

Hello,

I've got an editable <span> in a website page.

But FireFox don't show anything.

Is there a solution?

<span id="story_new" contentEditable="true"

^^MS proprietary
style="{text-align:left;
^ nix the '{}' in inline styles

width:200px; height:200px; border:buttonface 1px solid; border-color:black;

^^ what the hell is 'buttonface?
border: [<border-width>||<border-style>||<'border-top-color'>] | inherit

border-styles are:

none = No border; the border width is zero.

hidden = Same as 'none', except in terms of border conflict resolution
for table elements.

dotted = The border is a series of dots.

dashed = The border is a series of short line segments.

solid = The border is a single line segment.

double = The border is two solid lines. The sum of the two lines and the
space between them equals the value of 'border-width'.

groove = The border looks as though it were carved into the canvas.

ridge = The opposite of 'groove': the border looks as though it were
coming out of the canvas.

inset = The border makes the box look as though it were embedded in the
canvas.

outset = The opposite of 'inset': the border makes the box look as
though it were coming out of the canvas.

don't see any 'buttonface' in the list.

overflow-y:auto; overflow-x:auto;}">

overflow-y & overflow-x are CSS3, FF1.5 supports, but overflow has wider
support since you want both directions treated the same make:

'overflow: auto'

 

[Mark Parnell]

Deciding to do something for the good of humanity, Moneypenny

I've got an editable <span> in a website page.

Why? You're trying to reinvent the wheel. And your version isn't round.

Is there a solution?

Use a <textarea>.

 

[kchayka]

I am told that the contentEditable is an IE-only feature, and does not
work on FF.

This is true, AFAIK.

I am still looking for a solution for FF, and like to hear successful
experience.

Look up DesignMode

 

[kchayka]

^^ what the hell is 'buttonface?

<URL:http://www.w3.org/TR/CSS21/ui.html#system-colors>

 

[Jonathan N. Little]

<URL:http://www.w3.org/TR/CSS21/ui.html#system-colors>

Hmm, systems colors, thanks!

 

[Moneypenny]

Hey people,

alsow tnx to you, this is my solution:

Works perfect:

added overflow:auto and display: block

tnx.

 

[toucana explorer]

firefox not supporting......



please help me with this issue:

it's ok with IE and chrome but firefox



#topheader #navigation li{font-size:13px;line-height:24px;text-transform:uppercase;position:relative;}

#topheader #navigation li a{ font-family:Arial, Verdana, sans-serif;color:#FFF;padding-left:10px;font-weight:900;text-decoration:none;height:24px;width:200px;display:block;position: relative;z-index:5;}

#topheader #navigation li span{ display:block;height:23px;width:180px;background: #10AB07;position:absolute;z-index:5;