CSS - Converting Embedded Css To Inline Css For Mail()?

Hi all. I am in the process of re-coding some beautiful email templates that were pure CSS layouts into nasty HTML nested tables so our clients can still see our newsletter when viewing them in Web based email browsers like Yahoo, GMail, etc. (since these often strip out our CSS sections)

Typically we would define our link styles in CSS using something like: PHP Code:
 a, a:link, a:visited {
        color: #BF28B2;
        text-decoration: none;
        font-weight: bold;
} 



I just realized I am not sure how to represent the same style when using inline styles such as <span style='...'>text</span>. Just what can I do to modify the link styles using inline styles?

Thanks

basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE.

also for testing i made a link tool tip and it works in IE but its cropped horribly.

you can check it out by looking he

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504

heres the style classes:

Code:

a span 
{
   display: none;
}

a:hover span 
{
  position: absolute;
  display: block;
  background: grey;
  border: 1px solid black;
}

a:hover 
{
   color: 000000;
   background-color: grey;
   text-decoration: none;
   font-size:16;
}

heres the div placement:

Code:

<div class="aim">
<a>
<img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif">
<span>allaimnamesRused</span></a>
</div>

by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them

Hi can anyone tell me if I can override embedded CSS with a linked stylesheet?

Here is what I want to change:
Code:

<col width="40%" style="background-color:#EEEEEE;text-align:left;">

I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet.

So I have an ad that is being served via an IFRAME. The src of the iframe has a few places where I can change colors as the css is dynamic based on the query string. There is one css element that is not supported with the user option to change the color and I want to try and override it.

Obviously inline styles override embedded styles, but the element I need to override is

span.price { color:#990000; }

and that is within the source of the iframe. Is there a way to override this?

First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.).

At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS.

I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this:

When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved.

Here's the CSS:

Code:

<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}

#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->

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

And then the page code:

Code:

<body>

<div id="outerWrapper">
<div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div>
<div id="topNavigation">
<div align="center">Nav </div>
</div>
<div id="contentWrapper">
<div id="rightColumn1"><h2>H2 rightColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
</div>
<div id="content"><h1>H1 Main Content</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
<br class="clearFloat" />
</div>
</div>
<div id="footer">Footer</div>
</div>

</body>

--------

Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par.

Any help on this issue is greatly appreciated.

I've been trying for the last 2 days to position windows media player in FireFox.

Here is the link: www.binaryshopper.com/test.php

Does anyone know how to place a video correctly in FF? I asked a similar question here, but apparently no one here knows how to place a video using CSS.

Ok, well I have a simple flash movie embedded into my html like this:

PHP Code:
 object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="199">
<param name="movie" value="images/welcome.swf">
<param name="quality" value="high">
<embed src="images/welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="199"></embed></object> 






And I wish to add this style to it but Im not sure how ?? :

PHP Code:
 img.right { border: 0.06em solid #FF66CC; 
            border-right: 0em solid #FF66CC; 
            border-bottom: 0em solid #FF66CC;
} 





Thanks for your time.

Hello all,

I'm a relative newbie with css, so any help is greatly appreciated. I am trying to come up with some xhtml/css that can appropriately display several images and text inside of an unordered list. For example, say I have this:

Code:

<ul>
  <li>TEXT<img />TEXT<img /><a>LINK</a></li>
</ul>

I am trying to come up with a way that the text inside the <li> tag always is displayed at the same level as the top of the text, if that makes sense. Also, I'd like the list element to be of uniform height and width. Finally, I'd like the second image and link to be all the way to the right of the list element. Here's what I've got so far:

Code:

<ul style="vertical-align: top; list-style: none;">
  <li id="li_1" style="list-style:none;">
    <span style="width:150px; vertical-align:text-top;">1.) 
      <img src="/images/document.png" height="40px"/>TEXT
    </span><span style="float:right">
      <img src="/images/close.png" height="40px" />
      <a href="#" onclick="return false;">[Edit]</a>
    </span>
  </li>
</ul>

Simply put, this currently looks like crap. Any suggestions? Thanks in advance.

Like it says, can you make an embedded video like a YouTube one fit to a certain shape you have on a site? Because I am wanting one shaped like a spider pic I have on a profile of mine on a site.

