span in firefox

Discussion in 'HTML' started by Moneypenny, Dec 7, 2005.

  1. Moneypenny

    Moneypenny Guest

    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;}">
    Moneypenny, Dec 7, 2005
    #1
    1. Advertising

  2. Moneypenny

    Steve Pugh Guest

    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
    Steve Pugh, Dec 7, 2005
    #2
    1. Advertising

  3. Moneypenny

    Steve Pugh Guest

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

    attribute. Whoops.

    Steve
    Steve Pugh, Dec 7, 2005
    #3
  4. Moneypenny

    Moneypenny Guest

    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" <> schreef in bericht
    news:...
    > 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
    >
    Moneypenny, Dec 7, 2005
    #4
  5. Moneypenny

    Steve Pugh Guest

    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
    Steve Pugh, Dec 7, 2005
    #5
  6. "Steve Pugh" <> 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
    Jukka K. Korpela, Dec 7, 2005
    #6
  7. Moneypenny

    Dung Ping Guest

    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
    Dung Ping, Dec 7, 2005
    #7
  8. 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
    Jonathan N. Little, Dec 7, 2005
    #8
  9. Moneypenny

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Moneypenny
    <> 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
    Mark Parnell, Dec 7, 2005
    #9
  10. Moneypenny

    kchayka Guest

    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.
    kchayka, Dec 8, 2005
    #10
  11. Moneypenny

    kchayka Guest

    Jonathan N. Little wrote:
    > Moneypenny wrote:
    >
    >> border:buttonface 1px solid;

    > ^^ what the hell is 'buttonface?


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

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Dec 8, 2005
    #11
  12. kchayka wrote:

    > Jonathan N. Little wrote:
    >
    >>Moneypenny wrote:
    >>
    >>
    >>>border:buttonface 1px solid;

    >>
    >> ^^ what the hell is 'buttonface?

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

    Hmm, systems colors, thanks!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 8, 2005
    #12
  13. Moneypenny

    Moneypenny Guest

    Hey people,

    alsow tnx to you, this is my solution:

    Works perfect:

    added overflow:auto and display: block

    tnx.

    "Moneypenny" <> schreef in bericht
    news:43970275$0$2340$...
    > 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;}">
    >
    Moneypenny, Dec 8, 2005
    #13
  14. Moneypenny

    toucana explorer

    Joined:
    Apr 3, 2012
    Messages:
    1
    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;
    toucana explorer, Apr 3, 2012
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    536
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,736
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    475
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    263
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    458
    Wang, Jay
    May 25, 2004
Loading...

Share This Page