HTML - Html Email Template- Image Problem

YAY SOLVED THANKS TO COOTHEAD

This thing is driving me nuts... over the last 36 hours i, along with a helpfull member of this community have been trying to fix some SIMPLE code that wasnt broken in the first place.

It displays fine, when tested in Dreamweaver, tests fine in IE, FF.
The several adjusted codes even display fine inside the test previewer of the mail program on www.yourmailinglistprovider.com !

The trouble starts when the email HTML code gets sent to the Gmail & Hotmail inbox.
Both my inbox' are stuffed with test mails.. and it isnt going to end any time soon

I have CODE 2 that wont load up the CSS image tags.

And CODE 1 that wont display the text in its right position, not on top of the image, instead it shows it way down, like so:

http://img196.imageshack.us/img196/2625/frustration.jpg

So finally... i discovered, why.. the Gods have put me in this misfortune.
Google Mail is in BETA, and that means the following:

Quote:
Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email.

For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.
&#^&%$@3(*(2@#*&y#!!............................. Why

Now all my work ive put into this could be all for nothing,..
since I believe the solution given by the website is too far fetched for this amateur. The solution:


Quote:
Here are coding techniques that appear to work well in Google Mail and older email softwa

* Define the background color in a TD cell with bgcolor=, not the CSS style.
* Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images.
* If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work.
* If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
* If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
* If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
* Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
* When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly.
SOURCE


I need either of these two amateuristic codes (they are basically the same) re-coded with the rules up above.
Could anyone who can do this fluently without breaking a sweat help me out?
I am near desperation and willing to transfer a fee to whatever paypal account.
I just need this mail template sent out asap. Thank you for reading.



CODE 1:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container{ 
    width:711px;
    margin:auto;
    font-family:verdana,sans serif;
    font-size:16px;
	
    background-image:url(blokje.png); 
 } 
#pic {
    display:block;
 }
#content {
    padding:0 0 60px 50px;
    background-image:url(onderkantcurve.png);
    background-repeat:no-repeat;
    background-position:0 bottom;
 }
#p-one {
    font-weight:bold;
    color:#410d3e;
 }
#pic-one {
    text-align:center;
 }
#pic-one img {
    width:170px;
    height:190px;
 }
#link {
    font-size:12px;
 }
</style>

</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">



<img id="pic" src="top.png" alt="">

<div id="content">

<p id="p-one">
 Nieuwsbrief februari 2010
</p><p><br>

Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>

<p id="pic-one">
 <img src="koord.jpg" alt=""><br>

<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>

 Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br> 
 Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
 <a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>

</p><p>
 Mocht je geen belangstelling hebben om op de hoogte te blijven van<br> 
 mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>

 Met vriendelijke groet,
</p>

</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>

</body>
</html>

CODE 2:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container{ 
    position:relative;
    width:711px;
    height:910px;
    margin:auto;
    font-family:verdana,sans serif;
    font-size:16px;
 } 
#pic {
    position:absolute;
    top:0;
    left:0;
 }
#content {
    position:absolute;
    top:170px;
    left:50px;
    width:651px;
    height:680px;
 }
#p-one {
    font-weight:bold;
    color:#410d3e;
 }
#pic-one {
    text-align:center;
 }
#pic-one img {
    width:170px;
    height:190px;
 }
#link {
    font-size:12px;
 }
</style>

</head>
<body>

<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>

<div id="container">

<img id="pic" src="big.png" alt="">
<div id="content">
<p id="p-one">
 Nieuwsbrief Februari 2010
</p><p><br>
 Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p>
<p id="pic-one">
 <img src="koord.jpg" alt=""><br>

<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>

 Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br> 
 Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
 <a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>

</p><p>
 Mocht je geen belangstelling hebben om op de hoogte te blijven van<br> 
 mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>

 Met vriendelijke groet,
</p>
</div>

</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>

Thanks for reading..

So I'm working on some "bulk" format emails for my work, and they're just basic HTML designed pages with a few images included in the coding (<img src="www.google.com/image.jpg"></img> ...for example).

My problem is, not necessarily the format or design of the email itself, but rather that every time I send the email out, whether it be gmail, yahoo, hotmail, etc, it prompts the recipient to download the images, either in full, or individually - as if they were attachments to the email itself.

