CSS - Apparently, My E-mail Link Js Is Not In An Id?

I've tried sending HTML mail with embedded CSS, that is, CSS that is defined between STYLE tags located in the HEAD of the HTML. However, some e-mail clients, esp. Outlook, don't recognize the CSS.

In order to force crappy Outlook to recognize CSS, I need to use inline CSS.

I really want to keep my CSS defined together by the embedded method since it is easier to modify CSS located in one central source to affect many HTML elements, not by the tedious inline method. Is there a way to force Outlook to recognize my CSS (other than using a link)?

If not, is there a PHP function which can accept a file defining embedded CSS styles and parse a HTML file such that a new file is spat out with the CSS inserted inline? I am thinking about writing a function, but jeez, what a pain when it comes to nested CSS definitions.

Thanks.

You know how you can do

<!--[if IE 6]>
//code here
<![endif]-->

Can this be done to distinguish between Microsoft outlook 2007 and other mail clients? Thanks in advance.

hi everyone,
im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers.
what its suppossed to look like is:
a:link.2{
color: white;
text-decoration: none;
font-weight: bold;
}
a:visited.2{
color:white;
text-decoration: none;
font-weight: bold;
}
a:hover.2{
color: #85ADC0;
text-decoration: none
font-weight: bold;
}
a:active.2{
color:white;
text-decoration: none;
font-weight: bold;
}

sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a>

any help is greatly appreciated!
thanks...

I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different.

How do i reference the sublinks? I did this which has no effect.
<a href='".$mypath."' id='catsub2'>";



//these settings override it still.
#blanksideboxContent.sideBoxContent a{
color: #000000;
font-size:1em;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:2px outset #000000;
background-color:#5ec82a;
width:125px;
display :block;
margin-left:2%;
}


#catsub2 a{
width:80px;

}

Hi

I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css".

Code:

<!--[if IE]>
   <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css">
<![endif]-->
<LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css">

Just tested and it doesn't work... it only calls "menu.css"

Tried it with "if IE7" and "if IE6" with no avail.

--------------

IE Style:
Code:

 #menu * {margin:0;} 
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px} 

All Others Style:
Code:

 #menu * {padding: 0;margin:0} 
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px} 

Anyone know how this is done?

Hey guys,

Me again =(

Im having trouble with my CSS links.

For my navigation I want the regular text and the links to be the same, but dont know how. When I enter text with a link next to it, it moves the link down.

Here take a look: Link

Hover over forums. You will see "Help Here" above "Please Login".

Here is the CSS:
Code:
Code:

/*
---------------------------------------------------------------------------------------------
Guilds of WarCraft CSS TEMPLATE
Designed By: Donnerschlag
Version: 1.0  (7/20/05)
Description: Global CSS Styles for Guilds of WarCraft
URL: http://www.guildsofwarcraft.net
---------------------------------------------------------------------------------------------
*/




/****** Global CSS ********/

body {
    background-image: url(images/background.png);
    font: 10px Trebuchet MS, verdana, tahoma, arial;
    color: #000;
	margin:5px 0px; padding:0px;
	text-align:center;
}

a:link,
a:visited,
a:active,
a:hover {
    text-decoration: none;
    color: #000;
}

.banner { 
  background-image: url(images/header-bground.png);
  background-repeat: repeat-x; 
	width: 100%;
}

#container {
	width:617px;
	margin:0px auto;
	text-align: left;
	vertical-align: top;
	padding:9px;
}



/****** Navigation ********/



#navigation {
    position: relative;
    margin: 15px 235px 22px 0;
    padding: 0 0 0px 0;
    height: 2.4em
}

#nav ul { width: 598px; }

#nav li {
    margin: 0;
    float: left;
    display: block;
    padding-right: 10px;
}

#nav li.off ul, #nav li.on ul {
    display: none;
}

#nav li a {
    background: #CFC9A9;
    display: block;
    line-height: 6px;
    width: 8em;
    border: 1px solid #8C867A;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #66737B;
}

#nav li.off ul, #nav li.on ul {
    display: none;
    position: absolute;
    top: 1.5em;
    line-height: 5px;
    left: 0;
    padding-top: 5px;
}

#nav li.on a {
    background: #8C867A;
    border: 0;
    color: #FFF;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
}

#nav li.on ul {
    display: block;
}

