I have a list followed by a div table. I want the list items and the table items to have the same vertical spacing. I know how to adjust the spacing for the list items, but I want to make the div "rows" appear closer. Help?
I've tried a lot of settings and done a lot of searching and am not finding the answer (that is surely right in front of me).
Mockup attached showing how they currently look in wide screen and narrow.
How to control vertical spacing in div table
How to control vertical spacing in div table
You do not have the required permissions to view the files attached to this post.
Re: How to control vertical spacing in div table
Hi Kathy - Can you share the code you're using to make the div table?
Re: How to control vertical spacing in div table
This is the code for that prototype.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
<link href="../Resources/Stylesheets/MainStyles.css" rel="stylesheet" type="text/css" />
</head>
<body class="row">
<h2>List</h2>
<ul class="FirstLevelLessIndentation">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h2>Div table</h2>
<div class="NewRowClass2">
<div>
<ul>
<li class="table">Cell 1</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 2</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 3</li>
</ul>
</div>
</div>
<div class="NewRowClass2">
<div>
<ul>
<li class="table">Cell 1</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 2</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 3</li>
</ul>
</div>
</div>
<p> </p>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
<link href="../Resources/Stylesheets/MainStyles.css" rel="stylesheet" type="text/css" />
</head>
<body class="row">
<h2>List</h2>
<ul class="FirstLevelLessIndentation">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h2>Div table</h2>
<div class="NewRowClass2">
<div>
<ul>
<li class="table">Cell 1</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 2</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 3</li>
</ul>
</div>
</div>
<div class="NewRowClass2">
<div>
<ul>
<li class="table">Cell 1</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 2</li>
</ul>
</div>
<div>
<ul>
<li class="table">Cell 3</li>
</ul>
</div>
</div>
<p> </p>
</body>
</html>
Re: How to control vertical spacing in div table
I'm guessing that if it's taller than you want, there's probably some padding doing that. Or maybe a margin on the <ul> inside the divs that's being applied, but not applied to your list outside the divs, that need to be set to the same value.
Can you post the relevant CSS code too?
Can you post the relevant CSS code too?
Re: How to control vertical spacing in div table
The question is...where is the padding/margin/space/whatever and which element?!
Here's what I had below. Note that when I use the same list within the div the spacing is even worse. I got it a BIT better (doing some combo of settings) but when I try to be more "extreme" other problems happen like a line that wraps collapses on itself or whatever.
ul.FirstLevelLessIndentation
{
list-style-image: url('../Images/Bullet1.png');
font-family: Verdana;
margin-top: .5em;
}
div.NewRowClass2 /*This is a custom responsive layout row style (div class) that I've been messing with.*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
padding: 0;
height: .5em;
}
div.NewRowClass2::before
{
content: ' ';
display: table;
}
div.NewRowClass2::after
{
content: ' ';
display: table;
clear: both;
}
div.NewRowClass2 > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li.table
{
orphans: 2;
widows: 2;
font-family: Verdana;
font-size: .85em;
}
Here's what I had below. Note that when I use the same list within the div the spacing is even worse. I got it a BIT better (doing some combo of settings) but when I try to be more "extreme" other problems happen like a line that wraps collapses on itself or whatever.
ul.FirstLevelLessIndentation
{
list-style-image: url('../Images/Bullet1.png');
font-family: Verdana;
margin-top: .5em;
}
div.NewRowClass2 /*This is a custom responsive layout row style (div class) that I've been messing with.*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
padding: 0;
height: .5em;
}
div.NewRowClass2::before
{
content: ' ';
display: table;
}
div.NewRowClass2::after
{
content: ' ';
display: table;
clear: both;
}
div.NewRowClass2 > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li.table
{
orphans: 2;
widows: 2;
font-family: Verdana;
font-size: .85em;
}
Re: How to control vertical spacing in div table
Changing nothing else except using the same li in the div... spacing is even worse
You do not have the required permissions to view the files attached to this post.
Re: How to control vertical spacing in div table
What's the CSS for your normal ul tag though - does that not have margin/padding?
An easy way to check your CSS is to use (a) the Formatting Window in Flare (style inspector), or (b) press F12 in your browser and use the 'inspect' tool.
An easy way to check your CSS is to use (a) the Formatting Window in Flare (style inspector), or (b) press F12 in your browser and use the 'inspect' tool.
Re: How to control vertical spacing in div table
F12 is your best friend 
I recreated your page, and from the code you provided, I think your ul tags do not have any assigned margins, so it's using the web's/browser's default value, which is 1em for top and bottom margin. If you shrink that, I think you'll get the spacing you're looking for.
So you'll either want to set a top and bottom margin for ul tags overall, or at least just for ones inside divs, if you don't want it applied elsewhere. That's what I did in this example I built from your code.
I started with this. The orange area is margin. You can see combined with the same item below it in the table, is pushing those two lists apart.
I applied this CSS, to adjust the margin on ul tags that appear inside div tags:
And now I have this...
.2 em looked close in my example, but you can adjust the value of course to get the spacing right. Give that a try and see if it works out.
I recreated your page, and from the code you provided, I think your ul tags do not have any assigned margins, so it's using the web's/browser's default value, which is 1em for top and bottom margin. If you shrink that, I think you'll get the spacing you're looking for. So you'll either want to set a top and bottom margin for ul tags overall, or at least just for ones inside divs, if you don't want it applied elsewhere. That's what I did in this example I built from your code.
I started with this. The orange area is margin. You can see combined with the same item below it in the table, is pushing those two lists apart.
I applied this CSS, to adjust the margin on ul tags that appear inside div tags:
Code: Select all
div > ul
{
margin-top: 0.2em;
margin-bottom: 0.2em;
}
.2 em looked close in my example, but you can adjust the value of course to get the spacing right. Give that a try and see if it works out.
You do not have the required permissions to view the files attached to this post.
Re: How to control vertical spacing in div table
Thank you! I'm excited to go try this magic.
Eta: My hero.
Eta: My hero.