Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Sidekick effected by CSS

Avatar

Former Community Member

This is an odd one. My front end guys gave me a standard CSS that they use for the majority of our (non AEM) web sites and I added that into to design for an AEM template/page. The CSS has the desired effect on styling of the HTML however, small parts of it have a strange effect on Sidekick.

For example here is one part of this large CSS

td, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }

Notice the td that starts it off.

I have a parsys on the page and when I view this in DESIGN mode and click 'Edit' this is what Edit Component dialogue looks like (note the double OK and Cancel buttons) :-

[img]Edit_Double_Btns.jpg[/img]

Another even more dramatic effect results when this bit of CSS is left in :-

legend { left: -9999px; position: absolute; } label { display: block; font-size: 1.4em; line-height: 1.2857; margin-bottom: 0.5em; }

This is what the Edit Component dialog looks like now (note all the icons and descriptions have disappeared and the overlayed 'Draw Anchors') :-

[img]Edit_No_Images.jpg[/img]

Anybody got any idea what is going on here ?

Regards

Fraser.

1 Accepted Solution

Avatar

Correct answer by
Level 2

The Parsys design component relies heavily on legend, fieldset and label. 

In your page, expected css is being overwritten by your custom css. Hence the issue. 

 

I would suggest to edit your custom css so as to avoid conflict.

View solution in original post

1 Reply

Avatar

Correct answer by
Level 2

The Parsys design component relies heavily on legend, fieldset and label. 

In your page, expected css is being overwritten by your custom css. Hence the issue. 

 

I would suggest to edit your custom css so as to avoid conflict.