Jump to content

Height on li in CSS


TonyR

Recommended Posts

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;
}

 

sample.jpg

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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/

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.