#nav li.on ul a, #nav li.off ul a {
    float: left;
    border: 0;
    color: #FFF;
    width: auto;
    margin-right: 5px;
}

#nav li.on ul {
    background: #8C867A;
    display: block;
}

#nav li.on:hover ul {
    background: #8C867A;
}

#nav li.on:hover a {
    background: #8C867A;
    color: #FFF;
}

#nav li.off:hover ul, #nav li.sfhover ul {
    background: #8C867A;
    display: block;
    z-index: 6000;
}

#nav li.off:hover a, #nav li.sfhover a {
    background: #8C867A;
    color: #FFF;
}

#nav li.off ul a:hover, #nav li.on ul a:hover {
    background: #8C867A;
    color: #E2E6E7;
}


/****** Main Body ********/



#mainbody {
	padding: 9px 9px 9px 9px;
    border-style:solid;
	border-color:black;
	border-width:1px;
	border-color: #000000;
    background-color: #F8F4EB;        
	}
#news {
	padding: 5px 5px 5px 5px;
	background-color: #CFC9A9;
	width: 579px;
	}


/****** Copyright ********/


.copyright {color: #FFFFFF}

/****** Notice ******/
#notice {
	padding:2px;
	border-style:dashed;
	border-color:black;
	border-width:1px;
	border-color: #000000;
	background-color: #F1F6A3;
	min-height: 32px;
}

and this is the nav PHP:
Code:

PHP Code:
<div id="navigation" >
    <ul id="nav">
      <li class="on"><a href="#">General</a>
          <ul>
            <li><a href="index.php" title="Home" accesskey="h"><span class="access-key">H</span>ome</a></li>
            <li><a href="" title="About Us" accesskey="a"><span class="access-key">A</span>bout Us</a></li>
            <li><a href="" title="Guilds" accesskey="g"><span class="access-key">G</span>uilds</a></li>
            <li><a href="" title="Downloads" accesskey="d"><span class="access-key">D</span>ownloads</a></li>
            <li><a href="" title="Members" accesskey="m"><span class="access-key">M</span>embers</a></li>
            <li><a href="" title="Search" accesskey="s"><span class="access-key">S</span>earch</a></li>
            <li><a href="" title="FAQs" accesskey="f"><span class="access-key">F</span>AQs</a></li>
            <li><a href="" title="Contact Us" accesskey="c"><span class="access-key">C</span>ontact Us</a></li>
          </ul>
      </li>
      <li class="off"><a href="#">Forum</a>
          <ul class="navtext">
          <?php include("memberbar.php"); ?>
          </ul>
      </li>
      <li class="off"><a href="#">Guild Masters</a>
          <ul>
            <li><a href="" title="Login">Login</a></li>
            <li><a href="" title="Register">Register New Guild</a></li>
          </ul>
      </li>      
    </ul>
</div>

Memberbar.php:

PHP Code:
Code:

<?
/**
* IPB SDK Code Snippet - Member Bar
* Copyright (C) 2003 Global Centre Scripting
* Designed for IPB SDK 1.0
*
* This Code Snippet displays a member bar.
*
* @author Cow <khlo@global-centre.com>
* @date   23/11/03
*/

// Load and Start IPB SDK
require_once "ipbsdk_class.inc.php";
$SDK =& new IPBSDK();

// =====================
// START MEMBERBAR
// =====================

if ($SDK->is_loggedin()) {
    // We're logged in. Retrieve member info
    $info = $SDK->get_info();

    // Generate Bar Content
    $member_name = $info['name'];
    $extralinks = "";
    if ($SDK->is_admin()) {
        $extralinks .= '<li><a href="'.$SDK->board_url.'/admin.php">Admin CP</a></li>';
    }
    if ($SDK->is_supermod()) {
        $extralinks .= '<li><a href="'.$SDK->board_url.'/index.php?act=modcp">Mod CP</a></li>';
    }

    // Display Member Bar
    echo '<li>Logged in as '.$member_name.'</li>
          '.$extralinks.'
          <li><a href="'.$SDK->board_url.'/index.php?act=Login&CODE=  03">Log Out</a></li>';
}
else {
    // Display the Guest Bar
    echo '<li> Help Here<a href="'.$SDK->board_url.'/index.php?act=Login&CODE=  00">Please Login</a><a href="'.$SDK->board_url.'/index.php?act=Reg&CODE=00  ">or Register</a></li>';
}

