0

I know the "right" way to do this is via CSS styles/rules, but I could not get them to work in this instance (see here if curious), and so I bit the bullet and bruteforced it by adding inline styles to do what I need (adding margin to the top and an hr element that is plainly visible).

I'm accomplishing those two objectives with this html:

<body style='margin-top:40;margin-left:60;margin-right:60;'>
. . .
<hr style='border:0;height:1;background:#333;color:navy;' />

I also need to draw a line around the used part of the page to make it stand out. This CSS class works in a page in a different project:

.body-content {
   -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
   box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}

...so I tried to add it inline like so (appending it to the existing margin values)):

builder.Append("<body style='margin-top:60;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'>");

...but it does not generate the box around the used edges of the page.

Why not, and how can I get the shadowed box to display using inline styles?

Community
  • 1
  • 1
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862

1 Answers1

0

I don't quite grok why it works (and other attempts didn't), but this works for me (adding the shadow style to the html element, but still adding margin rules to the body element). This shows it in a fair amount of context, but the key lines are for "html", "body", and "hr":

builder.Append("<html style='margin-top:20;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");            
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("<link href=\"~/Content/Site.css\" rel=\"stylesheet\" />"); 

builder.Append("</head>");
builder.Append("<body style='margin-top:20;margin-left:20;margin-right:20;'>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("<img src=\"http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png\" alt=\"PRO*ACT usa logo\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append(string.Format("<h1 style='font-family:Candara, Calibri, serif;'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("</div>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append("<label  style='font-family:Georgia, Tahoma, sans-serif;'>(Click any link below to download the Excel spreadsheet file to your computer)</label>");
builder.Append("</div>");

builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;margin-left:-20;margin-right:-20;' />");
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862