Jump to content
TonyR

Height on li in CSS

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

Share this post


Link to post
Share on other sites

That's how floating works.

So don't use it. Look into flexbox.

Share this post


Link to post
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?

Edited by TonyR

Share this post


Link to post
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?

Share this post


Link to post
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/

 

Share this post


Link to post
Share on other sites

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

  • Great Answer 1

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

  • Great Answer 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.