Why is first OL LI shown at END of text when using chrome?

Rene Severens · Post by **Rene Severens** » Wed May 17, 2017 4:24 am

Hi,

(Start of a long story)

I cannot figure out why the first LI of an OL using a dropdown results OK in EDGE and IE and is wrong in Chrome:

Edge and IE output.jpg

versus

Chrome output.jpg

Note the position of the "1." .
I have added the orange border to visualize the area used by the DIV that contains the text (mostly removed for obvious reason) above.
The part to the right is also a DIV. The list with the dropdowns is inside a DIV that also contains the DIV with the text so there appears no white area between these 2 DIVs.

The source code looks like this:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="24" MadCap:lastHeight="29305" MadCap:lastWidth="612">
<head>
....
</head>
<body>
<div class="Page">
<h1>title</h1>
<div class="Top">
<div class="Selection">
<table ...
<th class="TableStyle-WebHelp_TableStyleNoBorder-HeadD-Column1-Header1" colspan="2">
<p colspan="2">Yo.. ...........<br />------------------------------------------------------------</p>
</th>
...
</table>
</div>
<div class="Intro">
<p>Follow this procedure ....
<MadCap:snippetBlock src="../../../../../Resources/Snippets/Notes/WSsnippet_Note_SeeRequirements.flsnp" />
</div> 
<MadCap:snippetBlock src="../../../../../Resources/Snippets/OWSMaster_ApplicationActions.flsnp" />
</div> 
<div class="Question">
<p>Continue with the <a href="../../../Client/Client.htm">Client</a> installation.</p>
</div>
</div> 
</body>
</html>

Note the already added " " line. However this only works if the text is shorter than the length of the table to the right. In case the text is longer than the table, the numbered list with the dropdowns will occur underneath the table in stead of underneath the text, which is not wanted. So I defined a height of 300px for the div that contains the table to force the list to appear underneath the text.
This line is needed in combination with the added line "<br />------------------------------------------------------------</p>" in which the number of used "----" determines the width of the table so the table is always shown with the same width even id the text inside the table records are short, because that would result in a smaller table and that would cause the list with dropdowns to start between the text and the table, what is also not wanted.

The styles used:

div.Intro
{
float: left;
width: 65%;
border: solid 1px #ff0000;
}
div.Page
{
margin: 0 auto;
width: 100%;
}

div.Selection
{
float: right;
width: 35%;
border-bottom: solid 1px #e37222;
border-bottom-left-radius: 9px;
border-left: solid 1px #e37222;
min-height: 300px;
}

div.Question
{
clear: both;
}

div.Top
{
overflow: hidden;
width: 100%;
}

and finally (for the long story to end and thanks for staying with me), the reason for this design:
This source code and style is used to create webpages which have a fixed width of 960px. If shown in an wider view this view can be resized to make the view smaller, BUT then a horizontal scrollbar will show in case the view becomes smaller than 960px. There will be no DIV's than would be repositioned of starting to overlap each other, obscuring instructions to the reader. This is required because the instructions contain paths and the paths must always be visible in full.

I hope someone can point out either the cause why the number "1." is shown wrong so I can continue my quest for the solution, or can point out a solution.

Thanks,
Rene Severens

Rene Severens · Post by **Rene Severens** » Wed May 17, 2017 4:48 am

Hi,

Ha, just found the solution myself!

The trick that did it is to add one more at the start of the snippet that contains the list.

It seems that using <br /> is somehow not understood by chrome and that is.

Added this solution for anybody that might run into a similar issue.

Greetings,
Rene Severens

ChoccieMuffin · Post by **ChoccieMuffin** » Wed May 17, 2017 10:01 am

is a non-breaking space, which isn't the same as <br>, which is a linefeed.

I suspect that adding the non-breaking space makes the line too long and so forces it onto the next line, which is why adding a space fixes things.

Would it work if you added some margin (or is it padding? It's late and I am easily confused!) to the stylesheet for your div? That might be neater than having to "fudge" things.

Rene Severens · Post by **Rene Severens** » Thu May 18, 2017 1:46 am

Hi,

I already tried changing the padding, the border and both but this had no effect for the position of the "1." shown in Chrome. It seems that in Chrome there must be something in between to get the position of the "1." in front of the text instead of at the end. So now I have added <p> </p> as first line in the snippet that contains the list with the dropdowns.
This however results in an additional white line between the text and the start of the dropdown. That is still better dan a big white area in between, so for now I will use this option.

Greetings,
Rene Severens

Post by **NorthEast** » Thu May 18, 2017 1:59 am

The problems seem to occur because content is flowing around your floated div elements, so I'd focus on getting your CSS working correctly for all the elements in your layout.

If you have content that you don't want to flow around the floated elements, you can use the clear property.
https://www.w3schools.com/cssref/pr_class_clear.asp

MadCap Software Forums

Why is first OL LI shown at END of text when using chrome?

Why is first OL LI shown at END of text when using chrome?

Re: Why is first OL LI shown at END of text when using chrom

Re: Why is first OL LI shown at END of text when using chrom

Re: Why is first OL LI shown at END of text when using chrom

Re: Why is first OL LI shown at END of text when using chrom