Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > span in firefox

Reply
Thread Tools

span in firefox

 
 
Moneypenny
Guest
Posts: n/a
 
      12-07-2005
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;}">


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-07-2005
Moneypenny wrote:
>
> 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

 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-07-2005
> 1. Firefox also doesn't like the {} inside the style element.

attribute. Whoops.

Steve

 
Reply With Quote
 
Moneypenny
Guest
Posts: n/a
 
      12-07-2005
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" <(E-Mail Removed)> schreef in bericht
news:(E-Mail Removed) ups.com...
> Moneypenny wrote:
>>
>> 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
>



 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-07-2005
Moneypenny wrote:
> 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

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      12-07-2005
"Steve Pugh" <(E-Mail Removed)> wrote:

>> <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,


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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html


 
Reply With Quote
 
Dung Ping
Guest
Posts: n/a
 
      12-07-2005
Moneypenny wrote:
> 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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-07-2005
Moneypenny wrote:

> 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'



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      12-07-2005
Deciding to do something for the good of humanity, Moneypenny
<(E-Mail Removed)> spouted in alt.html:

> 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>.

--
Mark Parnell
http://clarkecomputers.com.au
 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      12-08-2005
Dung Ping wrote:
>
> 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

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stefan Behnel Python 0 03-29-2010 08:14 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
DataGrid (body only) contained in <span>...</span> tags Dan Bishop ASP .Net Datagrid Control 2 06-07-2004 04:00 PM
Enable drag and drop to the text between <span></span> Wang, Jay Javascript 5 05-25-2004 09:33 PM



Advertisments