// =====================
// END OF MEMBERBAR
// =====================
?>

Well I have images that I am using as link:

Code:

<dl class="links">
<dt><a href="index.html"><img class="border"  src="images/home.gif" alt ="home" /></a></dt>
<dt><a href="aboutme.html"><img class="border" src="images/aboutme.gif" alt ="About Me" /></a></dt>
<dt><a href="blog.html"><img class="border" src="images/blog.gif" alt ="Blog" /></a></dt>
<dt><a href="guestbook.html"><img class="border" src="images/guestbook.gif" alt ="Guestbook" /></a></dt>
<dt><a href="tutorial.html"><img class="border" src="images/webtutorial.gif" alt ="Web Tutorial" /></a></dt>
</dl>

What I am trying to do is get this into the CSS of my page as I want to make multiple skins for the page. But I am at a loss of how to get the image name of the link into it, so that in different style sheets I can use different pictures.

Please Help,

Bumfluff

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFE648;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: underline;
}
a:link {
text-decoration: underline;
color: #FFFFFF;
}
.main_border {
border-top: none;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;

}
.field_style1 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #666666;
}
.whitebold_12px {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.whitebold_11px { font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: none;
color: #FFFFFF;
}
.arrow_bold {
font-size: 14px;
color: #FDDB00;
font-weight: bold;
}
.disclaimer {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
.footer_text1 {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
-->
</style>

<style type="text/css">
.footer_text2 {FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A {COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A:visited {COLOR: #333333; TEXT-DECORATION: underline}
A:hover {COLOR: #cccccc; TEXT-DECORATION: none}
A:active {COLOR: #333333; TEXT-DECORATION: underline}
A:link {COLOR: #333333; TEXT-DECORATION: underline}
</style>


This my style tags. I have bunch of links on the page. Now it possible that links could be in different colors and also visted and hover links could be different. When I put class .footer_text2 , it over writes everything that I hade before and all my links get style accorrding to footer_text

FF won't link to my css file
my html code: (just head content)
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Plastitrade</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="plastitrade.css" type="text/css" />
</head>

IE picks it up?
the css works if i put it in the html file?

anyone encountered a prob like this?
its irritating as i can't really test my pages locally now
btw this is the first time i've encountered this prob

cheers
Shem

Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.)

In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally.

Right now I've got

Code:

.leftnavtext A:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext A:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: underline;
}
.leftnavtext A:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}

And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks.

I'm trying to get my link area to display so that the user can move over the area surrounding the link as opposed to the link text itself, but I can't seem to get it to work properly. I thought I could just set the padding and that would take care of it.

Code:

<div id="navBar">
    <h4>Interface Links</h4>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
</div>

Code:

#navBar
{
	position:absolute;
	top:3em;
	right:0;
	width:15%;
	margin:0;
	padding:0;
	background-color:#CCCCFF;
	font-size:1em;
	border-left:2px solid #666699;
}
#navBar h4
{
	padding:0;
	margin:0;
	background-color:#666699;
	border-top:2px solid #666699;
	font-size:.90em;
	text-transform: lowercase;
	color:#FFFFCC;
}
#navBar a
{
	display:block;
   text-decoration:none;
	padding: 8px 0px 2px 10px;
}
#navBar a:hover
{
    background-color:#9999CC;
}

if you see on http://www.ipan.be/dev/index.php?page=about
in FF it is nice but in IE it put borders around some links of my class inhoudstafel...

Does anyone know a solution?

I just wanted to know is it possible using css to add a link to a background image in a table or cell?

if so how would you do that?

CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing

Code:

/* links for navAlpha menu */	
#navAlpha a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navAlpha A:link {
	COLOR: white; 
}
#navAlpha A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

/* links for navAlpha menu */		
#navBeta a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navBeta A:link {
	COLOR: white; 
}
#navBeta A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

Sorry for such a simple problem - I have been doing this for several years and am having a senior day!
My css works fine in firefox, but after you click on a link once in ie, it no longer shows the color-switch when I hover. The text is supposed to be white with a grey hoover, then white again. After the link is accessed, it will not show the grey on hoover.

.topnav:link { COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800}
.topnav:hover { COLOR: #c0c0c0; TEXT-DECORATION: none; font-weight: 800}
.topnav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800}

If I leave the "visited" out, it leaves the link black after a visit