For example (this is what our recipients see when they recieve the email...aside from this, the email looks fine):


The email displays correctly, but why does it prompt the recipient to download the images that are encoded in the message? Or better yet, why do other newsletter/bulk emails that I recieve from other companies NOT prompt me to download the individual images?

What am I missing here? Thanks for the help!

Hello,

I have a problem pulling external vbscript into an html template. I have various .vbs files written in vbscript, in a function library. Each .vbs file contains many functions that do a variety of things. Every function is documented with the following format;
'Function Name
''Purpose
'Date
'Author
etc...
What I need to do is create an html template and populate the template with the formatted documentation only from each of the functions. Unfortunately, this isn't as easy as using src=filename.vbs because I'm trying to access the documentation only....not the script itself.
Does anyone have any ideas?

thanks in advance!

-Ken M

so i need help with this .. what i want to accomplish is have everything with a width of 750px and each item to go after one another .. i thought a table would make that happen but it doesn't seem like it does .. on some previews it shows that it goes straight downward, but i think on larger resolutions it doesn't.

i'm using this for ebay and it's showing up like this



which isn't how i want it to look like. can someone help?

HTML Code:

<body><body bgcolor="#000000">
<table width="750" border="0">
<img src="http://www.advancespeedshop.com/d4auto888/top-header.jpg">
<!-- PRODUCT IMAGE -->
<img src="http://www.advancespeedshop.com/frictiondesigns/easyimg/images/bfi1241809521c.jpg">
<!-- PRODUCT IMAGE -->
<!-- DESCRIPTION -->
<img src="http://www.advancespeedshop.com/frictiondesigns/easyimg/images/opt1241809533e.jpg">
<!-- DESCRIPTION -->
<!-- POLICIES -->
<img src="http://www.advancespeedshop.com/d4auto888/shipping-rates-calculated.jpg">
<img src="http://www.advancespeedshop.com/d4auto888/shipping.jpg">
<img src="http://www.advancespeedshop.com/d4auto888/payment.jpg">
<img src="http://www.advancespeedshop.com/d4auto888/policies.jpg">
<img src="http://www.advancespeedshop.com/d4auto888/returns.jpg">
<img src="http://www.advancespeedshop.com/d4auto888/contact-us.jpg">
<!-- POLICIES -->
</table>
</body>

Can someone please recommend to me a good site(s) where I can get free HTML templates for websites?

http://pixelpatriot.blogspot.com/

Problem #1
The dimensions of the blog image thumbnails are compressed on the x axis with word wrap set to the right side of the image on the main/index page. When you click on the html link that takes you to the full blog page the image is displayed OK. Do you have a suggestion on how to correct the image size displayed in the thumbnail mode?

Problem #2
Video screen on right side bar of main page is cropped so can't see full video. I think it is preventing the viewer from access link to Vimeo site.

Problem #3
Reduce left margin to maybe 10 or 15 pixels

Problem #4
Can the Gallery delay rate be slowed by approx. 1 sec

I tried to embed the code here but it was too long. Can you see the code from the above URL?

i want help to modify a html template,when modified gives error,mail me if anyone is interested i can send you the template.

[b]So I'm modifying my blogger template, but i can't remove this thing:


Could anyone tell me what to delete in my html code to make it disappear???
Website: http://13stairstomikarain.blogspot.c...o-so-sick.html

Hi,
I am not sure if this is the right forum for something like this, but I couldn't find one that would suit it....Moderators feel free to move to the correct forum.

Anyway, I have a question, I was wondering if anyone on here can give me step by step instructions on how to covert a psd template (made in photoshop) to html.

Thanks for any help!

I have to develop a page which have same frame and different content.

Example http://www.dcu.org

My page should have 3 columns where as DCU have 2. The content should look same across all browsers, The page may be used for 10inches to 30inches screens.

What is the strategy to develop such page.

The page must occupy 100% of screen ad should not have scrolebars. What is the strategy to display the content?

I am using Tables but not sure how to make the content adjust according the screen. I am looking to develop a template and can be used to all the content.

Please help me figure out the strategy.

Regards,

Swaroop Kunduru.

please reply....i had made an template using power point and i want to put that template on my html code ...the code is
HTML Code:

<html>

<head>

<style>

</style>

<script type='text/javascript'>

<!--

