display: inline-block

Last post 11-14-2005, 3:29 AM by SimonCoope. 4 replies.
Sort Posts: Previous Next
  •  11-10-2005, 9:49 AM 12474

    display: inline-block

    Hi again:
     
    I've got a bit of a problem with the styles I'm applying to the editor.  This happens when I set an ordered (<ol>) or unordered (<ul>) list to have a display property of inline-block in the css file I've linked to the editor.  What happens is the editor behaves as though the list is an image (ie, it changes the cursor to the cross, and displays a dashed box around the list). 
     
    Is this normal?  If so how can I set the editor not to expect images (as we're not using the image functionality) and therefore not treat items with a css display attribute of inline-block as images?
     
    Thanks

    Simon
  •  11-10-2005, 2:08 PM 12487 in reply to 12474

    Re: display: inline-block

    Simon,

    Can you explain in more details or post your code? 

    Is something like the code below?

    <ul style="display: block">
       <li>Test </li>
       <li>Test </li>
       <li>Test </li>
    </ul>

     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  11-11-2005, 3:19 AM 12516 in reply to 12487

    Re: display: inline-block

    Hi Adam:
     
    Apologies if I was a little vague...
     
    I've set the EditorWysiwygModeCss property to a stylesheet I've created for the editor to use.  In this stylesheet I've set the following property:

    ol,ul
    {
        display: inline-block;
        margin: 0px;
    }

    This lets me control where the line-spacings after the lists (ie, the editor handles more like Word if there are no automatic line breaks after the list). 
     
    The above CSS works in Firefox, however in IE I get the cursor change and hashed border as though I'm hovering over a image in the editor.
     
    So, I just wondered if the images in the editor were treated as having a css display of inline-block meaning that anything else I set to have a display of inline-block will be treated as an image?
    Does that clear things up? 
     
    Thanks
     
    Simon
  •  11-11-2005, 3:36 PM 12566 in reply to 12516

    Re: display: inline-block

    Simon,
     
    Yes, I understand what you mean now.

    When using DISPLAY: inline-block", the Object is rendered inline, but the contents of the object are rendered as a block element.  Adjacent inline elements are rendered on the same line, space permitting.
     
    <UL style="DISPLAY: inline-block">
    <LI>test
    <LI>test
    <LI>test
    <LI>test
    <LI>test </LI></UL>

    Will be rendered as
    • test
    • test
    • test
    • test
    • test
    When a element is rendered as a block element, IE will allow you apply the resizing or moving operation to the element. The cursor will change  to "move" (Crossed arrows, indicating something is to be moved) and hashed border will be rendered (indicating something is to be resized).
     
    Hope it helps.

    Let me know if you have any questions or suggestions.

     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  11-14-2005, 3:29 AM 12613 in reply to 12566

    Re: display: inline-block

    Hi again:
     
    Thanks for your reply.
     
    Is there any way you're aware of to switch the aforementioned behaviour off?  At the moment I'm checking the browser type and then specifying a different stylesheet for IE and Gecko browsers (as IE works with inline and Gecko works with inline-block).
View as RSS news feed in XML