I'm using FCKEditor.

I cut/paste the following code from DreamWeaver's code view into the Body field of a page content type, having switched to the plain text editor. (This code was originally generated by FireWorks, then cut/paste into DreamWeaver.)

<div>
<img height="790" border="0" width="582" alt="" usemap="#m_flowchart" id="flowchart" src="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/flow-chart.gif" name="flowchart" />
<map id="m_flowchart" name="m_flowchart">

The closing div tag is way below the map arguments.

When I save and view the page, there is a large blank space below the graphic.

This is what I see when I view the rendered source code - notice the extra div w/ styling, added canvas tag, extra styling of the img tag):

<div>
<div style="padding: 0pt; background: transparent url(http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu...) repeat scroll 0% 0%; display: block; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: relative; width: 582px; height: 790px;">
<canvas width="582" height="790" style="border: 0pt none ; padding: 0pt; width: 582px; height: 790px; position: absolute; left: 0pt; top: 0pt;"></canvas>
<img class="maphilighted" style="border: 0pt none ; padding: 0pt; opacity: 0; position: absolute; left: 0pt; top: 0pt;" alt="" usemap="#m_flowchart" id="flowchart" src="swap-rem-space_files/flow-chart.gif" name="flowchart" width="582" border="0" height="790">
<div />
<map id="m_flowchart" name="m_flowchart">

That closing div tag right before the map tag causes the map code to fall below the image and carve out the huge piece of blank page real estate.

Why is this happening and what can I do to prevent it?

Comments

Jorrit’s picture

Jorrit commented
Status: Active » Postponed (maintainer needs more info)

I wouldn't know why FCKeditor introduces the canvas tags. In what browser does this occur?

mastoll’s picture

mastoll commented

Good question. But now I'm more stumped than ever.

The extra code appears in FireFox. It does not appear in IE7.

But, the space does appear in IE7 as well as FireFox.

My goal is to get rid of the big space that appears south of the image-mapped graphic.

Jorrit’s picture

Jorrit commented

Have you checked if it is related to a Firefox extension? Does it happen on multiple PC's with fresh Firefox installations?

mastoll’s picture

mastoll commented

I did a character-for-character comparison of the code at it appears in the plain text editor:

<div><img height="790" border="0" width="582" alt="" usemap="#m_flowchart" id="flowchart" src="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/flow-chart.gif" name="flowchart" /><map id="m_flowchart" name="m_flowchart">
<area alt="" href="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/swap_references.docx" coords="332,768,368,779" shape="rect" />
<area alt="" href="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/swap_references.pdf" coords="291,768,317,779" shape="rect" />
<area alt="" href="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/3.4_swap_student_indoor_audit.docx" coords="181,572,217,583" shape="rect" />

vs. the code in the viewed source of the rendered page of IE7

<div><img height="790" border="0" width="582" name="flowchart" src="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/flow-chart.gif" id="flowchart" usemap="#m_flowchart" alt="" /><map name="m_flowchart" id="m_flowchart"><br />
<area shape="rect" coords="332,768,368,779" href="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/swap_references.docx" alt="" /><br />
<area shape="rect" coords="291,768,317,779" href="http://cals.arizona.edu/arizonawet/teachersupport/sites/cals.arizona.edu.arizonawet.teachersupport/files/swap_references.pdf" alt="" /><br />

I found
tags following every tag. When I remove the
tags, the text following the mapped graphic moves up the page. So, the editor is putting breaks i.e.
tags in. And these are causing the open space south of the graphic.

I went back into the plain text editor and deleted any line breaks, butting one tag up against the next without any space between them. I tried it again, removing line breaks but leaving a single space. In both cases, the
tags reappeared, inserted presumably by the editor.

How do I prevent that?

Jorrit’s picture

Jorrit commented

This sounds like the "Line break converter" filter is active somewhere. Please check the selected input format and the filters for that input format. Also check the tab "Security" in your FCKeditor profile settings.

mastoll’s picture

mastoll commented
Status: Postponed (maintainer needs more info) » Closed (fixed)

Jorit is correct.

In order to prevent the insertion of spurious br tags, I went to administer>Site Configuration>Input Formats, clicked Configure for the Full HTML format, and un-checked the Filter option, "Line Break Converter."

The huge blank space is gone.

Thanks!

sunward’s picture

sunward commented

As an update, I was having a problem with extra code being added when I inserted video code. This caused the entry to show as double videos. I un-checked the "HTML Corrector" in admin>site configuration-> input formats > full html ->configure and the extra code was no longer being entered. It seems Drupal doesn't recognize html 5 code when dealing with video when combined with object tags.