Tags duplicating on their own

@uBetchaFeb 24.2012

I’ve encountered what to me seems a strange HTML quirk problem (though I’m very amateur so may not be a quirk at all).

I recently used a free online tool to create the code for an image map linking to my social networking sights. It can be seen on the right hand side of my pages: ~~[URL=”http://www.zorandesigns.com”]~~www.zorandesigns.com[/URL]

What keeps happening now is every time I go to edit pages, the <area></area> tags keep duplicating exponentially. So any time I do any editing I have to make sure I redelete the duplicates. Even when I do when I resave 3 new tags will appear again. Next time I go to edit there are 6 tags and if I forget to delete them there will be 12 next time, then 24 and so on. At first I didn’t realize this was happening and I had hundreds of duplicate area tags.

I use go daddy html file editor to edit the pages. The section of troublesome code is below. Would appreciate any insight on how to resolve this problem as simply deleting the extra tags clearly hasn’t worked.

to post a comment

HTML

8 Comments(s) _↴

@TheAliveWinnerFeb 25.2012 — #It's STRANGE, isn't it? :p

[COLOR="DarkRed"]First things first, as [I]HTML [/I]is a static language, so [I]it can not generate tags[/I] by itself.

Also, I see that these self generated tags are non-volatile i.e. they remain even afterwards and keep on replicating themselves.

[B]This is not possible via any Server-side language or Client-side scripting or whatever they say![/B]

[U]So, I guess it must be the EDITOR that is creating the "problem".[/U][/COLOR]

[COLOR="Red"]You should try a simple text editor viz. Notepad, dear![/COLOR]

@spufiFeb 25.2012 — #

1. Stop using a crappy tool.

2. I don't think an image map is really needed here as regular links would work.

3. There is code outside of the image map that needs reworking. Here's just some samples.

<i>
 </i>&lt;p align="justify"&gt;&lt;b&gt;&lt;span style="font-size: large;"&gt;Now open at our new address&lt;/span&gt;&lt;/b&gt;&lt;b&gt;&lt;span style="font-size: large;"&gt;! &lt;/span&gt;&lt;span style="font-size: large;"&gt;&lt;a target="_self" href="contact.html" title="Contact Hamilton Ancaster Burlington Jewellers"&gt;CLICK HERE FOR DETAILS&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;

Any styling can be moved in with the rest of the external CSS. You could make it....

<i>
 </i>&lt;p id="newaddress"&gt;
 Now open at our new address! Click &lt;a target="_self" href="contact.html" title="Contact Hamilton Ancaster Burlington Jewellers"&gt;here&lt;/a&gt;  for details.
 &lt;/p&gt;

<i>
 </i>&lt;link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" type="text/css" rel="stylesheet" /&gt;
 &lt;style type="text/css"&gt;&lt;/style&gt;

This is stuff that goes inside of the <head> tag area. I found it near the bottom of your page inside of the <body> tag.

C.

<i>
 </i>&lt;div class="AccordionPanelContent"&gt;
 &lt;div class="acontent"&gt;
 &lt;p&gt;We offer a full range of jewellery services:&lt;/p&gt;
 &lt;p&gt;REPAIRS, RESTORATION, REDESIGN, REMODELING, CUSTOM DESIGN&lt;/p&gt;
 &lt;p&gt;&lt;a href="services.html"&gt;For more info about our jewellery services please click here.&lt;/a&gt;&lt;/p&gt;
 &lt;p&gt;Other services include:&lt;/p&gt;
 &lt;p&gt;GIFT CERTIFICATES&lt;/p&gt;
 &lt;p&gt;AFTER HOURS APPOINTMENTS&lt;/p&gt;
 &lt;p&gt;&lt;a href="services.html"&gt;For more info about our client services please click here.&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;

I would rework it like this...

EDIT: At first I didn't see the code displayed on the site, but it's part of a drop down menu. Obviously the script would need to be changed, but I would much rather use my version of the markup.

<i>
 </i>&lt;div id="services"&gt;
 &lt;h3&gt;We offer a full range of jewellery services:&lt;/h3&gt;
 &lt;ul&gt;
 &lt;il&gt;Repairs&lt;/li&gt;
 &lt;il&gt;Restoration&lt;/li&gt;
 &lt;il&gt;Redesign&lt;/li&gt;
 &lt;il&gt;Remodeling&lt;/li&gt;
 &lt;il&gt;Custom Design&lt;/li&gt;
 &lt;/ul&gt;
 &lt;h3&gt;Other services include:&lt;/h3&gt;
 &lt;ul&gt;
 &lt;il&gt;Gift Certificates&lt;/li&gt;
 &lt;il&gt;After hours appointments&lt;/li&gt;
 &lt;/ul&gt;
 &lt;p&gt;
 For more info about our client services please click &lt;a href="services.html"&gt;here.&lt;/a&gt;
 &lt;/p&gt;
 &lt;/div&gt;

<i>
 </i>&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;&lt;style type="text/css"&gt;
 
 h1 {
 color: #999;
 }
 h1,h2,h3,h4,h5,h6 {
 font-weight: bold;
 color: #333;
 }
 h2 {
 font-size: 16px;
 color: #333;
 }
 h3 {
 font-size: 16px;
 color: #333;
 }
 h4 {
 font-size: 16px;
 }
 h5 {
 font-size: 16px;
 }
 h6 {
 font-size: 16px;
 }
 .slideshow {
 float: left;
 height: 180px;
 width: 180px;
 margin-top: auto;
 margin-right: 20px;
 margin-bottom: 10px;
 margin-left: auto;
 }
 &lt;/style&gt;

Goes into your external CSS file(s) and is poorly written in the first place as it is repetitive in some places.

<i>
 </i>h1 {
 color: #999;
 }
 h1, h2, h3, h4, h5, h6 {
 font-weight: bold;
 }
 h2, h3, h4, h5, h6 {
 font-size: 16px;
 color: #333;
 }
 .slideshow {
 float: left;
 height: 180px;
 width: 180px;
 margin-top: auto;
 margin-right: 20px;
 margin-bottom: 10px;
 margin-left: auto;
 }

I'm guessing you didn't mean to set h1 at one color and overwrite it in the very next section. Since I used <h3>, you will likely want to change its font size. You really shouldn't have <h2>-<h6> tags being so similar anyway. The bold font weight isn't technically needed since header tags are made bold by default. I just had it there to mimic what I copied.

E.

The Dynamic Drive script code that when I look at from a View Source point of view is one of the biggest waste of white space ever.

@spufiFeb 25.2012 — #After doing all of that, I forgot to rework the asked for code. ?

I use go daddy html file editor to edit the pages.
[/quote]

See previous comment about crappy tools.

<i>
 </i>&lt;ul id="socialmedia"&gt;
 &lt;li&gt;
 &lt;a href="http://www.facebook.com/pages/Zoran-Designs-Jewellery/221643324534776" title="Facebook" target="_blank" alt="Facebook"&gt;(Facebook image code goes here)&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="http://twitter.com/ZoranDesigns" title="Twitter" target="_blank" alt="Twitter"&gt;(Twitter image code goes here)&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="http://ca.linkedin.com/pub/maja-kogut/46/89b/929" title="LinkedIn" target="_blank" alt="LinkedIn"&gt;(LinkedIn image code goes here)&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;    <br/>

Use CSS code to make the list look like an inline element and hide any link like visual effects. You obviously need to break up the images but the advantage of an image map here just seems so minimal to not be worth it.

@uBetchaauthorFeb 25.2012 — #Wow, thanks so much!! I fear it might be a bit over my head to do all this but I will try.

You mentioned I'd also have to make changes to my CSS code to make the social media link images "inline". I'm really not familiar with manipulating CSS code, what kind of changes would be required??

@uBetchaauthorFeb 25.2012 — #Also any suggestions for a free or cheap editor I could download?

@TheAliveWinnerFeb 25.2012 — #

[CODE]#socialmedia li{
 list-style: none;
 [COLOR="Red"]		display: inline;	[/COLOR]
 }[/CODE]