var clicks = new Array();
clicks['a'] = 0;
clicks['b'] = 0;


function AddClick(choice){ 
clicks[choice] = clicks[choice] + 1; 
document.getElementById('CountedClicks_' + choice).innerHTML = clicks[choice] + ' votes';
}
// --></script>

</head>

<body>

<H1 align="center"><I>WELCOME 2 U-COMPARE</H1> 
<HR COLOR="RED" SIZE="10" width="50%" NOSHADE>
<img src="ab.jpg" style="margin-left:400px"align="down" alt="Pulpit rock" width="250" height="400"  /> 
<span id="CountedClicks_a">0 vote</span><br>
<button style="background-color:grey"; ; onclick="AddClick('a')">vote</button>
<table cellspacing="15" border="0" cellpadding="0">


<td width="700"></td>
<td width="3" height ="200" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">


</td>
</tr>
</table>
<img src="tiesto.jpg" style="margin-left:400px"align="bottom"  width="250" height="400"  /> 
<span id="CountedClicks_b">0 vote</span><br>
<button style="background-color:grey"valign="top" onclick="AddClick('b')">vote</button>

<!-- begin htmlcommentbox.com -->
 <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
 <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
<table cellspacing="15" border="0" cellpadding="0">


<td width="700"></td>
<td width="3" height ="300" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">


</td>
</tr>
</table>

</body>
</html>

I'm using a BlogSpot template and have made some alterations to it, but I can't figure out how to change the main background. It's currently black. I'm thinking a nice chocolate brown color would better contrast my post background.

What should look for in the html codes?

Thanks in advance for any ideas.

Hi, i've been trying to solve a problem for the last couple of hours and it is driving me mad, I can't find any help anywhere on the web so thought I would give this a whirl!

After placing an image map on my page, I added another image below it, but there is a tiny black vertical gap (black being the bg color) between them.

I have tried changing the location of the <br> tag in the script, have tried aligning and pretty much everything else obvious and I have no idea how to make them touch each other. Any help would be appreciated.

The page can be seen at: http://jask.freehostingcloud.com/contactjask.html

the annoying gap is between the navigation bar and the largest image.

