#include file vs iframe or is there a better way [closed] - asp.net

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
ok simple question about including large mostly static html and asp.net code I am using as of right now #include and I was wondering if iframes would be a better way of handling what I wish to do or is there a better way to do it. here is the current way i'm handling the includes
default.aspx
<%# Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %>
<%# Import Namespace="YAF.Classes.Core" %>
<script runat="server">
protected void Page_Load(object sender, System.EventArgs e)
{
btnSearch.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(btnSearch, "") + ";this.disabled = true;");
if (forum.PageUserID != 1)
{
Page.FindControl("divGuest").Visible = false;
Page.FindControl("divUser").Visible = true;
lblUserName.Text = forum.PageUserName;
}
else
{
Page.FindControl("divGuest").Visible = true;
Page.FindControl("divUser").Visible = false;
lblUserName.Text = null;
}
}
public void Page_Error(object sender, System.EventArgs e)
{
Exception x = Server.GetLastError();
YAF.Classes.Data.DB.eventlog_create(YafServices.InitializeDb.Initialized ? (int?)YafContext.Current.PageUserID : null, this, x);
YAF.Classes.Core.CreateMail.CreateLogEmail(x);
}
protected void btnSearch_Click(object sender, EventArgs e)
{
if (txtSearch.Text.Length > 4)
{
if(ddlCriteria.SelectedValue == "Posts")
Response.Redirect("default.aspx?g=search&search=" + txtSearch.Text);
if(ddlCriteria.SelectedValue == "Posted By")
Response.Redirect("default.aspx?g=search&postedby=" + txtSearch.Text);
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="YafHead" runat="server">
<meta id="YafMetaDescription" runat="server" name="description" content="Yet Another Forum.NET -- A bulletin board system written in ASP.NET" />
<meta id="YafMetaKeywords" runat="server" name="keywords" content="Yet Another Forum.net, Forum, ASP.NET, BB, Bulletin Board, opensource" />
<title>Forums</title>
<style type="text/css">
.sbutton
{
background-color:#361800;
border:medium none;
border-collapse:collapse;
color:#FFFFFF;
font-family:Tahoma,Arial,Helvetica;
font-size:10px;
font-weight:bold;
vertical-align:middle;
}
</style>
<link href="images/favicon.ico" type="image/ico" rel="shortcut icon" />
<link rel="stylesheet" href="navTopStyle.css" type="text/css" media="screen" />
</head>
<body style="margin: 0">
<form id="form1" runat="server" enctype="multipart/form-data">
<table align="center" style="background-color: #ffffff" cellpadding="0" cellspacing="0"
width="790px">
<tr>
<td>
<!--#include file="CComHeader.html"-->
</td>
</tr>
<tr>
<td>
<YAF:Forum runat="server" ID="forum"></YAF:Forum>
</td>
</tr>
</table>
</form>
</body>
</html>
CComHeader.html
<table cellpadding="0" cellspacing="0" width="790px">
<tr>
<td align="left">
<img src="images/smokechair.jpg" alt="Cigar.com" /><img src="images/cigarcomTitle.gif"
alt="Cigar.com" />
</td>
<td align="right">
<table width="310px" height="73px" cellpadding="0" cellspacing="0" style="padding-right: 6px">
<tr>
<td width="109px" class="welcome" align="left">
Welcome to Cigar.com
</td>
<td width="195px" class="welcome" align="left">
<div runat="server" id="divUser">
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="126px" align="left">
<asp:Label ID="lblUserName" CssClass="welcome" runat="server"></asp:Label></td>
<td width="65px" align="left">
Help</td>
</tr>
</table>
</div>
<div runat="server" id="divGuest">
Sign In | Join |
Help
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" >
<tr>
<td width="234px" align="right">
<asp:DropDownList ID="ddlCriteria" runat="server">
<asp:ListItem>Posts</asp:ListItem>
<asp:ListItem>Posted By</asp:ListItem>
</asp:DropDownList>
<asp:TextBox Width="120px" ID="txtSearch" runat="server"></asp:TextBox>
</td>
<td width="70px" align="center">
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="sbutton" OnClick="btnSearch_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<!--#include file="commonTabBar.html" -->
</td>
</tr>
</table>
commonTabBar.html
<div class="CommonTabBar">
<script language="javascript">
function tabOver(e) {
if (e.className != 'CommonSimpleTabStripSelectedTab')
e.className = 'CommonSimpleTabStripTabHover';
}
function tabOut(e) {
if (e.className != 'CommonSimpleTabStripSelectedTab')
e.className = 'CommonSimpleTabStripTab';
}
function tabOverSub(e) {
if (e.className != 'CommonSimpleTabStripSelectedTabSub')
e.className = 'CommonSimpleTabStripTabHoverSub';
}
function tabOutSub(e) {
if (e.className != 'CommonSimpleTabStripSelectedTabSub')
e.className = 'CommonSimpleTabStripTabSub';
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr valign="middle">
<td class="CommonSimpleTabStripTab" style="padding: 0px">
</td>
<td class="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);"
onclick="window.location = 'http://www.cigar.com/index.asp'">
<a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px;
padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/index.asp">
Home</a>
</td>
<td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown2').style.display = 'inline';"
onmouseout="tabOut(this); document.getElementById('ComDropDown2').style.display = 'none';">
<a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px;
padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/cigars/index.asp">
Cigars</a>
<div id="ComDropDown2" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px;
display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24);
position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown2').style.display = 'inline';"
onmouseout="document.getElementById('ComDropDown2').style.display = 'none';">
<ul style="margin: 0px; padding: 0px; width: 100px;">
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/index.asp'"><a href="http://www.cigar.com/cigars/index.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="BrandsLink">Brands </a>
</li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/privatelabel.asp?brand=419'">
<a href="http://www.cigar.com/cigars/privatelabel.asp?brand=419" style="line-height: 25px;
color: rgb(71, 42, 24);" id="SamplersLink">Aging Room </a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/samplers.asp'"><a href="http://www.cigar.com/cigars/samplers.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="SamplersLink">Samplers
</a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/suggestions.asp'"><a href="http://www.cigar.com/cigars/suggestions.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions
</a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/DailyDeal/ccCigarDeals.asp'"><a
href="http://www.cigar.com/DailyDeal/ccCigarDeals.asp" style="line-height: 25px;
color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions </a></li>
</ul>
</div>
Redid the example I was trying to make this into a UC but I ran into a problem with the server script and it not allowing me to obfuscate it more.

There's no reason to use IFRAMEs in this scenario. Their disadvantages are:
They are fixed in size
They don't count for the SEO on your page
You can't access the DOM for items in them (to do scripting)
So I would "include" a file. With ASP.NET your best bet is User Controls or Master Pages.

Using an iframe will cause the client browser to make another HTTP request in order to retrieve its contents. Unless you have a really specific need (like sticking your code into someone else's website) you probably never want to use an iframe.
I don't really see the point of iframes, but I'm open to suggestion. If you need dynamic content, you can use AJAX and normal divs. If your server for some reason needs to include content from another domain or server, you can use curl.

Related

Sendgrid template CSS is ignored

I have used Sendgrid to make the following template:
To send this using my Node server I have created the following module:
/**
* Created by root on 6/6/16.
*/
var path = require('path'),
emailTemplates = require('email-templates'),
async = require("async"),
mailConfig = require('../config/email.json'),
templates = require('../config/emailTemplates.json'),
_ = require('lodash'),
sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
/**
* Sends an email to either one or multiple users
* #param template_id (The id key of the template. Can be found in emailTemplates.json
* #param to String or Array
* #param from String
* #param subject String
* #param keyReplacer Array of objects for keys to replace in the template
*/
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
var email = new sendgrid.Email();
var templateKey = templates[template_id];
if (templateKey) {
email.setSmtpapiTos(to);
email.subject = subject;
email.from = from;
email.text = text;
email.html = '';
email.setFilters({
'templates': {
'settings': {
'enable': 1,
'template_id': templateKey
}
}
});
email.smtpapi.header.sub = createSub(keyReplacer);
sendgrid.send(email);
}
else {
console.log('incorrect key');
}
};
function createSub(keyReplacer) {
var finalObject = {};
if (keyReplacer) {
_.forEach(keyReplacer, function (value, key) {
var k = ':' + key;
finalObject[k] = [value];
})
}
return finalObject;
}
module.exports = mymailer;
However when I receive my email it is stripped from both CSS and images.
It looks like this:
I guess it's some settings I'm missing but I don't know which. Which ones can I try?
Template html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-dnd="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css">
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body {
color: #000000;
}
body a {
color: #0071cb;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table[class="wrapper"] {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img[class="max-width"] {
max-width: 100% !important;
}
#media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table[class="wrapper-mobile"] {
width: 100% !important;
table-layout: fixed;
}
img[class="max-width"] {
height: auto !important;
}
a[class="bulletproof-button"] {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
// 2 columns
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
<style>
body, p, div { font-family: arial,sans-serif; }
</style>
<style>
body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
<center class="wrapper">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
<tr><td valign="top" bgcolor="#0071CB" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
<tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div><%body%></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
<td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">
<img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />
</td>
</tr>
</table></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
<tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
<table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
<table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
<td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
<tr>
<td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
Your Bulletproof Button
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
To unsubscribe click: here
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</tr></td>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</td>
</table>
<![endif]-->
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr></td>
</table>
</div>
</center>
</body>
</html>
The problem with your code is, email clients does not support embedded css. Therefore all styles that you need must be inline with the tag. Also ugly as it might be, but the best way to layout an email template is by using tables.
However, here are some things that might help you with this problem.
TIPS
This will not work:
<style media="screen">
h1{
color: red;
}
</style>
<h1>I like turtles</h1>
This will work:
<h1 style="color:red;">I like turtles</h1>
HELPFUL SOURCES
You can read this to know more about creating email templates.
Source 1
Source 2
Also, there are some inliner out there that will convert your embedded css to inline css. Personally I am using Zurb's email inliner to solve this problem.
That's all I can say, I hope this will get you somewhere. Good luck :)
I had this problem, I fixed it by changing
Content content = new Content("text/plain", notification.getContent());
To
Content content = new Content("text/html", notification.getContent());

align="center" not working in Firefox and IE

I have the following html page in which I have a menu at the top which is perfectly aligned. It is followed by an iframe which has some HTML5 animation and it is not aligning to the center in FF and IE, although it is working perfectly fine on Chrome and Safari. I have used the align="center" attribute everywhere required. How can I get the iframe to align itself to the center in FF and IE? Any help is appreciated.
The HTML file:
<!DOCTYE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style_all.css" />
</head>
<body align="center">
<table align="center" id="menu">
<tr>
<td> HOME </td>
<td> | </td>
<td> ABOUT US </td>
<td> | </td>
<td> HR SERVICES </td>
<td> | </td>
<td> SPORTS & ENTERTAINMENT </td>
<td> | </td>
<td> CONTACT US </td>
</tr>
</table>
<center>
<table width="100%" align="center" style="margin: 0 auto; text-align: -moz-center;" align="-moz-center">
<tr>
<td height="100%">
<iframe frameborder="0" scrolling="no" src="HTML/homepage.html" width="100%" height="600px"> </iframe>
</td>
</tr>
</table>
</center>
<table width="100%" align="center">
<tr>
<td align="left">
<p> Copyrights © HUMAN CAPITAL RESOURCE </p>
</td>
<td align="right">
<p>Created by PENTAFUSE INDIA PVT LTD </p>
</td>
</tr>
</table>
</body>
</html>
The CSS file:
a
{
text-align:center;
font-size:16pt;
color:white;
}
body
{
background-image: url('../Media/bgimage.jpg') ;
}
a
{
text-decoration:none;
}
a:hover
{
color:#646464;
}
p
{
color: white;
font-size: 10pt;
}
html, body
{
margin: auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
table
{
vertical-align:center;
vertical-align:-moz-center;
margin: 0 auto;
}
You can use margin: 0 auto, but at first you have to use iframe (iframe is inline element by default) a block element.
iframe
{
display: block;
width: yourWidth; // place your width here
height: yourHeight; // place your height here
margin: 0 auto;
}
// Thanks for edit suggestion goes to #webeno (comments in css)

asp:menu does not render properly

I'm trying to deploy a simple web application developped with VS2010 in ASP.NET
Everything's going fine on IIS locally on the development machine, but I encouter an issue once deployed on an Apache server : The menu does not render properly, it seems it does not take the CSS into account.
Does anyone already have such an issue ?
Thanks for your help !
[EDIT]
Appache version 2.2.22
Mono version 2.10.8.1
Site.Master :
<body>
<form runat="server">
<div class="page">
<div class="TopBlank"> </div>
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem Text="Google Maps">
<asp:MenuItem Text="HTML" Value="HTML" NavigateUrl="~/Map.htm"></asp:MenuItem>
<asp:MenuItem Text="ASPX" Value="ASPX" NavigateUrl="~/Map.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Liens.aspx" Text="Liens utiles"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
</form>
</body>
CSS :
.menu
{
padding: 4px 0px 4px 8px;
}
.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
.menu ul li a, .menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
.menu ul ul
{
margin-left: 10%;
}
The problem I identified is that when runnning on IIS, an asp:menu is converted into a HTML div whereas with mono it is converted into a HTML table. It seems that when running on mono, the CSS class is not found as shown in the source :
<!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" xml:lang="en">
<head><title>
</title><link rel="stylesheet" type="text/css" href="Styles/Site.css" />
<style type="text/css">
.ctl00_NavigationMenu_0 {background-color:White;}
.ctl00_NavigationMenu_1 {border-style:None;text-decoration:none;}
.ctl00_NavigationMenu_2 {}
</style></head>
<body>
<form name="aspnetForm" method="post" action="Arduino.aspx" id="aspnetForm">
[......]
<div class="clear hideSkiplink">
<a href="#ctl00_NavigationMenu_SkipLink">
<img alt="Skip Navigation Links" height="0" width="0" src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_NWdhSxeypCYSJgIFnBFWuKjP9Rs%3d_f&t=634787585370000000" style="border-width:0px;" /></a>
<table cellpadding="0" cellspacing="0" border="0" id="ctl00_NavigationMenu" class="menu ctl00_NavigationMenu_2" IncludeStyleBlock="false">
<tr>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','0')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','0')">
<table id="ctl00_NavigationMenu_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Home
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverItem ('ctl00_NavigationMenu','1',null)" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1')">
<table id="ctl00_NavigationMenu_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Google Maps
</td><td>
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_sxBDVaG6ao8vAH1kuYRka4pbdXI%3d_f&t=634787585370000000" border="0" alt="Expand Google Maps" />
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','2')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','2')">
<table id="ctl00_NavigationMenu_2i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
Liens utiles
</td>
</tr>
</table>
</td>
<td style="width:3px;">
</td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','3')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','3')">
<table id="ctl00_NavigationMenu_3i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
About
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="" id="ctl00_NavigationMenu_1s" style="visibility:hidden;position:absolute;z-index:1;left:0px;top:0px;">
<div id="ctl00_NavigationMenu_1cu" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','u')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','u')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BDOep8uzgXhnBosTOAXwCS8Rjzo%3d_f&t=634787585370000000" alt="Scroll up" />
</div>
<div id="ctl00_NavigationMenu_1cb">
<div id="ctl00_NavigationMenu_1cc">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_0','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_0','1')">
<table id="ctl00_NavigationMenu_1_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
HTML
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_1','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_1','1')">
<table id="ctl00_NavigationMenu_1_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
ASPX</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="ctl00_NavigationMenu_1cd" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','d')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','d')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BiLWkNe4ZNGZnI7LWDxYAtinS8U%3d_f&t=634787585370000000" alt="Scroll down" />
</div>
</div>
<a id="ctl00_NavigationMenu_SkipLink"></a>
</div>
To be compared to the IIS version :
<div class="clear hideSkiplink">
<img alt="Liens Ignorer la navigation" src="/WebResource.axd?d=vNc13qxX3XhBCykqqeAM4K6DxyzXtiKPMSkmgOEeg_C2LMTfPWT8UVPq_FQ2dO_k8csGANppvDNQ8U1ILvqfCCUzXeU7VT9PTkQGnNHogQU1&t=634679288663570000" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li>
<a class="level1" href="Default.aspx">Home</a>
</li>
<li>
<a class="popout level1" href="#" onclick="__doPostBack('ctl00$NavigationMenu','Google Maps')">Google Maps</a>
<ul class="level2">
<li>
<a class="level2" href="Map.htm">HTML</a>
</li>
<li>
<a class="level2" href="Map.aspx">ASPX</a>
</li>
</ul>
</li>
<li>
<a class="level1" href="Liens.aspx">Liens utiles</a>
</li>
<li>
<a class="level1" href="About.aspx">About</a>
</li>
</ul>
</div>
<a id="NavigationMenu_SkipLink"></a>
</div>
Ok, after hours and hours to try to find the solution in the web.config, I finally found that the solution came from the version of mono-apache-server. I used the mono-apache-server2 instead of the 4.
I then installed the proper version, configured the virtual host and all is working fine now !
The anchor tag that ASP.NET puts in automatically adds the extra vertical space above the menu. An anchor tag gets put above the menu automatically and that screws up the rendering in Internet Explorer and Google Chrome. It works properly in Mozilla Firefox even with the anchor with the image.
To fix, add the SkipLinkText="" attribute to your ASP.NET menu control and that will fix the rendering issue.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

