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

Community Beginner ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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

Views

170

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Feb 15, 2019 Feb 15, 2019

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

Likes

Translate

Translate
Adobe Community Professional ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 15, 2019 Feb 15, 2019

Copy link to clipboard

Copied

LATEST

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>

<meta charset="utf-8">

<title>News from XYZ Company</title>

</head>

<body style="font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0; font-size: 100%; line-height: 1.4;">

<div id="logo" style="color: #FFF; background-color: #000; padding: 12px; margin: 0px 0px 24px;">

<p style="margin: 0px; padding: 0px; font-size: 3em; color: #E4E4E4; font-family: Calibri, Arial, sans-serif; text-transform: uppercase;">XYZ</p>

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

</div>

<div id="wrapper" style="padding: 24px;">

<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>

<div style="color: #000; background-color: #FFF; padding: 12px 24px; max-width: 1440px; margin: 20px auto 48px auto; box-sizing: border-box; border: 1px solid #000;">

<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>

<p><a href="https://example.com/"><img src="https://www.dummyimage.com/400x300" alt="PLACEHOLDER" style="max-width: 100%; border: 1px solid #000;"></a></p>

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

</div>

<div style="color: #000; background-color: #FFF; padding: 12px 24px; max-width: 1200px; margin: 20px auto; box-sizing: border-box; border: 1px solid #000;">

<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>

<p style="text-align: center; text-transform: uppercase; letter-spacing: .5em; font-size: 12px; margin-top: 30px;"><img style="max-width:100%; border: 1px solid #000" src="https://dummyimage.com/400x300" alt="placeholder"></p>

<div style="padding: 20px; margin: 10px 0px; background-color: #252525; text-align: center; color: #FFF;">

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

</div>

</div>

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

<div style="background-color: #151515; color: #FFF; padding: 24px; text-align: center;">

<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: 85%; display: inline-block; margin: 0 10px;">Easy to use</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>

<p><a style="color: #FFF;" href="https://www.example.com">More Info..</a>. </p>

</div>

<div>

<div style="text-align: center; border: 1px solid; padding: 24px; max-width: 900px; margin: 40px auto;">

<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>

<em>The XYZ Team</em></p>

<div style="margin-top: 20px; background-color: #000; color: #FFF; padding: 20px; border-radius: 5px; font-size: 75%;">

<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>

</div>

</div>

</div>

</div>

<p style="text-align: center; margin: 0px 0px 20px 0px; font-size: 60%; text-transform: uppercase; letter-spacing: .3em;">Copyright (c) 2019 XYZ Company. All Rights Reserved.</p>

</body>

</html>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines