Abs positioned elements background white in FireFox

4 posts, 0 answers
  1. Grant
    Grant avatar
    2 posts
    Member since:
    Jun 2011

    Posted 01 Jan 2012 Link to this post

    In Firefox, any/all absolutely elements, background is always white when editing. See below example. Is there a way to override this behavior so that the element's background is preserved, especially in the case of transaparent?

    <div style="background-color:silver;height:300px;width:300px;padding:20px;">
      <div style="position:absolute;height:200px;width:200pxcolor:white;">
        Hello World
      </div>
    </div>

    In a RadEditor, when you click on the words Hello World to edit them the editable area background becomes white thus the white words become unreadable. I would like the editable area to remain transparent so the silver color shows as the background. Is this possible? 

  2.
  3. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 03 Jan 2012 Link to this post

    Hi,

    This is a Firefox behavior, which can be reproduced in an editable IFRAME/DIV element. You should explicitely apply a gray background to the nested div to set its background color, e.g.

    <div style="background-color:silver;height:300px;width:300px;padding:20px;">
      <div style="background-color:silver;position:absolute;height:200px;width:200pxcolor:white;">
        Hello World
      </div>
    </div>


    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Grant
    Grant avatar
    2 posts
    Member since:
    Jun 2011

    Posted 03 Jan 2012 Link to this post

    The silver background was just for illustration. The goal is to have all elements be transparent so that the page's background image shows through. 

    I know how to make the radeditor background be transparent. It is only position:absolute elements inside editor content area that have background turn white when editing in FireFox.

    Do you know of a way to override this FireFix behavior either in the editor, FireFox, css?
  7. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 03 Jan 2012 Link to this post

    Hi,

    I am not sure whether you can overwrite the default browser stylesheet for the absolute positioned elements in Firefox. You can search in Internet and experiment with Firebug in an editable iframe to find a solution or hack.


    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top