Height on li in CSS

[TonyR]

Hi

I am really struggling to get my page to display correctly. For some reason my UL list will not display in a straight line but one LI tag just skips the line and goes to the next line. I have tried to add the height on the ul#video-archive li in my css and but it does not work. I have added an image below along with the code. Any help would be much appreciated.

Best regards

Tony

			<div id="content">
				<div class="entry-content">
					<ul id="video-archive">
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
							</div> 
						</li>
						<li>
							<a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a>
							<div>
								<h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
							</div> 
						</li>
					</ul>
				</div><!--entry-->
			</div><!--content-->

 

#content {
	margin: 0 1.875em /*34% 0 7.6%*/;
	/*width: 58.4%;*/
	padding-top: 30px;
}
.entry-content {
	padding: 1.625em 0 0;
	font-size: 0.875em;
}
.entry-content h1,
.entry-content h2, {
	color: #000;
	/*font-weight: bold;*/
	margin: 0 0 .8125em;
}
.entry-content img {
	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
.entry-title {
	font-family: "adelle", serif;
	color: #2f705a;
	font-size: 1.75em; /* 28px / 16px */
	font-weight: 400;
}
ul#video-archive {
	list-style: none;
	margin: 0 0 0 -0.975em;
	padding: 0;
}
ul#video-archive li {
	width: 32.222222222222%;
	max-width: 290px;
	display: inline;
	float: left;
	margin: 0 0 60px 0.975em;
	padding: 0;
}
ul#video-archive li img {
	width: 100%;
	height: auto;
	border: 1px solid #000;
}
ul#video-archive h1 {
	font-family: "adelle", serif;
	font-size: 1.5em; /* 24px / 16px */
	color: #2f705a;
	line-height: 1.33333333333333em; /* 24px / 20px */
	margin: 0.75em 0;
}
ul#video-archive h1 a, ul#video-archive h1 a:hover {
	color: #2f705a;
}
ul#video-archive div {
	margin:10px;
}
ul#video-archive div p {
	/*font-size: 0.875em; /* 14px / 16px */
	margin-bottom: 0;
}

 

[requinix]

That's how floating works.

So don't use it. Look into flexbox.

[TonyR]

Thank you for the reply. I have to be honest and have never heard of flexbox before. After initial searching online I was optimistic but then I found out that it is not supported by IE10 and below.

Surely there must be a fix that would be compatible for all browsers?

Edited January 28, 2019 by TonyR

[requinix]

IE 10 supports an old version of flexbox. IE 9 is where it ends.

You're going to have to draw a line in the sand somewhere. It's not like people using these old browsers are having a good internet experience anyways. Do you actually have to care about IE 9 and below?

[TonyR]

I would love to ignore IE as I definitely do not care about IE 9 and below but this is for an assignment and I need to make it compatible up to IE 8.

I have uploaded the code to my friends domain so you can see the problem I am having. White spaces everywhere!

Even if I use flexbox I would still need to fix the css for IE!!

http://www.onlineavenue.com/code/

 

[requinix]

Then try display:inline-block with vertical-align:top.

[TonyR]

Excuse my ignorance but where would I try this? I have tried it in ul#video-archive li to no avail.

 

[requinix]

I tried it using the page you linked and it worked for me.

Goes on the li. Oh, and remove the float. And you'll probably want to tweak the margins a little.

[TonyR]

Thank you very much requinix. I did what you suggested and with a little tweaking of the margins I have got it to work.