Display issue with <li> elements in a textiled box

Rails
#1

I have been messing with my CSS sytlesheets to fix some display
issues. Specifically, messed with

  • and
      elements. Now i have
      noticed on a page with
    • elements in a textile editor box, that
      the list bullet is showing up as "• " instead of “”.

      I am assuming this a CSS issue and not a textile or rails issue.
      Wondering what I need to do to fix this issue. The only bullets that
      are jacked up are those within a div that uses textile codes.

    • #2

    On 1 May 2011, at 18:56, sol.manager wrote:

    I have been messing with my CSS sytlesheets to fix some display
    issues. Specifically, messed with

  • and
      elements. Now i have
      noticed on a page with
    • elements in a textile editor box, that
      the list bullet is showing up as "• " instead of “”.

      I am assuming this a CSS issue and not a textile or rails issue.
      Wondering what I need to do to fix this issue. The only bullets that
      are jacked up are those within a div that uses textile codes.

    • I’d start by examining the CSS rules that are being applied to those
    'li’s according to your browser. Fire up Firebug or Web Inspector or
    similar tool of your choice and inspect those elements to check the CSS
    rules being applied are the ones you expect.

    Having said that, that string of surprising characters looks a lot more
    like a character encoding issue mismatch than a simple CSS error. Are
    you using the ‘:before’ pseudo-class with a ‘content’ rule to set a
    custom character for your lists, by any chance? If so, there could be
    something going on with the character encoding that you’re saving your
    CSS file in.

    Chris

    #3

    I think I may know the answer and it isn’t CSS. I use a gem called
    blavosync to sync my development database with production. I just set
    up a new computer this week and used MySQL Workbench to create the
    empty development database prior to synching with production. In MySQL
    when you create a schema, you can choose the default character
    collation.

    In this case I chose UTF8 -default. I checked out the production
    database and it appears to use latin1_swedish_ci. If I understand
    correctly, importing data from one SQL database to another and having
    different character collation types, can result in weird text.

    In this case, the description field for this particular model uses
    textile codes for markup. Sure enough the normal “” bullets are
    showing up as “•” instead. Silly me, I just checked the tables in
    the MySQL database and sure enough the bullets are screwed up.

    So long answer short. It wasn’t CSS, it appears to me to be a mismatch
    in the default character collation between my production and
    development databases and the result of importing from one to the
    other.

    But it was messing with CSS

  • and
      elements that made me
      notice. Thanks for the assistance though.
    • #4

    (Reply moved inline.)

    On 1 May 2011, at 20:12, sol.manager wrote:

    Wondering what I need to do to fix this issue. The only bullets that
    are jacked up are those within a div that uses textile codes.

    I’d start by examining the CSS rules that are being applied to those 'li’s
    according to your browser. Fire up Firebug or Web Inspector or similar tool of
    your choice and inspect those elements to check the CSS rules being applied are
    the ones you expect.

    Having said that, that string of surprising characters looks a lot more like a
    character encoding issue mismatch than a simple CSS error. Are you using the
    ‘:before’ pseudo-class with a ‘content’ rule to set a custom character for your
    lists, by any chance? If so, there could be something going on with the character
    encoding that you’re saving your CSS file in.

    different character collation types, can result in weird text.

    But it was messing with CSS

  • and
      elements that made me
      notice. Thanks for the assistance though.

    • Glad you’ve identified the problem.

    I did think it was perhaps a database thing (since that’s often the
    cause of encoding problems in Rails apps). I didn’t mention it because
    usually it’s the raw Textile code that’s stored in the database (i.e.
    with ‘#’ characters defining list items), not the transformed version
    (i.e. you run the Textile code through Textile at the point of
    displaying it, not at the point of saving it to the database). Even
    then, in HTML bullet points are usually implicit in the ‘

  • ’, rather
    than explicitly being stored as characters in the database.

    Of course, there’s nothing wrong with having UTF-8 characters in your
    description attribute, it’s just that it hints that your Textile field
    isn’t being used properly to make real HTML lists. But that sounds like
    user error. :slight_smile:

    Chris

    • #5

    You bring up some interesting points, so I took a look at the
    database. Here is a copy of one post descripition from the database
    itself. Perhaps the are cut and pasted while the other elements are
    being inserted via textile editor. That would account for this i
    think. Thank you again. I like to understand things I see.

    h3. Now hiring for
    SUPERINTENDENT

    Full-time Position
    Must have FDOT experience, knowledge of all phases of heavy highway
    construction and utilities.

    Excellent salary & bonus incentive program.

    +We offer great benefits which include:+
    • Medical • Dental • 401(k) • Company Match
    • Supplemental Insurance (Aflac) • Fuel Card
    • Company Truck & Cell provided

    Click Apply now