Can I stop the "new css rule" dialog box popping up on text edits?

Report · Feb 15, 2019

Hi everyone

I am making an email template for one of our clients. I use <span> to format text.

I put placeholder text, already styled, into the html. The goal being that the client can easily highlight and replace the text from within the design view, not the code.

Anytime one highlights the entire text and either pastes in content or types, up pops a "create new inline style" dialog box that must be canceled 3 times before you can edit the text.

Placing the cursor in the text and typing, or highlighting a portion of the text does not bring up the dialog box (it's only when the entire text is highlighted).

How can I get this to stop?

Here is a sample of the code if it helps.

<span style="font-size: 18px; line-height: 24px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">Newsletter Statement goes here.</span>

Dreamweaver 19.0 on Mac OS 10.12.6

Thanks

Matt

Report · Feb 15, 2019

Why use span tags at all?

Use semantic structure <h1>, <h2>, <h3>, <p> and list tags.

I can't reproduce your problem in Design View.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 15, 2019

Wish I could, but our global customer base uses a wide variety of email clients (you'd be surprised- outlook 2010 anyone?), so we cannot guarantee end user support for that. Inline it is for now.

Thanks for trying.

Report · Feb 15, 2019

Found my mistake- was missing a <p> and </p> around that span.

Report · Feb 15, 2019

mattp53670594 wrote
Wish I could, but our global customer base uses a wide variety of email clients so we cannot guarantee end user support for that. Inline it is for now.

Huh?!

Inline styles and semantic tags are not mutually exclusive you know. Semantic structure is supported by all e-mail clients including Outlook. Span tags mean nothing.

<p style="font-size: 26px; line-height: 36px; color: #D4133A; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">Newsletter text goes here.</p>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 15, 2019

I thought the span allows me to apply different styles within a table cell and or within a line of type. Is there an easier way to have multiple formatting in a single cell? By "mean nothing" do you mean I don't need to have it there?

Here is what I was told by our team who generate the snippets we base our responsive email templates on-

Several legacy email clients including outlook/office will override h1-h6 and p tags in an email with their own default styling for those tags, so even though they support them the style will change. Gmail does support h1, h2 etc in the head of an email in web, iOS and android, however its preprocessor can sometimes still strip those tags. So in order to ensure a consistent experience for all viewers, use inline styles for all text.

Sigh, so please if you can tell me something that will let me use h1-h6 and p in between the head tags I am all ears, really. Would make my life so much simpler to style the text once...

Report · Feb 15, 2019

I stopped worrying about Outlook a long time ago . It's not worth any extra time or trouble because so few people use it anymore.

HTML E-mails are best kept very simple.

Use Inline CSS on the HTML markup.
No <style> tags
No <table> tags
No <script> tags
No <span> tags except when you want to nest a 2nd style on the same line.

<!doctype html>

<html>

<head>

<title>News from XYZ Company</title>

</head>

<p style="margin: 0px; font-size: .8em; text-transform: uppercase; letter-spacing: .35em;">The worldwide leader in.... </p>

</div>

<p>February 15, 2019</p>

<h1 style="font-size: 22px; margin: 10px 0px 0px; text-transform: uppercase;">Heading 1 here

<span style="margin: 3px 0 16px 0; font-size: .5em; font-weight: normal; letter-spacing: .2em;">And something more here.</span></h1>

<h2>Heading 2</h2>

<p>Lorem ipsum dolor <strong>Product Name</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In perspiciatis quae minima quos et nam eligendi voluptates id saepe doloribus neque aut, .</p>

<p><a style="color: #000;" href="https://example.com">TUTORIAL </a>| <a style="color: #000;" href="https://example.com/products/tools/bse/tutorials/face/finished.htm">DEMO</a></p>

<p><strong>CALL TO ACTION</strong>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, vero deserunt architecto unde eaque consequuntur quae obcaecati. Velit pariatur, officiis minima, maxime nobis voluptatem praesentium in amet, cum quaerat veritatis.</p>

<h2 style="text-align: center; color:#F00">Intro Pricing Still in Effect. Save 20% </h2>

</div>

<h3 style="text-align: center;">Heading 3</h3>

<p style="text-align:center"><a style="color: #000;" href="https://example.com/">Ordinary linked paragraph text.</a></p>

<p style="margin-top: 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolores accusantium architecto? <strong style="font-size: 125%;">Doloremque maxime consequuntur tempora, repudiandae!</strong></p>

<p style="text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; margin-top: 30px; text-align: center;">Product Name by XYZ Company. <strong style="font-size: 120%;">Imagine the Possibilities</strong>. </p>

<p style="text-align: center; font-size: 12px; margin-top: 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae optio architecto numquam asperiores veritatis voluptate omnis magnam? Totam earum, ipsum autem nobis non distinctio, incidunt, possimus unde ut eaque rerum. </p>

<h3 style="text-align: center;">Some very pithy slogan here...</h3>

</div>

<h2 style="text-align: center; margin: 24px 0px 6px 0px;">Key Features</h2>

<p style="font-size: 85%; display: inline-block; margin: 0 10px;">Extraordinary </p>

<p style="font-size: 170%; display: inline-block; margin: 0 10px;">Awesome</p>

<p style="font-size: 120%; display: inline-block; margin: 0 10px;">Lorem ipsum dolor sit </p>

<p style="font-size: 130%; display: inline-block; margin: 0 10px;">Officia corrupti quasi voluptas!</p>

<p style="font-size: 170%; display: inline-block; margin: 0 10px;">lorem ipsum dolor. </p>

<p style="font-size: 120%; display: inline-block; margin: 0 10px;">Make it better.</p>

<p style="font-size: 85%; display: inline-block; margin: 0 10px;">Set yourself apart </p>

<p style="font-size: 135%; display: inline-block; margin: 0 10px; color: #FFF;"><strong>Those are just the highlights</strong> </p>

<p style="font-size: 100%; display: inline-block; margin: 0 10px;">And there's so much more... </p>

</div>

<div>

<h2>Contact & Support</h2>

<div>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus unde aliquam tempora, esse dolorem, ipsa numquam et, assumenda ea aliquid itaque architecto enim. Libero ipsam ut quo facilis ipsa amet.</p>

<p><a href="https://www.example.com/">Visit us online</a></p>

<p>Best Regards,<br>

<h4 style="text-align: center;">Privacy Policy:</h4>

<p>XYZ Customer Lists and data are used by XYZ Company to communicate with our customers and are never sold or released to outside parties. To be removed from future mailings, <a href="https://www.example.com/unsubscribe.asp?id=!*EMAIL*!" style="color:#FFF"> click here</a> to unsubscribe.</p>

<p>PLEASE DO NOT REPLY TO THIS EMAIL. Direct all inquiries to: support@example.com.</p>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Can I stop the "new css rule" dialog box popping up on text edits?

1 Correct answer