Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Using a Mozilla based browser (FireFox 1.5, Opera, etc)..
Input formats set to "Full HTML" or "no filters"
TinyMCE Profile > Cleanup and Output > Verify HTML = FALSE.. (or it will strip attributes from IMG tag)
Add an image to a block of text...
Format the image using the Image Properties button in TinyMCE or directly in HTML to add space around the image...
The desired spacing shows correctly in the TinyMCE rich-text editor window, but not in Preview or Final submitted page.
Hspace and Vspace attributes are correct in generated HTML page source code...
Spacing displays correctly in IE6 browser....
Spacing displays correctly in ALL browsers with a different theme...
Original discussion at http://drupal.org/node/67097#comment-165152
Comments
Comment #1
mauryg commentedMore information...it appears that this problem with Firefox 1.5, and also with Opera 9, also occurs with themes other than Meta. I have now confirmed the problem with Fancy, Chameleon and MCVS4 light. I checked the body text and the "hspace" and "vspace" parameters are present in the HTML code. IE6 performs perfectly as expected.
I will repost this issue to a more appropriate area.
Comment #2
mauryg commentedProblem solved. Instead of using "hspace" and "vspage" to put a little room around my images, I used a "style" statement in TinyMCE and set padding="5px 10px 5px 0px". ("margin" works equally well) That provided the desired spacing for the image and works in both IE6 and Mozilla browsers. If I get ambitious, I may hack the CSS code to provide an image class with preset padding.
Comment #3
shock-j commentedHow can you consider this closed? This issue is not resolved, a work around has simply been found, and not a very good one. Of course replacing img attributes with style attributes will work, but what about for people who don't know HTML? If you're building a site where the the users who contribute content don't know HTML, i.e., writers, editors, reporters, this "solution" is useless. They are not going to know how to add style attributes to HTML. This work around is only useful if only developers are adding content to the site. WE NEED THE PROBLEM FIXED, NOT WORKED AROUND.
Comment #4
smithaa02 commentedThe problem is a number of drupal templates set the img margin with CSS and as soon as this is done once, hspace won't work in firefox.
The best fix IMO is to find the css that resets the margin:
eg in my template:
* {
margin: 0; /* zero out everything ! be aware of remembering this rule */
padding: 0;
}
and replace it with:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0px;
padding:0px;
}
...worked for me.
Comment #5
kudzaidotnet commentedI used smithaa02's suggestion which worked great for me too. I'm wondering if you can explain the solution, as I wanted to understand how it works... in case I need to know for future/similar scenarios. Thanks.
Comment #6
ousjah1 commentedIf you are using FCKeditor and still having the same issue, simply uninstall it and then install the CKeditor module ( http://drupal.org/project/ckeditor)
It's working fine for me and I have no more Vspace and Hspce issues.
Good Luck!
Comment #7
ousjah1 commentedIf you are using FCKeditor and still having the same issue, simply uninstall it and then install the CKeditor module ( http://drupal.org/project/ckeditor)
It's working fine for me and I have no more Vspace and Hspce issues.
Good Luck!