Date: 11/04/07 (HTML Help)    Keywords: css, web

Hello! I'm somewhat new to image maps, and have copied the basic codes for this layout from someone else. I wanted to add my own header and background to the codes and keep the links, and I wanted the header I made to blend in with the pattern for the background. However when I view my journal, there is a large white border around my header which I don't want. I'm not sure if this has something to do with the image map or not, but could someone please take a look at my codes and tell me where I went wrong? Or perhaps a better set of codes to achieve the desired affect (to get rid of the white border around the header image, so the header and background blend together).  thanks so much!!

Here's a link to my journal, as it looks now:

http://sweetsugarlemon.livejournal.com

And here's a link to the codes I currently have:


FRIENDS_WEBSITE<=
<tr><td colspan="0" width="100%">
<table style="float:left" cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">

<style type="text/css">
<!--
.shadowed td div {
visibility: hidden;
position: absolute;
}
-->
</style>

<IMG SRC="http://farm3.static.flickr.com/2077/1839570718_7d87d0e1cc_o.gif" USEMAP="#navigation" class="headerimg" width="649" height="270" border="0" >
<MAP NAME="navigation">
<AREA SHAPE=RECT COORDS="274,254,325,265" HREF="http://sweetsugarlemon.livejournal.com/profile"> <AREA SHAPE=RECT COORDS="331,254,384,265" HREF="http://sweetsugarlemon.livejournal.com/"> <AREA SHAPE=RECT COORDS="390,254,441,265" HREF="http://sweetsugarlemon.livejournal.com/friends">
</MAP>
</td></tr></table> 
<=FRIENDS_WEBSITE

LASTN_TALK_LINKS<=
<tr>
<td align="right" bgcolor="%%color:weak_back%%" colspan="2" width="100%" class="comments">

%%readlink%% <A HREF="%%urlread%%">READ</A> <a href="%%urlpost%%">COMMENT</a>

</td>
</tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

<title></title>

<style type="text/css">
<!--
body {
  background-image: url("http://i47.photobucket.com/albums/f157/zemeska/antoinetteblue-bright.gif") !important;
  background-attachment: scroll !important;
  background-color:#F3F3F3;
  background-position:center 20px;
  background-repeat:repeat;
  color:#434343;
}

a:link, a:visited, a:active {
  font-family: verdana;
  font-size: 7pt;
  line-height: 14px;
  text-decoration:none;
  font-weight:bold;
  color:#4B4B4B;
}

a:hover {
  text-decoration:none;
  font-family: verdana;
  font-size: 7pt;
  line-height: 14px;
  font-weight:bold;
  color:#4B4B4B;
  background-color:#F1F1F1;
  cursor: default;
}

body, tr {
  letter-spacing:1pt;
  text-align:justify;
  font-size:7pt;
  font-weight:normal;
}

font,td, table {
  font-family: verdana;
  color:#434343;
  font-size: 7pt;
  line-height: 14px;
  letter-spacing:1pt;
  font-weight: none;
  letter-spacing: 0pt;
  overflow-x: hidden;
}

table table table td.meta {
  font-size:7pt;
  font-weight: normal;
  text-align:left;
  text-transform: none;
}

td.caption {
  font-size: 0pt;
  text-align:left;
  text-transform: uppercase;
  background-color:#FFFFFF;
}

p table table td.caption {
  font-family: verdana;
  color:#434343;
  font-size: 7pt;
  line-height: 14px;
  text-transform: uppercase;
  font-weight:bold;
  background-color:#FFFFFF;
}

.index {
  font-family: verdana;
  font-size: 7pt;
  line-height: 14px;
  letter-spacing:1pt;
  color:#FFFFFF;
  background-color:#FFFFFF;
  text-transform: uppercase;
}

.comments {
  font-family: verdana;
  font-size: 7pt;
  line-height: 14px;
  border: 0pt solid #D9D5C7;
  letter-spacing:0pt;
  color:#434343;
  background-color:#FFFFFF;
  text-transform: uppercase;
}

table table table table .meta {
  visibility:hidden;
  position:absolute;
}

table table table table table .meta {
  visibility:visible;position:relative;
}

.index {
  background-color:#FFFFFF;
  color:#FFFFFF;
}

tr.caption{
  visibility:hidden;
  position:absolute;
}

table table tr.caption td.meta{
  visibility:hidden
}

table table tr.caption td.caption{
  visibility:hidden
}

table {
  width: 649px;
  align:center;
  background-color:#FFFFFF;
}

table table {
  width: 100%;
  margin:0;
  background-color:#FFFFFF;
  border-style: solid ;
  border-color: #a3714a;
}
 
table table table {
  width: auto;
}

table table tr.caption td.caption{
  visibility:hidden;
}

.shadowed img{
  visibility:hidden;
  position:absolute;top:0
}

img.headerimg{
  visibility:visible !important;
  position:relative !important
}
-->
</style>

<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<tr>
<td align="right" bgcolor="%%color:weak_back%%" colspan="2" width="100%" class="comments">

%%readlink%% <A HREF="%%urlread%%">READ</A> <a href="%%urlpost%%">COMMENT</a>

</td>
</tr>
<=FRIENDS_TALK_LINKS

LASTN_TALK_READLINK=>%%messagecount%%

LASTN_OPT_ITEMS=>6

LASTN_DATE_FORMAT=><font color="#434343" size="1">%%monshort%% %%dd%% %%yyyy%% / <b>%%12h%%:%%min%%%%ampm%%</b></font>

FRIENDS_TALK_READLINK=>%%messagecount%%

FRIENDS_DATE_FORMAT=><font color="#404040" size="1">%%monshort%% %%dd%% %%yyyy%% / <b>%%12h%%:%%min%%%%ampm%%</b></font>

LASTN_WEBSITE<=
<tr><td colspan="0" width="100%">
<table style="float:left" cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">

<style type="text/css">
<!--
.shadowed td div {
visibility: hidden;
position: absolute;
}
-->
</style>

<IMG SRC="http://farm3.static.flickr.com/2077/1839570718_7d87d0e1cc_o.gif" USEMAP="#navigation" class="headerimg" width="649" height="270" border="0">
<MAP NAME="navigation">
<AREA SHAPE=RECT COORDS="274,254,325,265" HREF="http://sweetsugarlemon.livejournal.com/profile"> <AREA SHAPE=RECT COORDS="331,254,384,265" HREF="http://sweetsugarlemon.livejournal.com/"> <AREA SHAPE=RECT COORDS="390,254,441,265" HREF="http://sweetsugarlemon.livejournal.com/friends">
</MAP>
</td></tr></table> 
<=LASTN_WEBSITE

Source: http://community.livejournal.com/htmlhelp/2422368.html