Responsive email and IE 7.5 mobile - css

Clearly I must be missing something.
I am trying to get the content in the masthead to go from two to one column in mobile. It works fine everywhere except IE 7.5 mobile. Clearly display:block isn't doing what it should.
How do I get IE 7.5 to work responsively?
<!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"><!-- InstanceBegin template="/Templates/da-partnerbroadcast.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Access Windows and Web Apps from a Chromebook</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
#media screen and (min-device-width:320px) and (max-device-width:760px) {
table[id=wrapper] {
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
}
</style>
<!--[if gt IE 8]>
<style type="text/css">
table#wrapper {
background-color:green !important;
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
</style>
<![endif]-->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="OUTER" -->
<table id="outerwrapper" width="98%" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#e6e6e6;">
<!-- InstanceEndEditable -->
<tr>
<td>
<table id="wrapper" width="598" cellspacing="0" cellpadding="0" align="center">
<!--DA HEADER-->
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="items" align="center" valign="top" style="padding-right:10px;">
<img src="http://www3.districtadministration.com/mailing/logos/dalogo_new.png" alt="District Administration" width="250" height="54" hspace="0" vspace="0" border="0" /></td>
<td class="items" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; -webkit-text-size-adjust:none; color:#999999;padding:10px;">
You are receiving this email as part of a free information service from <em>District Administration</em> Magazine.
</td>
</tr>
</table>
</td>
</tr>
<!--PARTNER CONTENT-->
<!-- InstanceBeginEditable name="Partner Content" -->
<tr>
<td style="border:1px solid #cccccc;background-color:#ffffff;">
<table id="partner" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background-color:#56c9e8;">
<table id="masthead" cellpadding="0" cellspacing="0" width="100%" bgcolor="#56c9e8">
<tr>
<td class="items" style="text-align:center;padding-left:10px;">
<font face="'varela round', helvetica, arial, sans-serif">
<strong style="color:#ffffff;font-size:24px;line-height:30px;">Access Windows and Web Apps from a Chromebook</strong>
</font>
</td>
<td class="items" style="width:320px;text-align:center;">
<img class="resize" src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/1008-mast.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:left;padding:30px;line-height:20px;">
<font face="'varela round', helvetica, arial, sans-serif" size="2" color="#666666">
Chromebooks are quickly gaining popularity in schools because of their web capabilities and cost effective price points. However, there are some issues associated with a Chromebook rollout. For example, if you have legacy Windows applications, you are forced to either abandon them or use different hardware to gain access to them. Additionally, Chromebooks do not support Java based web applications, limiting their effectiveness as an educational tool.
<br /><br />
There is also the issue of integrating Chromebooks into your existing infrastructure. How do you manage them easily with all the other machines you are managing?
<br /><br />
Stoneware products are a cost effective way to integrate Chromebooks into your existing IT environment. Our products webRDP and <a style="color:#00689c;" href="http://www.stone-ware.com/webnetwork" target="_blank">webNetwork</a> give you the ability to access legacy Windows applications, Java based web applications, as well as HTML5 web apps. <br /><br />
For a quick summary <a style="color:#00689c;" href="http://stone-ware.com/webnetwork/education-video" target="_new">watch our three-minute webNetwork video</a>. </font>
</td>
</tr>
<tr>
<td style="text-align:center;"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/btn_video.png" alt="[button] Watch the Video" width="200" height="45" border="0" />
<br /><br />
<img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/stoneware.png" alt="[logo] Stoneware" width="300" height="100" border="0" /></td>
</tr>
</table>
</td>
</tr>
<!-- InstanceEndEditable -->
<!--END PARTNER CONTENT-->
<!--DA FOOTER-->
<tr>
<td>
<table id="dafooter" width="100%" align="center">
<tr>
<td><table width="100%" align="center" cellpadding="0" cellspacing="0" style="margin-top:4px;">
<tr>
<td align="center" style="font-family:Helvetica, Arial, sans-serif;font-size:10px;color:#999999;padding-top:10px;text-align:left;">
This message was mailed to [EMAIL] as part of a free information service from <em>District Administration</em>. <a target="_blank" href='http://www.districtadministration.com' style="color:#999999;"><em>District Administration</em></a> is the award-winning magazine for district superintendents and other top K-12 education executives. To make sure you receive your <em>District Administration</em> emails, add partneremail‌#dapartner‌.net to your address book.
<br /><br />
To unsubscribe from these informational messages, please <a style="color:#999999;" href='[UNSUBURL]'>click here</a>. <a style="color:#999999;" href="http://districtadministration.com/managesubs/[CUID]">Manage Your Subscriptions</a>. <a target="_blank" href="http://www.districtadministration.com/page/privacy-policy" style="color:#999999;">View our Privacy Policy</a>.
<br /><br />
Published by: <a target="_blank" href='http://www.districtadministration.com/' style="color:#999999;"><em>District Administration</em></a>, 488‌ Main Ave., Norwalk, CT, 06851<br />
[COPYRIGHT]
</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body><!-- InstanceEnd --></html>

