I need to change content on my employer's website, but need to do it without the content being changed by the styles. I've done several searches online and attempted quite a few procedures I've seen posted on various sites, but none have worked. The styles for the top left sidebar create the arrow image next to all links. I need to add content to this sidebar only without the addition of the arrow.

Here is the code for the sidebar:

<div class="sidebar">
     <div class="sidebaritem">
        <!-- rounded corners - top **** -->
        <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
        <h1>useful information</h1>
        <!-- **** INSERT NEWS ITEMS HERE **** -->
 <h2>July 2008</h2>
        <p>This is where you find our latest news.</p>
        <p><a href="news.html">read more ...</a></p>
        <p></p>
  <h2>June 2008</h2>
        <p>This is where you can find earlier announcements.</p>
        <p><a href="news2.html">read more ...</a></p>
        <!-- rounded corners - bottom **** -->
        <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
      </div>

Here is the code for the styles:

/* sidebars */
.sidebar
{ float: left;
  width: 194px;
  padding: 16px 15px 15px 15px;
}
/* sidebar items / links */
.sidebaritem
{ text-align: left;
  width: 194px;
  float: left;
  margin: 0px 0px 11px 0px;
  padding: 0px 0px 0px 0px;
}
.sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px 10px 0px 10px}
.sidebaritem h1
{ font-weight: normal; padding: 8px 0px 16px 0px;
  text-transform: uppercase;
}
.sidebaritem p
{ line-height: 16px; 
  padding: 0px 0px 8px 0px;
}
.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 14px;
  text-decoration: none;
}
.sbilinks ul{margin: 0px 0px 18px 10px;}
.sbilinks li
{ list-style: none; 
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 5px 0px;
}
.sbilinks li a, .sbilinks li a:hover
{ height: 16px;
  text-decoration: none; 
  width: 149px;
}

And the code for the styles color:

.sidebaritem
{ background: #E1E5D5;
  color: #555;
} 
.sbilinks li a, .sidebaritem a
{ background: transparent url(arrow.png) no-repeat left center;
  color: #555;
} 
.sbilinks li a:hover, .sidebaritem a:hover
{ background: transparent url(arrow_select.png) no-repeat left center;
  color: #555;
}

I'm embedding a weather module in place of the internal news links, and possibly a local news feed if it will look good. Needless to say, I don't want the arrow images to be added to the links for the module and the feed. I've tried several different ways, but each time the arrows get added.

Any suggestions?

There must be something else causing the arrows, nothing in the code you've posted would create or embed them.

Have you got a url ?

Sorry about that. Knew I forgot something.

I took the weather module out of the page I was testing it on, but the site url is:

www.drjohnlehman.com


I want to replace the content in the top left sidebar witht he weather module and local news feed if possible. When I had the javascript for the weather module the arrow.png image was added to each link within the module itself.

This is the code for the weather module, if you need that as well:

<div id="wx_module_634">
   <a href="http://www.weather.com/weather/local/75080">Richardson Weather Forecast, TX (75080)</a>
</div>
<script type="text/javascript">
 
   /* Locations can be edited manually by updating 'wx_locID' below.  Please also update */
   /* the location name and link in the above div (wx_module) to reflect any changes made. */
   var wx_locID = '75080';
 
   /* If you are editing locations manually and are adding multiple modules to one page, each */
   /* module must have a unique div id.  Please append a unique # to the div above, as well */
   /* as the one referenced just below.  If you use the builder to create individual modules */
   /* you will not need to edit these parameters. */
 
   var wx_targetDiv = 'wx_module_634';
 
   /* Please do not change the configuration value [wx_config] manually - your module */
   /* will no longer function if you do.  If at any time you wish to modify this */
   /* configuration please use the graphical configuration tool found at */
   /* https://registration.weather.com/ursa/wow/step2 */
   var wx_config='SZ=180x150*WX=FHW*LNK=SSNL*UNT=F*BGI=fall*MAP=null|null*DN=drjohnlehman.com*TIER=0*PID=1071814784*MD5=a4715f70eedc18d59c89fa81ab472b6b';
 
   document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');
</script>

Thanks again!

Ok the arrows are coming from this code:

.sbilinks li a, .sidebaritem a {color.css (line 52)
background:transparent url(arrow.png) no-repeat scroll left center;
color:#555555;

So, the simplest way to remove them for the new entries where you don't want them is to create a class for those links that specifies no background:
background: none; - is all you need.