I have an ASP.NET MVC app that uses Ember. Basically the ember app is compiled and built into plain Js. The compiled js script is added in one of the view pages. The top top level layout is written in ASP.NET MVC, which is the header and the view with ember script is rendered as the body.
Now I want to have the footer of the page in React. I wrote the footer in React with mui, compiled it using babel and webpack to plain js and used that js script in the footer. However, when I try to load the app, I get a 500 error.
Here is the error
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IIS 10.0 Detailed Error - 500.0 - Internal Server Error</title>
<style type="text/css">
<!-- body {
margin: 0;
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
code {
margin: 0;
color: #006600;
font-size: 1.1em;
font-weight: bold;
}
.config_source code {
font-size: .8em;
color: #000000;
}
pre {
margin: 0;
font-size: 1.4em;
word-wrap: break-word;
}
ul,
ol {
margin: 10px 0 10px 5px;
}
ul.first,
ol.first {
margin-top: 5px;
}
fieldset {
padding: 0 15px 10px 15px;
word-break: break-all;
}
.summary-container fieldset {
padding-bottom: 5px;
margin-top: 4px;
}
legend.no-expand-all {
padding: 2px 15px 4px 10px;
margin: 0 0 0 -12px;
}
legend {
color: #333333;
;
margin: 4px 0 8px -12px;
_margin-top: 0px;
font-weight: bold;
font-size: 1em;
}
a:link,
a:visited {
color: #007EFF;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
h1 {
font-size: 2.4em;
margin: 0;
color: #FFF;
}
h2 {
font-size: 1.7em;
margin: 0;
color: #CC0000;
}
h3 {
font-size: 1.4em;
margin: 10px 0 0 0;
color: #CC0000;
}
h4 {
font-size: 1.2em;
margin: 10px 0 5px 0;
}
#header {
width: 96%;
margin: 0 0 0 0;
padding: 6px 2% 6px 2%;
font-family: "trebuchet MS", Verdana, sans-serif;
color: #FFF;
background-color: #5C87B2;
}
#content {
margin: 0 0 0 2%;
position: relative;
}
.summary-container,
.content-container {
background: #FFF;
width: 96%;
margin-top: 8px;
padding: 10px;
position: relative;
}
.content-container p {
margin: 0 0 10px 0;
}
#details-left {
width: 35%;
float: left;
margin-right: 2%;
}
#details-right {
width: 63%;
float: left;
overflow: hidden;
}
#server_version {
width: 96%;
_height: 1px;
min-height: 1px;
margin: 0 0 5px 0;
padding: 11px 2% 8px 2%;
color: #FFFFFF;
background-color: #5A7FA5;
border-bottom: 1px solid #C1CFDD;
border-top: 1px solid #4A6C8E;
font-weight: normal;
font-size: 1em;
color: #FFF;
text-align: right;
}
#server_version p {
margin: 5px 0;
}
table {
margin: 4px 0 4px 0;
width: 100%;
border: none;
}
td,
th {
vertical-align: top;
padding: 3px 0;
text-align: left;
font-weight: normal;
border: none;
}
th {
width: 30%;
text-align: right;
padding-right: 2%;
font-weight: bold;
}
thead th {
background-color: #ebebeb;
width: 25%;
}
#details-right th {
width: 20%;
}
table tr.alt td,
table tr.alt th {}
.highlight-code {
color: #CC0000;
font-weight: bold;
font-style: italic;
}
.clear {
clear: both;
}
.preferred {
padding: 0 5px 2px 5px;
font-weight: normal;
background: #006633;
color: #FFF;
font-size: .8em;
}
-->
</style>
</head>
<body>
<div id="content">
<div class="content-container">
<h3>HTTP Error 500.0 - Internal Server Error</h3>
<h4>The page cannot be displayed because an internal server error has occurred.</h4>
</div>
<div class="content-container">
<fieldset>
<h4>Most likely causes:</h4>
<ul>
<li>IIS received the request; however, an internal error occurred during the processing of the request. The root cause of this error depends on which module handles the request and what was happening in the worker process when this error occurred.</li>
<li>IIS was not able to access the web.config file for the Web site or application. This can occur if the NTFS permissions are set incorrectly.</li>
<li>IIS was not able to process configuration for the Web site or application.</li>
<li>The authenticated user does not have permission to use this DLL.</li>
<li>The request is mapped to a managed handler but the .NET Extensibility Feature is not installed.</li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<h4>Things you can try:</h4>
<ul>
<li>Ensure that the NTFS permissions for the web.config file are correct and allow access to the Web server's machine account.</li>
<li>Check the event logs to see if any additional information was logged.</li>
<li>Verify the permissions for the DLL.</li>
<li>Install the .NET Extensibility feature if the request is mapped to a managed handler.</li>
<li>Check the failed request tracing logs for additional information about this error. For more information, click here. </li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<h4>Detailed Error Information:</h4>
<div id="details-left">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Module</th>
<td> ManagedPipelineHandler</td>
</tr>
<tr>
<th>Notification</th>
<td> ExecuteRequestHandler</td>
</tr>
<tr class="alt">
<th>Handler</th>
<td> System.Web.Mvc.MvcHandler</td>
</tr>
<tr>
<th>Error Code</th>
<td> 0x00000000</td>
</tr>
</table>
</div>
<div id="details-right">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Requested URL</th>
<td> http://localhost:9001/client-content/?specialtyCode=2</td>
</tr>
<tr>
<th>Physical Path</th>
<td> C:\ash_repos\ChooseHealthy\ChooseHealthy\ASH.Web.ChooseHealthy\client-content\</td>
</tr>
<tr class="alt">
<th>Logon Method</th>
<td> Anonymous</td>
</tr>
<tr>
<th>Logon User</th>
<td> Anonymous</td>
</tr>
</table>
<div class="clear"></div>
</div>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<h4>More Information:</h4>
This error means that there was a problem while processing the request. The request was received by the Web server, but during processing a fatal error occurred, causing the 500 error.
<p>View more information ยป</p>
<p>Microsoft Knowledge Base Articles:</p>
<ul>
<li>294807</li>
</ul>
</fieldset>
</div>
</div>
</body>
</html>
Does anyone know what might be going on?
Thanks!
Both Ember and React use a virtual DOM, and they may be interfering with each other when they try to update the actual DOM.
When your browser loads the page, it starts to execute the JavaScript code on that page. If there is a conflict between Ember and React that causes an error, the JavaScript code will not execute properly and the browser will not be able to update the page. So what then happens is that the server doesn't receive any feedback that the page rendered correctly and will therefore return an error (500) indicating that there is a problem with the server-side.
Try to use React-Ember library which allows you to use both together. It also allows you to use Ember's reactivity and React's JSX syntax for the same component and can help to avoid any conflicts.
Related
I am new working with HTML/CSS/JS and SvelteKit, so I'm struggling getting the look how I want it.
HTML
<h1>{market}</h1>
{#each articleList as item}
<form action="" method="post">
<p class="{item.checked ? "item-checked" : ""}">
{item.quantity} {item.article} {item.place}
</p>
{#if item.checked}
<button>DELETE</button>
{/if}
</form>
{/each}
Global CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: #3A3A3A;
font-family: 'Montserrat', sans-serif;
margin: 0 2em;
}
Component CSS
form {
border: 1px solid #57FF90;
border-radius: 4px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
}
form p {
color: #FFFFFF;
font-size: 1.4rem;
padding: 0 0.5em
}
.item-checked {
text-decoration: line-through;
}
button {
height: 50px;
border: none;
background-color: #57FF90;
margin: 0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
As you can see on the screenshot, there is a gap on the right side.
I created a test HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<form action="POST">
<p>Random Text</p>
<button>DELETE</button>
</form>
<form action="POST">
<p>Random Text</p>
<!-- <button>DELETE</button> -->
</form>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1em;
}
form {
background-color: red;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
border-radius: 4px;
}
button {
border: none;
background-color: green;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
</style>
</body>
</html>
Here everything is looking like expected. Why is there a difference?
Your html test file isn't using the same CSS. When I edit the styles in the test file to be the same as those you're using in the svelte code, I get a page that looks identical.
Also, I don't see the gap except at 175% zoom. That's kind of odd, so I suspect that it's a rounding issue. At any rate, it appears in the html test file as well as the served svelte file, so this isn't a Svelte or SvelteKit issue, as near as I can tell.
I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
So today im trying to take items and subitems from a listview and put it in my html template. i can see how this is hard to understand so im going to be showing u what i mean.
This is the Source code for the HTML File
body {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
color: #666666;
background-color: #333333;
margin: 0px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
tr.h th {
background-color: #333333;
border: none;
}
th {
color: #ffffff;
background-color: #00E5EE;
border: 1px solid #00E5EE;
padding: 3px;
vertical-align: top;
text-align: left;
}
td {
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
pre {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 0px;
margin: 0px;
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
<body>
<div class="center" style="margin:auto;width:80%;">
<table>
<tr class="h">
<th>
<h2>Stats... </h2>
</th>
<th></th>
<th></th>
</tr>
<tr>
<th>name</th>
<th>age</th>
<th>gander</th>
</tr>
<pre><tr><td>Quan</td><td>12</td><td>male</td></tr></pre>
<pre><tr><td>sam</td><td>14</td><td>male</td></tr></pre>
</table>
<p><small>lit stuff right here </small></p>
</div>
</body>
So now to tell you what i want happening, i want when i click the button that says "Turn to html" that i show in the form photo, to convert the items and subitems into the html layout that i also show in the second photo.
i hope this is enough information.
quick note: I just started learning HTML yesterday, this is incredibly new to me so don't be too harsh please--that said, if anyone sees any code that could be done in a simpler way or has any random advice outside of what I'm requesting, please don't hesitate to share. I have a feeling this is terribly scripted, this site is more to help me learn html than for actual use, so there are some area's where I was just using trial and error to make certain things work, and as a result you might see unnecessary code lying around. Point that out too if it bugs you!
ANYWAY, on to the point of the post. I want to have div.textbox inside of div.contentbg with margin-top: 15px. When I try this, however, it applies the margin to div.contentbg instead of div.textbox... it's probably something really stupid. Any help? Thanks in advance! :D
Here's the site: http://jsfiddle.net/gbk8zhwv/1/embedded/result/
Here's the code:
<html> <title>JBROblivion</title> <head> <style> * {
margin: 0;
padding: 0;
}
body {
background-color: black;
margin: 0px;
padding: 0px !important;
height: 100%;
}
a {
margin: 0;
padding: 0;
}
img {
display: block;
margin: 0;
padding: 0;
}
div.contentbg {
background-color: #660000;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.textbox {
width: 90%;
margin: 0px auto;
}
div.lrmipsm {
width: 500px;
}
#nav {
width: 100%;
float: left;
margin: 0;
padding: 0;
background-color: #5C0000;
border-bottom: 2px solid #853333;
}
#nav ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 1000px;
}
#nav li {
float: left;
}
#nav li a:link,
a:visited {
display: block;
padding: 15px;
width: 170px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #5C0000;
text-align: center;
text-transform: uppercase;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
#nav li a:hover,
a:active {
background-color: #520000;
}
h1.centre {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
text-align: center;
text-transform: uppercase;
}
p.introblock {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
</style> </head>
<body>
<img src="http://yt3.ggpht.com/-HKi7fjQseQ0/VJzF49SbsxI/AAAAAAAAAJI/zbpOKJ0Uy0E/w2120-fcrop64=1,00005a57ffffa5a8-nd/Channel%2BArt%2BMask.jpg" alt="Banner" width="100%">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Milestones</li>
<li>Shop</li>
<li>Youtube </li>
</ul>
</div>
<div class="contentbg">
<div class="textbox">
<h1 class="centre">Intro</h1>
<br>
<div class="lrmipsm">
<p class="introblock">Lorem ipsum... sample text.
</p>
</div>
</div>
</div>
</body>
The reason it does not work is because contentbg does not actually have any of its own content. Notice in the example how it works when you run it because there is content in the first div. If you remove "This is some content" it will not appear to work because there is no content to workout where to begin marginalizing (for lack of a better word) from.
Example
div {
background-color: yellow;
}
div.ex {
background-color:red;
margin-top: 40px;
}
<div>This is some content
<div class="ex">This is some content on the inner div.</div>
</div>
In the case you have a div like yours that is empty I would suggest using the padding property instead. This will leave the divs where they are and instead produce some padding around the content of the div you require padding on.
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.