Web Page Content Locking?

Hello ~

I notice HTML code on a client's web site positions EACH WORD on the page relative to the Left margin and Top margin!(?), effectively making the content impossible to edit.  The page was composed with Xara Web Designer Premium.   Can you identify the how this locking was created (3rd party app) and how to restore editing capability?  Below:
 <div class="xr_txt Normal_text Style11" style="position: absolute; left:296px; top:253px; width:611px; height:10px;font-family:'Georgia';font-feature-settings:'kern','liga' 0,'clig' 0,'calt' 0;">
  <span class="xr_tl Normal_text Style11" style="top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">Beg’n &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 63.51px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">Bark &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 119.83px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">isnt &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 165.12px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">just &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 210px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">another &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 298.03px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">pet &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 336.79px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">sitting &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 408.64px; top: -18.34px;font-family:'Georgia';"><span class="Normal_text Style11" style="font-family:'Georgia';font-weight:bold;">service. &nbsp;</span></span>
  <span class="xr_tl Normal_text Style11" style="left: 493.98px; top: -18.34px;font-family:'Georgia';">&nbsp;&nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 499.95px; top: -18.34px;font-family:'Georgia';">It's &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 533.56px; top: -18.34px;font-family:'Georgia';">all &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 561.05px; top: -18.34px;font-family:'Georgia';">about </span>
  <span class="xr_tl Normal_text Style11" style="top: 4.38px;font-family:'Georgia';">how &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 42.38px; top: 4.38px;font-family:'Georgia';">we &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 72px; top: 4.38px;font-family:'Georgia';">love &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 113.31px; top: 4.38px;font-family:'Georgia';">animals! &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 194.96px; top: 4.38px;font-family:'Georgia';">Our &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 234.75px; top: 4.38px;font-family:'Georgia';">entire &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 292.07px; top: 4.38px;font-family:'Georgia';">staff &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 335.91px; top: 4.38px;font-family:'Georgia';">treats &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 391.51px; top: 4.38px;font-family:'Georgia';">each &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 437.19px; top: 4.38px;font-family:'Georgia';">animal &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 503.57px; top: 4.38px;font-family:'Georgia';">with &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 547.93px; top: 4.38px;font-family:'Georgia';">respect </span>
  <span class="xr_tl Normal_text Style11" style="top: 27.11px;font-family:'Georgia';">and &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 40.6px; top: 27.11px;font-family:'Georgia';">care, &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 90.24px; top: 27.11px;font-family:'Georgia';">in &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 115.14px; top: 27.11px;font-family:'Georgia';">a &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 132.45px; top: 27.11px;font-family:'Georgia';">professional &nbsp;</span>
  <span class="xr_tl Normal_text Style11" style="left: 247.79px; top: 27.11px;font-family:'Georgia';">manner. &nbsp;</span>

Open in new window


Many Thanks!!  ~ Jacob
LVL 2
Chi Is CurrentAsked:
Who is Participating?
 
Julian HansenCommented:
What are your expectations here?

Do you want to remove the absolute positioning so you can edit the resulting HTML file but have it look the same as it was?
Or
Do you just want the plain text without all the <span>'s

To do the former you will need to recode the page. The problem is the page was created by a design tool not an HTML tool - to recreate the page so it is editable you can start by removing all the <span> elements but you will then need to add in classes elements and CSS to fix the styling (bold, font, letter spacing)

Before we go forward with suggesting answers can you let us know what it is you are expecting / wanting.
0
 
Juana VillaFront-end DeveloperCommented:
Hello Chi,

You can use this js to remove all inline styles or you can be specific to what attributes you want to remove

This is how I use that js with your code. , as you can see all the styles were removed.
0
 
Flabio GatesCommented:
had a go...
$(document).ready(function() {
  $("*").each(function() {
    $(this).removeAttr("style");
  });
});

Open in new window

see fiddle
0
 
Chi Is CurrentAuthor Commented:
Thank You Everyone!  When I posted, I did not understand this code was generated by a design application vs an HTML tool.  This explanation provides the reason for each word being positioned relative to the left and top of the page.  Because the entire web site was converted to this format, I see correctly changing the format and editing the HTML code as practical impossibility.  Julian, I appreciate your request to know what I expect from my post; a most helpful (and omitted) point of focus.

Best Regards, Jacob
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.