CSS - Need To Distinguish Between Outlook 2007 And Other Mail Clients

I know everyone who has tried designing emails for Outlook 2007 has had their share of headaches. But I encountered a bug recently where Outlook 2007 is not rendering my fieldset elements correctly. Based on Microsoft's own documents, Outlook 2007 should have full CSS support of the <fieldset> and <legend> elements.

Here is my html and css:
Code:

<fieldset style="border:1px solid #99CCFF; padding-left:10px; padding-right:10px; padding-bottom:10px;">
<legend style="font-weight:bold; text-transform:uppercase;">Warranty Items</legend>
 ** Content here ***
</fieldset>

In every other email reader it looks as it should. But in Outlook 2007 there is no border and no padding. Each <legend> element appears as if it were an inline element.

Has anyone had any luck with this sort of problem?
Thanks!

I am managing maillist, current design have troubles with Outlook 2007
Can someone advice... How i can create link that looks like button in html message for Outlook 2007 users? Without external/internal images.
All samples i know don't work in Outlook 2007!

Uggghhh, I hate it when seemingly simple things turn out to be very difficult. Ok, so I'm tasked with creating a newsletter and I have an image that I'm floating and there are words around the image. At least there are when you look at it in a browser or any email client other than Office 2007.

Office 2007 apparently (just learned this today) now uses the Word engine instead of Internet Explorer. Float (among many, many, MANY other things) is not supported. Is there an equivalent to float?

To try and simulate float, I put the images and words in a table and did a reasonable job...when viewed by a browser!!! Honestly, I try to be OS agnostic and just use these things as tools to get my job done. But Microsoft has proved time and again that they have no qualms about completely changing the rules and not supporting previous stuff. I mean, we're talking basic html here!!!

Ok, rant over. Anybody have any suggestions on how to simulate a float? Thanks in advance.

Hello all,

I have a site up with a menu that I need to replace. Before I do this, i need a bit more control over the different lists that make up the drop down menus.

My goal is to have a unique ID for each list, that allows me to change the width and the position relative to its parent, or trigger. I am not sure what the CSS rules would be to call out each particular list after it has been given a unique identifier.

Please see the code below which provides 2 menu lists and what i feel is the related CSS Code. If this code is not all that is needed, please let me know and I can post more of it. Thanks in advance, i know its a simple thing, but after experimenting, i have not been able to get the results I need.

Menu Code

Code:

 <ul id="p7menubar">
            
    <li id="about"><a  class="trigger" href="../about/index.html">About Us</a>
    <ul>
    
        	<li><a href="../about/distinctions.html">Distinctions</a></li>
        	<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
        	<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
        	<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
        	<li><a href="../about/ourclients.html">Our Clients</a></li>
        	<li><a href="../about/professionals.html">Our Professionals</a></li>
        	<li><a href="../about/faq.html">FAQ's</a></li>
        	<li><a href="../about/careers.html">Careers</a></li>
       		<li><a href="../about/contact.html">Contact</a></li></ul></li>
            
    <li id="services"><a class="trigger" href="../clientservices/index.html">Client Services</a>
    <ul>
      		<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
     		<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
      		<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
       		<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
      		<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
       		<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
       		<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
      		<li><a href="../clientservices/fees.html">Fee Schedule</a></li></ul></li>

CSS Code:

Code:

/*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward pointing arrow.*/

#p7menubar a.trigger {
	padding: 5px 16px 5px 10px;
	background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif);	background-repeat: no-repeat;
	background-position: right center;	
}


/*The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/

#p7menubar li {	float: left;
	width: 8em;
}



/*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
*/

#p7menubar li ul, #p7menubar ul li  {
	width: 16em;
	text-align: left;}

/*
The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/


#p7menubar ul li a  {
	color: #006600;
	border-left: 1px solid #333;
	padding: 3px 12px 3px 15px;
	border-right: 0px;
	border-bottom: 1px solid #333333;
}


/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/

#p7menubar li ul {
	position: 

absolute;
	display: none;
	background-color: #ffffff;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	color: #006600;
}

I have created some stationery using html / css but for some reason when I input it into outlook the styles do not work. Is this common and if so is there a way around it?

Thanks