blog documentation FAQ followers forum marketplace services youtube

solved TinyMce Image Margin Not Showing in Firefox

The Jamroom Network » Forum » Design and Skin Customization » Page » TinyMce Image Margin Not Showing in Firefox
derrickhand300
@derrickhand300
7 years ago
1,353 posts
Ive noticed for a long time now that when i upload an image using tinymce/sitebuilder and set the size (320px) (float left) then set the margin to 10 px...it works fine in Chrome but there is no margin applied in Firefox
Has not been a huge issue- just wondering if there is a fix?
Thanks- and Merry Christmas!
Curtis
updated by @derrickhand300: 04/05/18 11:51:12AM
michael
@michael
7 years ago
7,714 posts
Got a URL to see it happening?

--edit--
Because I think its an !important on a different CSS target thats causing it.
updated by @michael: 12/17/17 04:25:23PM
michael
@michael
7 years ago
7,714 posts
It looks to me like the caption javascript is removing the margin from around the image.

Suggest trying adding
p figure {
 margin: 10px
}
to your CSS to fix the issue.
after_javascript.jpg
after_javascript.jpg  •  62KB

margin_0.jpg
margin_0.jpg  •  180KB

p_figure.jpg
p_figure.jpg  •  127KB

before_javascript.jpg
before_javascript.jpg  •  69KB

derrickhand300
@derrickhand300
7 years ago
1,353 posts
Thank you- i will try
derrickhand300
@derrickhand300
7 years ago
1,353 posts
I tried adding it to my custom stylesheet that overrides everything but it made no difference...but thanks
michael
@michael
7 years ago
7,714 posts
try with !important
p figure {
 margin: 10px !important;
}
Might not make a difference because the javascript is putting its CSS directly on the image element in a style="". Are there settings you can adjust for that javascript?
updated by @michael: 12/18/17 07:37:58PM
derrickhand300
@derrickhand300
7 years ago
1,353 posts
Thanks Michael- here is what I have in the meta.tpl
	<style>
		.captionjs, .captionjs figcaption {
			margin: 0 0 20px;
			padding: 0;
      
		}
		.captionjs figcaption {
			font-size: 10px;
			line-height: 1.5;
			padding: 10px 15px;
			border: 1px solid #ddd;
			border-top: none;
			background-color: #eee;
       
		}
		.captionjs.stacked figcaption {
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
		}
		.captionjs.animated figcaption {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
             
		}
		.captionjs.hide figcaption {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
		}
		.captionjs.default a {
			color: #000;
		}

	</style>
michael
@michael
7 years ago
7,714 posts
and thats not working?

try adding
.captionjs p figure {
 margin: 10px !important;
}
at the bottom.
lornawebber
@lornawebber
7 years ago
334 posts
I'll be watching this discussion because the margin thing has never worked for us. I use Firefox - I'll have to check on other browsers.
michael
@michael
7 years ago
7,714 posts
It will be specific to your skins CSS if its not working @lornawebber. The reason it was not working on @derrickhand300's site is that he has a custom image display script that adds captions to his images and that was interfering.

For you the solution will be different. Where is an image that has been added using this method, I'll see what the issue is.
derrickhand300
@derrickhand300
6 years ago
1,353 posts
Thanks Michael
Hope you and family had a great holiday! Im just checking in....Ive tried this but still no fix..
Thanks for the help!
brian
@brian
6 years ago
10,148 posts
You could try:

figure.captionjs {
    padding: 10px !important;
}

The root cause is the custom caption module you're running works differently on FF than it does Chrome.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
6 years ago
1,353 posts
THANKS!
That fixed it :)

Tags