ModalPopupExtender dosenot show up and display blank page

hi,
I had aproblem on model popup extender as I used it well , I did my code well .but when I was testing it it didnot show up only blank page appeared.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
width: 500px;
height: 300px;
}
.btnadd
{
background-image: url('Content/Images/add.png');
height: 27px;
width: 78px;
border: none;
background-repeat: no-repeat;
cursor: pointer;
}
.calhover
{
cursor: pointer;
vertical-align: baseline;
}
.z
{
clear: both;
height: 1px;
}
.tile
{
background-image: url('Content/Images/tile.png');
background-repeat: repeat-y;
width: 437px;
background-position: right;
color: White;
font-weight: bold;
}
.activetab
{
background-color: Green;
font-size: 50px;
}
.accordion
{
width: 770px;
}
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
<script type="text/javascript">
function ValidateCheckBox1(sender, args) {
if (document.getElementById("<%=CheckBox1.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<script type="text/javascript">
function ValidateCheckBox2(sender, args) {
if (document.getElementById("<%=CheckBox2.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<script type="text/javascript">
function ValidateCheckBox3(sender, args) {
if (document.getElementById("<%=CheckBox3.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<ContentTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="body_con ">
<div class="bf_body_d">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
</td>
<td class="body_content" valign="top">
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="3">
<tr>
<td style="border: #3399FF">
<table width="100%" border="0" cellspacing="3" cellpadding="2">
<tr>
<td width="100%" class="style1" align="left">
<h3 style="color: Gray; font-size: large;">
Questions</h3>
<h2>
Please be aware that your answer on both questions might be used by HR to screen
your application.</h2>
</td>
</tr>
<tr>
<td class="style1" align="left">
<asp:DataList ID="Dl_Question" runat="server" OnItemDataBound="Dl_Question_ItemDataBound"
OnItemCommand="Dl_Question_ItemCommand">
<ItemTemplate>
<asp:Label ID="lbl_QID" runat="server" Text='<%# Eval("ID") %>' Visible="false"></asp:Label><br />
<asp:Label ID="Lbl_Question" runat="server" Text='<%# Eval("Question") %>'></asp:Label><br />
<textarea id="Txt_Answer" cols="75" rows="3" runat="server"></textarea>
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="Txt_Answer"
ErrorMessage="*" Display="Dynamic" SetFocusOnError="True" ForeColor="Red" ValidationGroup="question">*</asp:RequiredFieldValidator>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td width="100%" class="style1" align="left" valign="top">
<h3 style="color: Gray; font-size: medium;">
Upload Your CV
</h3>
<asp:FileUpload ID="FU_CV" runat="server" />
<asp:CustomValidator ID="CustomValidator" runat="server" ControlToValidate="FU_CV"
ErrorMessage="File size should not be greater than 4 MB." OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="FU_CV"
ErrorMessage="*" Display="Dynamic" SetFocusOnError="True" ForeColor="Red" ValidationGroup="question">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td valign="top">
<div>
<asp:Panel ID="Panel2" runat="server">
<h2 style="color: Blue; font-size: medium;">
Please certify the information supplied before submitting your CV by checking the
checkbox below .</h2>
<h2 class="dark_gray">
<asp:CheckBox ID="CheckBox1" runat="server" />
<span>I certify that all answers given herein are true and complete.
<asp:CustomValidator ID="CustomValidator1" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox1" ValidationGroup="question"></asp:CustomValidator>
</span>
<br />
<asp:CheckBox ID="CheckBox2" runat="server" />
<span>I authorize investigation of all statements contained in this application for
employment as may be necessary in arriving at an employment decision.
<asp:CustomValidator ID="CustomValidator2" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox2" ValidationGroup="question"></asp:CustomValidator></span>
<br />
<asp:CheckBox ID="CheckBox3" runat="server" />
<span>I hereby certify that all the above data is true and correct. If proven otherwise,
I will be dismissed without any notice or commitment from the employer.
<asp:CustomValidator ID="CustomValidator3" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox3" ValidationGroup="question"></asp:CustomValidator>
</span>
</h2>
</asp:Panel>
<div align="center" style="padding-top: 10px;">
<asp:ImageButton ID="preup" runat="server" ImageUrl="~/Content/Images/down.png" OnClick="preup_Click" />
<asp:ImageButton ID="BT_submit" runat="server" ImageUrl="~/Content/Images/finish.png"
OnClick="BT_submit_Click" ValidationGroup="question" /></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<!-- Kareem end here plz -->
</tr>
</table>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<cc1:ModalPopupExtender ID="modalpopup" runat="server" OkControlID="btnOkay" TargetControlID="hfield"
PopupControlID="display" PopupDragHandleControlID="PopupHeader" Drag="true" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hfield" runat="server" />
<asp:Panel ID="display" Style="display: none" runat="server">
<div>
<img src="Content/Images/warning.png" />
</div>
<div align="center">
<input id="btnOkay" type="button" value="OK" />
</div>
</asp:Panel>
protected void BT_submit_Click(object sender, ImageClickEventArgs e)
{
string File = "~/CvFiles/" + FU_CV.FileName;
if (FU_CV.FileBytes.Length > 4194304)
{
modalpopup.Show();
}
}
I had solved this problem as I added TargetControlID to hidden field's ID but when I replaced it with the ID of submit button "BT_submit" it worked well.

Main div does not enclose other divs

I have been looking for a solution for this for like a day or two but as I'm not used to coding web applications I can't seem to find the problem..
I have a hunch it has to do with that I do float two divs to the left.
Question is why doesn't my main div enclose the whole page?
This is my html..!
<body onLoad="initializePage()">
<script type="text/javascript">
$('#Button1').click(function() {
});
</script>
<input type="button" id="Button1" value="korv" onClick="hidedivs()" />
<div id="main">
<div id="searchholder">
<div id="slider" class="searching"></div>
</div>
<div class="left">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="mytable" cellspacing="0">
<thead>
<tr>
<th scope="col" abbr="Sidor/Artiklar" class="nobg">Sidor/Artiklar</th>
<th scope="col" abbr="Mozrank">MozRank</th>
<th scope="col" abbr="PR">PR</th>
<th scope="col" abbr="Dual 1.8GHz">Fri tillgång</th>
<th scope="col" colspan="2" abbr="Dual 2.5GHz">Välj själv</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'>
<th scope="row" abbr="Model" class="spec"><%# DataBinder.Eval(Container.DataItem, "namn_domain")%> </th>
<td class="alt" ><%# DataBinder.Eval(Container.DataItem, "moz_domain")%></td>
<td class="alt"><%# DataBinder.Eval(Container.DataItem, "pr_domain")%></td>
<td class="alt"><b></b>
<input type='<%# DataBinder.Eval(Container.DataItem, "type_domain")%>' name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value='<%# DataBinder.Eval(Container.DataItem, "faccess_domain")%>' onClick="calculatePrice();disableTB(this.name);" />
"Fri tillgång" </td>
<td class="alt"><input type="radio" name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value="0" onclick="calculatePrice();enableTB(this.name, this.checked)" />
"Skriv ditt antal själv" </td>
<td class="alt" data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'><input type="text" name='<%# DataBinder.Eval(Container.DataItem, "moz_domain")%>' id='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' Enabled="false" Width="40px" onKeyUp="calculatePrice()" style="background-color:#eeeeee" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div id="pricingdetails" class="price">Priset för dina artiklar blir: </div>
</div>
And my .css styles are
.price
{
font-family:"Verdana";
font-size:40px;
color:Green;
float: left;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
color: #797268;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
display: inline;
}
div.searchholder
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
width: 480px;
}
div.main
{
}
div.left
{
float: left;
}
.searching
{
}
The issue here is that since the elements inside your #main div are floated, they're considered in a different flow than your div, and thus it doesn't resize to fit them. Ways to fix this are:
Add overflow: hidden; to your #main styling.
Float your #main by adding float: left;.
Append this to your #main div: <div style = "clear: both;"></div> (this is the least preferable method).
You need to clear the floats of the child elements for #main
Instead of doing what some of the others have suggested (adding an element for the purpose of clearing your floats; bad practice), use a pseudo-element. Just use the following CSS and voila!
#main::after {
clear:both;
content: "";
display: table;
}
Here's a fiddle. This pink background is there to show the result of the above for #main.
Your main div (#main) isn't floated yet you have floated elements inside it.
To clear the float add the CSS:
#main {
overflow: hidden;
}
Add a clear before the ending tag.
<div style="clear:both"></div>

Resources