If you apply a float to the table cells you're breaking. It should make it flow into one column.
td[class=items] {
width:94% !important;
display:block;
float:left;
clear:both;
padding-top:10px;
}

Related

How do I get the href to format properly in the responsive class?

I know I'm missing something simple, but working on a responsive email and cannot get the links to format properly with css
I've tried creating a class and assigning it, the same thing. Tried spans etc. I've never been too bright with CSS. Thanks.
I have been at it for a little bit trying different types that I could find and am probably just going a little crazy since I don't primarily code and I'm working on a responsive email layout.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
#media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent .leftColumnContent a {
font-family: Lato, Arial, Helvetica, sans-serif;
text-decoration: none;
}
img.header {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="800" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 1-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
Sengled Pulse LED Smart Bulb with JBL Bluetooth Speaker (2-Pack)
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 2 -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<a href="#" >Apple iPad 3 Retina Bundle with Case and Screen Protector (32GB)</a>
</td>
</tr>
</table>
</td>
</tr>
<body>
</body>
</html>
You'll need a rule that looks like:
a {
color: preferred-link-color;
}
This will affect all <a> elements in your document.
And since it's an email you may want to inline the styles to boot! I believe gmail/Android clients strip out <style> tags. There are services for this, so you can do it efficiently.

How do I make this element appear as it should in this code?

I a making an HTML email, and I have most of the elements appear as they should. But for some reason, one element I am trying to insert, a small box with an address and a contact doesn't show up like it should.
That grey bar at the bottom with the address should appear the same width as the main white box, and should be surrounded by blue.
My code is:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor= "#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor= "#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
However the address bar does appear to format correctly if i move it above the green and orange boxes,
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
</table>
I'm not sure why this is happening, how do I change the code so that the address appears below the green and orange boxes, but stays the same width as the rest of the elements above it?
Move address row to the unsub link/social media links table and make its colspan="2". I hope this is what you are asking for
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor="#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor="#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor="#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum
<!--do not delete-->&nbsp&nbsp&nbsp&nbsp
<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor="#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<td align="left" valign="top">
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center">
<!--this contains unsub link and copyright-->
<td bgcolor="#50B54D" width="60%">
unsub link
</td>
<td bgcolor="#EC552B" width="40%">
social media links
</td>
</tr>
<tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Using a WordPress featured image in a MailChimp RSS-to-Email campaign

I'm using MailChimp to create a RSS-to-Email campaign based on a WordPress feed.
However, the FEEDITEM:IMAGE tag doesn't grab the featured image from my posts...
I've tried several solutions including dedicated plugins (like this one: https://wordpress.org/plugins/featured-images-for-rss-feeds/) and customized feed-rss2.php (as explained here: https://stackoverflow.com/questions/ask?title=mailchimp%20featured%20image).
Here is my HTML:
<table mc:repeatable="layout" mc:variant="1/1 Panel" bgcolor="#f6f6f6" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table class="table600" bgcolor="#FFFFFF" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
<tr>
<td height="50"></td>
</tr>
<tr>
<td align="center">
<table align="center" class="table-inner" width="550" border="0" cellspacing="0" cellpadding="0">
*|FEEDBLOCK:http://louerunmanager.com/feed/|*
*|FEEDITEMS:[$count=1]|*
<!-- img -->
<tr>
<td align="center" style="display:block; line-height:0px; font-size:0px; border:0px;" class="img1" alt="img" width="550" height="190">
<img src="*|FEEDITEM:IMAGE|*">
</td>
</tr>
<!-- end img -->
<tr>
<td height="25"></td>
</tr>
<!-- title -->
<tr align="left" valign="top">
<td style="font-family: 'Open Sans', Arial, sans-serif; font-size:18px; color:#3b3b3b; line-height:30px; font-weight: bold;" mc:edit="1/1 panel title">*|FEEDITEM:TITLE|*</td>
</tr>
<!-- end title -->
<tr>
<td height="10"></td>
</tr>
<!-- content -->
<tr valign="top">
<td style="font-family: 'Open Sans', Arial, sans-serif; font-size:13px; color:#7f8c8d; line-height:26px;" mc:edit="1/1 panel content">*|FEEDITEM:CONTENT_TEXT|*</td>
</tr>
<!-- end content -->
*|END:FEEDITEMS|*
*|END:FEEDBLOCK|*
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the feed: http://louerunmanager.com/feed/.
As stated in MailChimp's documentation, FEEDITEM:IMAGE should display the content of media:content i.e. the featured image...
Any idea?
Thanks!
The |FEEDITEM:IMAGE| and the |RSSITEM:IMAGE| grab the <media:content /> from the RSS feed, not the url from the image.
Instead of including the mailchimp tag as it is in the code in example:
<img src="*|FEEDITEM:IMAGE|*">
Try placing the tag by itself or inside the
<td>*|FEEDITEM:IMAGE|*</td>
or
<div>*|FEEDITEM:IMAGE|*</div>
It worked for me.
Check the example in the Mailchimp blog article: https://blog.mailchimp.com/rss-to-email-enhancement-for-publishers/

Page Won’t Allow Scrolling Down to See All Content on the Page

I have had a website for my track and cross country teams for a number of years now that I created with Dreamweaver about 5 or 6 years ago. I recently decided it was time to update the website with a new look and feel. However I’m running into problems I never had before creating web pages. I’m wondering if using Dreamweaver CS6 versus whatever version I was using 5 or 6 years ago acts differently than what I did before that was so easy and gave me no problems creating pages.
I created a template from a blank template page and put a couple of rows of banners at the top with a table that is a row of images that will be links right below that. My content will then go below the row of links where I put in an editable region. I have the template set up and started working on my first page using that template, but I’m having a problem I can’t seem to resolve. Whatever content I put in that editable region views just fine when I preview it in multiple browsers, except any content that drops below the bottom of the screen I can’t see and the page won’t scroll. I have spent days trying to figure out how to get my page to scroll down to all of the content, but can’t figure out how to get it do this or if there is something in my CSS settings that is preventing my ability to scroll. My banners at the type are set up in fixed positions so that they will always remain at the top of the page. I’m wondering if this has something to do with the scroll issue? I’ve seen people on here say using fixed settings is a bad way to go. However, when I change them to relative I can’t get my banners to the top of the page where I want them and it messes up the look of the page. In the past when I have designed webpages and I had content that required scrolling the page always automatically scrolled and I didn’t have to think about it. I tried attaching the template and page using it, but I don’t think I can do that here, so I put the code below for the page I’ve created using the template. Any help would be much appreciated.
CTYPE 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"><!-- InstanceBegin template="/Templates/Track and Field.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#Content {
width: 100%;
position: relative;
left: 0px;
top: 2in;
height: 50in;
}
.style2 { color: #006699;
font-size: 12px;
}
.style3 {
color: #006699;
font-size: 16px;
}
.style5 {
font-size: 36px;
font-family: Verdana, Geneva, sans-serif;
color: #021480;
font-weight: bolder;
}
.style9 {
font-size: 16px;
color: #D48B68;
font-family: Verdana, Geneva, sans-serif;
}
.style11 {color: #FFFFFF}
.style12 {color: #FFFF00; font-size: 12px; }
.style13 {color: #FFFFFF; font-size: 12px; }
.style31 {color: #006699}
.style4 {font-size: 24px}
.style91 {font-size: 10px; color: #FFFFFF; }
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
#TFBannerPic {
height: 1in;
width: 100%;
position: fixed;
left: 0in;
top: 0in;
z-index: -100;
/* [disabled]max-width: 1040px; */
}
#TFBanner {
height: .5in;
width: 100%;
position: fixed;
left: 0px;
top: 1in;
}
#Links {
height: .5in;
width: 100%;
position: fixed;
left: 0in;
top: 1.5in;
}
#Content {
width: 100%;
position: fixed;
left: 0in;
top: 2.5in;
height: auto;
}
</style>
</head>
<body id="Content">
<p><img src="Graphics/Web%20Background/Northwest-Track-Stadium-Banner.png" name="TFBannerPic" width="765" height="216" id="TFBannerPic" longdesc="../Graphics/Web Background/Northwest-Track-Stadium-Banner.png" /></p>
<p><img src="Graphics/Web%20Background/Northwest-TF-Banner.png" name="TFBanner" width="994" height="66" id="TFBanner" longdesc="../Graphics/Web Background/Northwest-TF-Banner.png" /></p>
<table width="106%" border="0" id="Links">
<tr>
<td width="83" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/Home-Logo-Icon.png" width="79" height="65" longdesc="../Graphics/Web Background/Home-Logo-Icon.png" /></div></td>
<td width="86" bgcolor="#728CA6"><div align="center"><img src="Graphics/Web%20Background/Lion-Head-Logo.png" width="86" height="48" longdesc="../Graphics/Web Background/Lion-Head-Logo.png" /></div></td>
<td width="86" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/May-Calendar.png" width="76" height="61" longdesc="../Graphics/Web Background/May-Calendar.png" /></div></td>
<td width="91" bgcolor="#728CA6"><div align="center"><img src="Graphics/Web%20Background/Coaching-Staff.png" width="87" height="52" longdesc="../Graphics/Web Background/Coaching-Staff.png" /></div></td>
<td width="86" bgcolor="#d48b68"><div align="center"><img src="Graphics/Web%20Background/Records.png" width="76" height="65" longdesc="../Graphics/Web Background/Records.png" /></div></td>
<td width="86" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/History.png" width="66" height="66" longdesc="../Graphics/Web Background/History.png" /></div></td>
<td width="86" bgcolor="#FFEBA8"><div align="center"><img src="Graphics/Web%20Background/Track-Events.png" width="82" height="66" longdesc="../Graphics/Web Background/Track-Events.png" /></div></td>
<td width="86" bgcolor="#D48B68"><div align="center"><img src="Graphics/Web%20Background/Tracks.png" width="79" height="66" longdesc="../Graphics/Web Background/Tracks.png" /></div></td>
<td width="86"><div align="center"><img src="Graphics/Web%20Background/In-The-News.png" width="79" height="75" longdesc="../Graphics/Web Background/In-The-News.png" /></div></td>
<td width="86" bgcolor="#FFEBA8"><div align="center"><img src="Graphics/Web%20Background/Links.png" width="70" height="75" longdesc="../Graphics/Web Background/Links.png" /></div></td>
<td width="86" bgcolor="#D48B68"><div align="center"><img src="Graphics/Web%20Background/Alumni.png" width="83" height="59" longdesc="../Graphics/Web Background/Alumni.png" /></div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="Content" -->
<div align="center" id="Content">
<table width="100%" border="0">
<tr>
<td><div align="center" class="style5" id="style5">Track and Field Events</div></td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td><p class="style3" id="style3">There are 12 running events and 6 field events in a normal high school track meet in Missouri. In addition, there are an additional 5 relay events, 1 field event, and 1 multi-event that are contested at some meets, but are not normal high school events in Missouri-these are listed in italics. Below is a description and diagram of each event. To jump to a particular event click on the event below. </p>
<p class="style3"></p></td>
</tr>
</table>
<table width="50%" border="0">
<tr>
<td width="50%"><div align="center"><span class="style3">100m Dash </span></div></td>
<td><div align="center"><em><span class="style3">4 x 1600m Relay</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">200m Dash</span></div></td>
<td width="50%"><div align="center"><em><span class="style3">Sprint Medley Relay (800m)</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">400m Dash </span></div></td>
<td><div align="center"><em><span class="style3">Distance Medley Relay (4,000m)</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">800m Run </span></div></td>
<td><div align="center"><em><span class="style3">1600m Sprint Medley Relay</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">1600m Run </span></div></td>
<td><div align="center"><span class="style3">Long Jump </span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">3200m Run </span></div></td>
<td><div align="center"><span class="style3">Triple Jump </span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">100m Hurdles</span></div></td>
<td><div align="center"><span class="style3">High Jump </span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">300m Hurdles</span></div></td>
<td><div align="center"><span class="style3">Pole Vault </span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3"><em>Shuttle Hurdle Relay </em></span></div></td>
<td><div align="center"><span class="style3">Shot Put </span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">4 x 100m Relay</span></div></td>
<td><div align="center"><span class="style3">Discus</span></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">4 x 200m Relay </span></div></td>
<td><div align="center"><em><span class="style3">Pentathlon</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">4 x 400m Relay</span></div></td>
<td><div align="center"><em><span class="style3">Javelin</span></em></div></td>
</tr>
<tr>
<td><div align="center"><span class="style3">4 x 800m Relay</span></div></td>
<td><div align="center"></div></td>
</tr>
</table>
<p> </p>
<table width="90%" border="1" align="center" cellpadding="2">
<tr>
<td colspan="2" class="style31"><div align="center" class="style4"><a name="100m" id="100m"></a>100m Dash </div></td>
</tr>
<tr>
<td colspan="2" class="style2">The 100m is the classic sprints race distance. The reigning 100m world record holder is often named "the fastest man/woman in the world", and the 100 m Olympic title is usually considered among the most prestigious. This 100m is the domain of absolute speed. Athletes of all builds can do well at this distance. Being fast means being able to transmit the orders needed for muscular contraction instantly from the brain. When the gun fires, athletes must react with adrenaline-charged urgency. The 100m demands exceptional reflexes at the start and great explosive power. In the first few strides sprinters must have perfect control of movement and balance without "tightening up". Then they must use their acceleration skills to reach top speed. Since it is difficult to maintain top speed after 6 to 7 seconds of effort, sprinters need strong muscles and relaxed technique. Maintaining the right balance between frequency and length of stride is the key to sprint technique. The 100m can be broken down into basic phases of start, pick-up and finish. The right blend gets results. </td>
</tr>
<tr>
<td colspan="2"><span class="style2">World Record: 10.49-Florence Griffith Joyner-United States-July 16, 1988</span></td>
</tr>
<tr>
<td colspan="2"><span class="style2">American Record: 10.49-Florence Griffith Joyner-United States-July 16, 1988</span></td>
</tr>
<tr>
<td colspan="2"><span class="style2">U.S. High School Record: 11.11-Angela Williams (Chino H.S., Chino, CA)-1998</span></td>
</tr>
<tr>
<td colspan="2"><span class="style2">Missouri State Record: 11.66-Muna Lee (Kansas City Central H.S.)-1999 </span></td>
</tr>
<tr>
<td colspan="2"><span class="style2">Northwest School Record: 12.29-Chandra Chilges-1992</span></td>
</tr>
<tr>
<td rowspan="2"><div align="center"><img src="Graphics/Helpers/Events/100m.jpg" alt="100m Dash" width="360" height="306" /></div></td>
<td align="left" class="style3"><div align="center">Florence Griffith Joyner's 100m World Record:</div></td>
</tr>
<tr>
<td><div align="center">
<object width="340" height="285" align="absmiddle">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="Flo Jo 100m" value="http://www.youtube.com/v/Kg_ypZ5kBcI&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1" />
<embed src="http://www.youtube.com/v/Kg_ypZ5kBcI&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1" width="340" height="285" align="absmiddle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
The use of the position: CSS is incorrect for what you are describing. Remove all of the position: css attributes and the page should begin to work correctly.

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

Resources