I'm building a cms system, and want to implement a template designer. I'm after a wysiwyg app that can be embedded into a php application that can present a colour chart to the user, and when they click on a colour it generates a hex code. If possible i'd like it to be able to be implemented into a form.
anyone ever heard of such a program? anyone even know what this type of program would be called?
Thanks!

Hi,

Not sure if I'm posting in the right area, but here goes.

I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way.

I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both.

In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text.

It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as :

#LeftPanel {
position:absolute;
top: 105px;
left: 5px;
width: 190px;
height: 400px;
border: 1px solid #000033
}

is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context.

Anyone any ideas what the problem is?

Thanks a lot,
J.

Hi,

I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes.

www.binaryshopper.com

The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong!

I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!!

Can someone please help me here before I start shooting Firefox developers?

Hello, as im waiting for a reply to one previous thread today, i though i would also write this one too, as i REALLY need help. With the html page below, how "would" i make this all STRICT css and still have it look exactly the same.

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin-top: 0px;
}
.menuBlue {
	FONT-SIZE: 11px; COLOR: #3c2c7c; FONT-FAMILY: Verdana, Helvetica, sans-serif
}
.menuBlue A {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:visited {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:hover {
	COLOR: #99091c; TEXT-DECORATION: none
}

-->
</style></head>

<body onload="MM_preloadImages('images/Home_On.gif','images/About_On.gif','images/Search_On.gif','images/ContactUs_On.gif')">
<table width="407" height="91" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="70" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/Home_On.gif',1)"><img src="images/Home_Off.gif" alt="Homepage" name="home" width="70" height="18" border="0" id="home" /></a></td>
    <td width="134" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_On.gif',1)"><img src="images/About_Off.gif" alt="About RE/MAX" name="about" width="134" height="18" border="0" id="about" /></a></td>
    <td width="86" height="18"><DIV id=divSearch onmouseover="MM_showHideLayers('divSearch','','show')"
style="Z-INDEX: 6; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 18px; HEIGHT: 95px" onmouseout="MM_showHideLayers('divSearch','','hide')">
        <table id="Table10" cellspacing="0" cellpadding="0" width="200" border="0">
          <tbody>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="200" border="0" /></td>
            </tr>
            <tr>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="1" border="0" /></td>
              <td><table id="Table11" cellspacing="0" cellpadding="0" width="198" border="0">
                  <tbody>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            src="images/Spacer.gif" width="1" border="0" /></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td width="18"><img height="1" alt="" src="images/Spacer.gif" 
            width="10" border="0" /><img height="14" alt="" 
            src="images/ArrowRight.gif" width="8" border="0" /></td>
                      <td class="menuBlue" width="180">&nbsp;<a 
            href="#">Properties</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Land</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Commercial</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Office and Agents</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Franchise Opportunities</a></td>
                    </tr>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            hspace="0" src="images/Spacer.gif" width="1" 
      border="0" /></td>
                    </tr>
                  </tbody>
              </table></td>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" 
      src="images/Spacer.gif" width="1" border="0" /></td>
            </tr>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" 
      src="images/Spacer.gif" width="200" 
border="0" /></td>
            </tr>
          </tbody>
        </table>
      </DIV>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','images/Search_On.gif',1)"><img src="images/Search_Off.gif" alt="Search" name="search" width="86" height="18" border="0" id="search" onmouseover="MM_showHideLayers('divSearch','','show')" onmouseout="MM_showHideLayers('divSearch','','hide')" /></a></td>
    <td width="117" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/ContactUs_On.gif',1)"><img src="images/ContactUs_Off.gif" alt="Contact Us" name="contact" width="117" height="18" border="0" id="contact" /></a></td>
  </tr>
  <tr>
    <td height="73">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!

I'm making a page in which three elements are embedded:

The first is a weather.com "current weather" widget, which is as follows:

Code:

<script type="text/javascript" src="http://voap.weather.com/weather/oap/USVA0023?template=TRVLV&par=3000000007&unit=0&key=twciweatherwidget"></script>

It always aligns left, despite the div it's in having text-align: right set. How can I get it to center?

The other two are iframes, like so:

Code:

<iframe src="http://www.g4ilo.com/wwv/webprop.php?format=small" width="180px" height="268px" frameborder="0"></iframe>

They work fine, but don't validate (using 4.01 Strict). What is a way to get the same content in a valid block that I can style and place as I wish?

EDIT: Now that I look at it, this probably would fit better in the HTML forums. My apologies.