You may add this code to style the list as stated by "[I]spufi[/I]".

@spufiFeb 25.2012 — #Wow, thanks so much!! I fear it might be a bit over my head to do all this but I will try.

You mentioned I'd also have to make changes to my CSS code to make the social media link images "inline". I'm really not familiar with manipulating CSS code, what kind of changes would be required??[/QUOTE]

This covers some of the basics.

http://htmldog.com/guides/

This is a solid reference book since it was written by one of the best known CSS gurus.

http://meyerweb.com/eric/books/css-tdg/

Here's a 5 page reference in PDF format. I wouldn't worry about looking at it too much until you get your feet wet a little more as it's nothing but data and would overwhelm some newbies.

http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

@uBetchaauthorMar 02.2012 — #Thanks so much for your help. I have switched to using Kompozer for editing and have eliminated the duplicating tag problem.

I have also addressed some of the issues you noted.

I did leave my social media links as an image map because i'm not comfortable editing css and wasn't sure how much time it would take me to figure it all out. I also didn't get the impression that it is a HUGE disadvantage having them there as an image map instead of individual images with links. Let me know if I'm mistaken in this thinking.

Also in #HTML _↴

Margins How to display link and use it ?web help

Success!

Help @uBetcha spread the word by sharing this article on Twitter...

Tweet This

Tags duplicating on their own

8 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Tags duplicating on their own

8 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #HTML _↴