This appears to only be a problem in IE (i'm running version 8 on Vista)

my code (which you can ofcourse view for your selves but i'll save you the time) is -

<body vlink="#ff0000" alink="#ff0000" link="#ff0000" bgcolor="black">
<CENTER>
<br>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90&currency_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" target="-blank">
<img src="http://jask.freehostingcloud.com/jaskgif.gif" width="907" border="0"></a><br>
<img src="http://jask.freehostingcloud.com/gobar.JPG" height="55" border="0" useMap=#purple border=0><MAP name=purple border="0">
<area shape="rect" coords="86,7,210,43" href="http://www.jaskgames.com" alt="Jask!" title="Jask!"/>
<area shape="rect" coords="257,8,381,44" href="http://jask.freehostingcloud.com/aboutjask.html" alt="All about Jask!" title="All about Jask!" />
<area shape="rect" coords="427,9,586,45" href="http://jask.freehostingcloud.com/contactjask.html" alt="Contact us about Jask!" title="Contact us about Jask!" />
<area shape="rect" coords="631,8,806,44" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90&currency_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" alt="Buy your own game!" title="Buy your own game!"/><br>
<TABLE background="http://jask.freehostingcloud.com/mainybar.jpg" valign="top" width="907" height="445" cellpadding="0" cellspacing="0">
<TR><td width="320" valign="top"></td>
<TD valign="top"><br><br>
<font face="arial" color="white"><center>
<form method="post" action="http://www.emailmeform.com/fid.php?formid=706822" enctype="multipart/form-data" accept-charset="UTF-8"><b><font face="arial" color=black></font> <div style="" id="mainmsg"> </div><br><font face="arial" color=black>Your Name: </font><input type="text" name="FieldData0" size="20"><br><br><font face="arial" color=black><b>Your Email Address: </font><input type="text" name="FieldData1" size="20"><br><br></font><textarea name="FieldData2" cols="44" rows="6"></textarea><br><br><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"><br></form>
<b><font face="arial" color=black><b>Thankyou for getting in touch, We will respond to you<br>
shortly. Alternatively, contact us directly by email:<br>
<a href="mailto:info@jaskgames.com">info@jaskgames.com</a>
</b>
</TD></tr>
</TABLE align="left"></map>
</body></html>

Many thanks in advance for any help, i'm totally stuck

Hey guys, please forgive me if this has already been posted but im at a total loss

I'm having major issues with getting a background to fit properly around my html page. I wonder if you can help me.

the code i have is this


style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(http://i488.photobucket.com/albums/rr248/kingofkingspoker/borderbg.png);"
id="homediv" onload="start();" alink="#000000"
link="#000000" vlink="#000000">

I really have no idea how to fit it to the whole screen so it doesn't look like the border around the BG image is cutting half the page up and repeating.

If this cannot be corrected is there a code i can add to it to implement a border around the actual web page in full, as if to say i could remove the background image, have it has standard white but use a code to implement a border that would look fine on all computers.

Plz Help

Hey there, first post on this forum so nice to meet you all..

I have a problem with placing an image that has been image mapped.

Its either, I have the image in the right place but without the image maps, or in the wrong place with the image maps.. headwrecker!

My girlfriends brother persuaded me to box him off a proper band myspace and with the persuasive power of a crate of lager i agreed.. so here is what i have scrapped together...

http://www.myspace.com/thecommitments52 (nb: this is only a test page for myself...)

You see the main image header and the three white tabs: add, message and comment..

I am using a div style to keep the image header where I want it...

Here is a seperate piece of html away from the main piece of html with the image mapped and ready to go:

Quote:
<map name='Map1'>
<area shape='polygon' href='http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=423424063' alt='' title='' coords='543,181 668,145 679,178 553,218' />
<area shape='polygon' href='http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=423424063' alt='' title='' coords='502,252 745,236 747,274 503,287' />
<area shape='polygon' href='http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=423424063' alt='' title='' coords='455,297 694,359 687,395 446,332' />
</map>
<img border='0' usemap='#Map1' src='http://h1.ripway.com/palefountain/png.png' alt='' />
here is the main HTML i insert into the myspace section:

Code:

<style>

{!- make room at bottom of div.profileWidth -!}
div.profileWidth table {margin-bottom:518px !important;}
{! apply banner as bkgd image !}
div.profileWidth{background-image:url(http://h1.ripway.com/palefountain/png.png)!important; background-position:center bottom !important; background-repeat:no-repeat !important;}

{!- reverse -!}
table.rail, .i, .i i.x {display:none;}
</style>



<style>	

body {	
	font-size: 1px; line-height: 1px; font-family: Verdana, Arial, sans-serif; 
	background-color:transparent;
	background-image:url(http://h1.ripway.com/palefountain/newbg.gif );
	background-attachment: fixed;
	background-position: bottom left;
	background-repeat: no-repeat;
	margin-top:10px;
	padding-left: 0px;
	}

p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}	

a, a:link, a:visited {color:ff0000; text-decoration: none;}	

a:hover {color:52f6f5; text-decoration: none}

img {border: none}

br {line-height: 10px;} 

u {text-decoration: none; }

table table table br { line-height:15px; }

* html table table table.latestBlogEntry br { line-height:0; }

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

body>div {margin-left: 10px;}
                                             
table { border:1px solid red;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}  


table table table td {background-color:transparent;margin:0px;padding:0; vertical-align:top ! important;}
* html table table table td {padding: 0 0px 0px 0px;}
 
table table table table {border-width:0px; background-color: transparent; margin:0px; padding:0px; background-image: none;} 
table table table table table{ border-color:ffffff;}

table table table table td {padding:0px 0;margin:0px; }
table table table table table td { padding:0 0px 0 0;}


table table table {	
	margin:0px; 
	max-width: 435px;
	width: 100% !important; 
	padding: 0 12px 14px 12px; 
	}

* html table table table { padding:0;}	

body td table, body div table {margin-top: 0;}	

font {color:386093;font-size:10px}	

a font:hover {color:53f9e1}	

a.navbar:link, a.navbar:visited {color:ff0000}

a.navbar:hover {color:53f9e1}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

.text {color:000000;font-size:11px}

a.text:link, a.text:visited {color:ff0000}

a.text:hover {color:53f9e1}



* html .nametext, * html .whitetext12 { width:298px; }	



.NOTES { content:"firefox hack to make tables not to have a huge gap"; }	
td.text {text-align:left;}    	



.r{}	
body {	
	background-color: 000000;
}         	

table table table {	
  border-width: 1; 
  border-style: solid; 
  border-color: 000000;
  background-color: ffffff;
  filter: alpha(opacity=90); 
  -moz-opacity: 0.90; 
  opacity:0.90; 
  -khtml-opacity:0.90;
}     


table table table table {filter:none !important; opacity:1 !important; }  
   
.r{}   

.contactTable {
	width: 300px !important; 
	height: 150px !important; 
	padding: 0px !important;

	background-image:url(http://h1.ripway.com/palefountain/contact.jpg);

	background-attachment: scroll; 

	background-repeat: no-repeat; 

}	
.contactTable table, table.contactTable td { 	
	padding: 0px !important;
	border: 0px; 
 	
	background-image: none;
}	
.contactTable a img {	
	visibility: hidden; 
	padding: 2px !important;
}	
.contactTable .text {	
	font-size: 17px !important;
}	
.contactTable .text, .contactTable a, .contactTable img {	
	filter: none !important;
}	
.contactTable .whitetext12 {	
	display: none;
}	

  	
.r{}	
                              	
.r{}	
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited, 	
a.searchlinksmall, a.searchlinkSmall:hover, a.searchlinksmall:link, a.searchlinksmall:visited,	
.lightbluetext8, a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited	
{	
  color: 000000;	
  font-size:11;   	
}    	
            	
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited { font-weight:normal;}	

.r{}	
.nametext, .whitetext12, .orangetext15, .btext, .redbtext, 	.blacktext12, table.userProfileURL strong {  
  margin: 0px 0px 0px 0px;  	
  color: 000000;	
  font-size:10; 	
  font-family: Trebuchet MS, sans-serif; 	
  font-weight:bold;	
}   	


.whitetext12 { margin-top:0; }   	

.r{}	

span.blacktext12 {	
	padding-bottom:;
	visibility: visible !important;

	background-repeat: no-repeat;

	font-size: px; 
	text-transform: uppercase;
	letter-spacing: px;
	width: ; 
	height: ; 
	display: block !important;
	background-image:url();
}	

.blacktext12 { text-align:center; margin-top:0px;} 	

.nametext, .whitetext12, .orangetext15, .btext, table.userProfileURL strong {   	

	padding-top: 2; 
	padding-right:2;
	padding-bottom:2;
	padding-left:4;

	border-style: none; 
}	
     	
.nametext {   	
  font-size:10; 	
  font-family: Trebuchet MS, sans-serif; 	
	background-color:transparent;
}        	

.r{}	
.lightbluetext8 { 	
  color: 000000;	
  font-size:10; 	
  font-weight:normal;	
}          	

     	
.r{}  	

.r{}	 
a, a:link, a:visited, a.redlink:link, a.redlink:visited, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {	
  color: ff0000;	
  font-size:10; 	
  font-weight:normal;	
  text-decoration:none;	
}    	

a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {  	

	}    

a:hover, a.redlink:hover, a.navbar:hover,  a.text:hover {	
  color: 53f9e1;	
  font-size:10; 	
  font-weight:normal;	
  text-decoration:underline;	
}         	

a.navbar:hover,  a.text:hover {  	

	}

.NOTES { content:'make font smaller for friends comments box';}	
a.navbar:link, a.navbar:visited, a.navbar:hover, a.text:link, a.text:visited, a.text:hover { font-weight:normal; font-size:9px;}	

*html table table table { height: .01%; }
     
table, td { padding: 0px; }
table table table { height: .01%; width: 100%; padding: 0px; }
table table table table { padding: 0px; }
table table table table table { padding: 0px;}
table table table table table table { padding: 0px;}

td.text td.text table table table td {padding:0px 6px 0px 6px !important; }
* html .contactTable, *html .userProfileURL {width: 300px !important;}

</style>

If someone can just point me in the right direction, or better yet implement the/a code that will keep the banner where i want it plus having the image maps, i would be over the moon as this little thing is really getting on my nerves !haah!

Oh yes, also... Instead of imape mapping I tried to play a sneaky little trick by laying a transparent clickable div layer over the buttons in the image but they change position in every browser and different screen resolutions so no good!

Thank you in advance for any advice...