Item description formatting (headings, bullet/numbered lists) invisible on item detail page — global CSS reset in style.css
---
Theme: Epsilon (Osclass) — latest version
Affected file: epsilon/css/style.css, "/* RESET */" block
SUMMARY
When an item description contains real HTML formatting written in the
admin TinyMCE editor (headings, bullet lists, numbered lists, bold text),
none of that formatting is visible on the item detail page. The only
thing that ever shows any visual separation is manually adding several
blank lines between paragraphs.
This is NOT a data/sanitization issue — the item description is stored
correctly in the database (oc_t_item_description.s_description) with
proper <h2>/<h3>/<ul><li>/<ol><li>/<strong> tags, and the same tags reach
the browser DOM unmodified. The problem is purely visual (CSS).
STEPS TO REPRODUCE
1. Create/edit an item and write a description in TinyMCE using a
heading, a bullet list and a numbered list.
2. Save and open the item detail page.
3. None of the heading spacing or list markers (bullets/numbers) are
visible. Text just runs together as plain lines.
ROOT CAUSE
epsilon/css/style.css contains a global reset rule that is not scoped to
any specific component and therefore applies to EVERY heading, paragraph
and list on the whole site, including raw HTML rendered inside the item
description container (#item-main .description .desc-text .text):
h1,h2,h3,h4,h5,h6,p,ol,ul {
display:inline-block;
margin:0;
padding:0;
width:100%;
}
ol,ul { list-style:none; }
Effect:
- margin:0 on h1-h6/p removes all vertical spacing between headings and
paragraphs, so a heading is visually indistinguishable from a normal
paragraph.
- list-style:none on ol/ul removes every bullet and number, and li
inherits list-style:none from its parent, so bullet/numbered lists
render as plain unmarked lines.
- The only reason "leaving several blank lines" appears to create
spacing is that each empty <p> still occupies its own line-height as a
100%-width inline-block box — the visual gap comes from accumulated
empty-paragraph height, not from any real margin, which is why a
single blank line isn't enough and several are needed.
SUGGESTED FIX
Scope the reset so it no longer nukes real rich-text content areas (item
description, and likely blog/static page content and category
descriptions, which probably share the same problem). For example, keep
the global reset for the theme's own layout components, but add a
specific override for the description/content container, e.g.:
#item-main .description .desc-text .text h1,
#item-main .description .desc-text .text h2,
#item-main .description .desc-text .text h3,
#item-main .description .desc-text .text h4,
#item-main .description .desc-text .text h5,
#item-main .description .desc-text .text h6,
#item-main .description .desc-text .text p {
display:block;
margin:0 0 12px;
}
#item-main .description .desc-text .text ul {
display:block;
list-style:disc;
padding-left:20px;
margin:0 0 12px;
}
#item-main .description .desc-text .text ol {
display:block;
list-style:decimal;
padding-left:20px;
margin:0 0 12px;
}
#item-main .description .desc-text .text li {
display:list-item;
}
(the same principle should probably be applied wherever else raw
TinyMCE content is rendered with the theme's default styles — blog
articles, static pages, category descriptions, etc., if they reuse the
same global h1-h6/p/ol/ul reset).
We worked around this on our own installation with a small scoped CSS
override targeting only the item description container, and it fully
restores heading spacing and list markers without touching any other
part of the theme — so a similarly scoped fix at the theme level should
resolve it for everyone without side effects.