• Locked
1 reply [Last post]
Sat, 2018-01-27 15:22
aroaneios
aroaneios's picture
Offline
newbie
Last seen: 5 years 17 weeks ago
Timezone: GMT+2
Joined: 2018-01-27
Posts: 1
Points: 2

I do know good HTML, but not good CSS and not at all javascript, so I need some help with this question please. I have a wordpress site that uses math equations together with WP Quick Latex plugin for rendering the math from latex. It seems that before and after latex equation, template adds a line. I attach a link which display the problem.
https://tassosdimou.gr/sujet_17/
What do I need to do so, that the equations are inline text?

Top
Tags:
Sat, 2018-01-27 21:31
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Image wrapped in div element

The DIV element is a block element by default, so it and its content exist in their own space.

See html:

<div class="et_social_media_wrapper ql-img-inline-formula quicklatex-auto-format">
  <img class="ql-img-inline-formula quicklatex-auto-format"
	  src="https://tassosdimou.gr/wp-content/ql-cache/quicklatex.com-5a1ac100fe945f372aea6ee9b4d85f99_l3.svg"
	  alt="f(x)=\sqrt{x^2+1}-x"
	  title="Rendered by QuickLaTeX.com"
	  style="vertical-align: -6px;"
	  width="168"
	  height="27">
</div>

I see two immediate solutions to your issue: First, remove the DIV tags and place your IMG element/s/ within the P element where they belong, e.g. 

<p> Δίνεται η συνάρτηση <img class="ql-img-inline-formula quicklatex-auto-format"
	src="https://tassosdimou.gr/wp-content/ql-cache/quicklatex.com-5a1ac100fe945f372aea6ee9b4d85f99_l3.svg"
	alt="f(x)=\sqrt{x^2+1}-x"
	title="Rendered by QuickLaTeX.com"
	style="vertical-align: -6px;"
	width="168"
	height="27">... <img ...> </p>

Or, edit the stylesheet, e.g.
.et_social_media_wrapper {
  display: inline;  /* added rule */
  overflow: hidden;
  position: relative;
}

Your best solution is probably to contact the vendor and see if he has a mod that will allow you to flag each instance to be block or inline.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked