Here is a display problem I have seen regularly. When a picture is narrow, some text is displayed at the bottom next to the picture.
The text really should be above the picture.
How can this be fixed? Is this a bug?
Thanks, Robert
The text really should be above the picture.
How can this be fixed? Is this a bug?
Thanks, Robert
Is this a LIFT or XHTML source?
Tweaking the Styles may be able to fix this. If you can send that entry in the format you are using, I can look to see what may fix it.
I am using XHTML. What is curious is that in FLEx it looks better:
Here the text is not aligned at the bottom but flows naturally at the top. I wonder where this has to be fixed since it looks right in FLEx.
Where would I tweak the styles?
Adjusting styles in DAB can most likely fix it. But I’d need a copy of the XHTML and CSS (at least of that entry) to see how it could be done.
See the link I sent.
The way it shows in DAB is the default way HTML handles a picture following words.
The Et. < Arabic is not directly related to the image, so can it be on the next line? Any image placement will always affect all images. So doing something in relation to the specific Etymology reference is not wise, unless it is okay for all entries.
My suggestion is to modify the ProjectDictionaryOverrrides.css
Add this CSS line:
.pictures {display:block;}
By setting that each picture will appear below the text.
If the file is in your Flex export then just in DAB go to the Lexicon section on the left and then choose Update from Source.
If the file was in your Flex projects somewhere under C:\ProgramData\SIL\FieldWorks\Projects\projectname\ConfigurationSettings\Dictionary\ProjectDictionaryOverrides.css
Then re-export your XHTML and do the step above.
Thanks. Another question. When there are two images, how can I make them both centred or left aligned?
This is all straightforward with a bit of HTML and CSS understanding.
In your file it is not laid out like this as it would mess up the formatting, but I have laid it out so text it is easier to read.
<span class="pictures">
<div class="picture">
<img class="thumbnail" src="pictures\Tamarix senegalensis 1.jpg" id="g28174a16-fb60-49f1-aed3-7725f581b4d5"/>
</div>
<div class="picture">
<img class="thumbnail" src="pictures\Tamarix senegalensis 3.jpg" id="gc7d75020-2e17-4fa4-a71a-f477c5f0fc85"/>
</div>
</span>
We changed pictures so it is paragraph like.
We could also add: margin:auto; to our css.
If that is not working then you could try: text-align:center;
I thought of adding that in my last reply but kept it to the point.
Sorry, I only have a rudimentary understanding of HTML and CSS.
I would need more step by step instructions to figure out how I can modify things. Could you point me to where I need to do this, in DAB or on my laptop.
Ian
How can I get two pictures in the same entry either line up on the left or have both centred?
This screen shot shows that the second image is always indented:
You would do best to get a reply from Ian McQuay, but I will hazard a guess about what is going on there. It looks like the paragraph style has been established as hanging indentation, and that is why the second picture is indented more than the first one.
For the class .pictures we need to add two things. The one mentioned above.
display:block;
And also text-align:center;
I tested margin:auto; but it did not work.
Thanks. I did this now, but I wonder what controls the placement of the second picture in relation to the first. The second one still seems to be indented further. What controls this:?
That was a bit of a chore.
edit the style
Find the style .entry> .pictures> div+ div:before
Edit the style. Then choose CSS and delete the line highlighted. It is adding a space.
The space is added to separate two pictures in a row. But as they are in a div that should never happen.
It is coming out of the Flex configuration. for pictures. It only affects the second and following images, but not the first.
