HTML-Content doesn't apply CSS after insert with AJAX

Question

I'm using AJAX to get the page content for a specific page from a database. That works perfect but now my problem:

For the 'Contact'-Page, I'm getting a form (just HTML...) from the database. But it ignores the CSS, I've loaded in the head of the page. The form-parts have IDs and classes.

My thought is, that it is caused by the insert of content after I loaded the CSS.

Note: I'm not using JQuery and I don't want to use it in this project.

The form looks like the following:

<form method="post" action="#">
<label id="CLabel" for="sendname">Name:<span class="required"></span></label><input type="text" class="contact" name="sendname" maxlength="30" required placeholder="Your Name..(Required)"><br>
<label id="CLabel" for="sendemail">Email:<span class="required"></span></label><input type="email" class="contact" name="sendemail" maxlength="100" placeholder="Your Email-address.."><br>
<label id="CLabel" for="reason">Contact reason:</label><input type="text" class="contact" name="sendreason" maxlength="30" required placeholder="Your Reason..(Required)"><br>
<label id="CLabel" for="sendmsg"></label><textarea id="cmsg" class="noResize" name="sendmsg" required placeholder="Your Message..(Required)" onfocus="this.value=\"\"; this.onfocus=null;"></textarea><br>
<label id="CLabel" for="contactbutton"></label><input class="contactbutton" type="submit" name="contactbutton" value="Send">
</form>

To take a look on the CSS or Javascript, check the link: philliprohde.bugs3.com/new_/

The css is the following (With changed id to class):

label.CLabel{
display:inline-block;
width: 7em;
}
input.contact{
width:400px;
margin-top:5px;
}
/* Button of the contact form */
.contactbutton{
width: 100px;
background: #c1c1c1;
color: #8b0000;
text-transform: uppercase;
text-shadow: #000 1px 1px;
margin-top: 10px;
}
textarea.noResize { resize:none; }
textarea#cmsg {
width: 400px;
height: 120px;
margin-top:5px;
border:none;
font-family: Tahoma, sans-serif;
}

Solved. The hoster hasn't accepted my new css-file (I don't know why). I deleted the old, uploaded it again and now it works.

Thank you for your support.!

Answer 1

Two things:

• Your preview link isn't working;
• The markup you've posted isn't valid (you're reusing the ID 'CLabel' for your labels).

Neither of these should impact your CSS, although the multi-IDs could raise a few issues for you elsewhere in the development.

Adding content into a page after the load will be styled by any CSS you've got in the page (that's relevant) .

Here's what I would suggest you look for to debug:

• Is it possible that the CSS isn't actually being included as you expect? Open up Firebug or Chrome Developer Tools and make sure you're not getting any errors when the CSS passes through.
• Is it possible that your CSS isn't targetting the new content correctly?
• It isn't obvious from your question (at the moment), but is it possible that you're loading the content in via an iFrame (in which case the CSS of the parent page wouldn't effect it).