TonyR Posted January 28, 2019 Share Posted January 28, 2019 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; } Quote Link to comment Share on other sites More sharing options...
requinix Posted January 28, 2019 Share Posted January 28, 2019 That's how floating works. So don't use it. Look into flexbox. Quote Link to comment Share on other sites More sharing options...
TonyR Posted January 28, 2019 Author Share Posted January 28, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
requinix Posted January 28, 2019 Share Posted January 28, 2019 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? Quote Link to comment Share on other sites More sharing options...
TonyR Posted January 28, 2019 Author Share Posted January 28, 2019 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/ Quote Link to comment Share on other sites More sharing options...
requinix Posted January 28, 2019 Share Posted January 28, 2019 Then try display:inline-block with vertical-align:top. 1 Quote Link to comment Share on other sites More sharing options...
TonyR Posted January 28, 2019 Author Share Posted January 28, 2019 Excuse my ignorance but where would I try this? I have tried it in ul#video-archive li to no avail. Quote Link to comment Share on other sites More sharing options...
requinix Posted January 28, 2019 Share Posted January 28, 2019 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. 1 Quote Link to comment Share on other sites More sharing options...
TonyR Posted January 29, 2019 Author Share Posted January 29, 2019 Thank you very much requinix. I did what you suggested and with a little tweaking of the margins I have got it to work. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.