I am new to CSS and I am running into this problem with lists in IE8. I am creating an unordered list with several li elements with two divs called left and right.
HTML code -
<ul>
<li>
<div class="left">
<p>ONE</p>
</div>
<div class="right">
<p>TWO</p>
</div>
</li>
<li>
<div class="left">
<p>THREE</p>
</div>
<div class="right">
<p>FOUR</p>
</div>
</li>
</ul>
I essentially want to create a list with two columns. My CSS -
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
height: 40px;
width: 800px;
border: 1px solid;
}
ul li div.left, div.right {
display: inline-block;
*display: inline;
zoom: 1;
}
Using the above CSS and html, I get a list with two columns with a height a 40px. In firefox and chrome, it shows up just as I wanted, but in IE it is a different story.
In IE, I see the same list but the only problem is spacing. In IE, the divs left and right sit at the top of its parent li whereas in Chrome and Firefox they elements sit in the middle which I is what I want.
How do I get this to happen in IE? In IE, my divs cling to the top of the li element, with no padding in between. Do I need to add something else in my CSS? If anyone can help, it would be great.
Thanks.
You could also float you boxes, and give them a height matching the li.
Inline block doesn't work as expected in all browsers/versions.
ul li div.left,
ul li div.right {
float: left;
height: 40px;
width: 400px;
}
Related
I have an unordered list, listaAuto, which is filled with <li> items, which contain an img for each.
The problem is that if I use the <li> property display: inline;, they won't expand to contain the images. Instead, if I display them horizontally, they are no mistakes.
I already tried using overflow: auto, height: auto, clear: both: and other solutions, but I still can't find the way.
HTML:
<body>
<div>
<ul id="listaAuto">
<li><img src="example.png" width="121.33" height="75.92"/></li>
<li><img src="example.png" width="121.33" height="75.92"/></li>
</ul>
</div>
</body>
CSS:
#listaAuto, li{
list-style: none;
padding: 5px;
}
li{
clear: both;
display: inline;
border: 1px solid black;
}
Current output:
Use inline-block for the li items:
https://jsfiddle.net/y86263mq/
Based on another Stackoverflow answer:
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
see very important side notes on this [here][1].
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
Simple explaination
inline-block elements can have the heights defined. In this case, you're not explicitly setting the heights but the contents are.
Add display:inline-block for li and remove the unnecessary clear:both.
Refer this fiddle https://jsfiddle.net/wsmzhn1h/
Adding float: left; and removing clear:both; on the li should do the trick. https://jsfiddle.net/y8sxhv1z/2/
You may try this.
li{
display: inline-block;
}
li img{
max-width: 100%;
}
#listaAuto, li{
list-style: none;
padding: 5px;
}
li{
width: auto;
float: left;
display: block;
border: 1px solid black;
}
<body>
<div>
<ul id="listaAuto">
<li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
<li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
</ul>
</div>
</body>
This is how my list looks like:
http://jsfiddle.net/6mcLfdjj/
HTML:
<div class="container-fluid">
<div id="content" class="row">
<div id="form-container" class="col-md-12">
<div id="request-types-list">
<ul class="request-list-main">
<li class="">xxxasa</li>
<li class="">xxxasaxxxasaxxxasaxxxasaxxxasxxxxxxxx</li>
<li class="">x</li>
<li class="">xxxasaxxxasaxxxasaasdasdadadasdasdsadasdsaasddasasd</li>
<li class="">x</li>
<li class="">x</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.request-list-main {
list-style-type: none;
}
#request-types-list{
padding-top: 15px;
font-size: 14px;
}
.request-list-main li {
display: inline-block;
width: 200px;
height: 200px;
margin: 15px;
padding: 30px;
border: 1px solid #d3d3d3;
word-wrap: break-word;
}
/* #form-container has no styling at all */
Description
I've figured out that the following CSS line:
word-wrap: break-word;
is responsible for the fact that li blocks with too much text for one line are pushed upwards. If I remove
word-wrap: break-word;
li blocks are aligned properly, but then text is displayed incorrect ( it overflows the li block, and I don't want any scrollbars to fix this ). I want the text (text of various length) to sit in the box (be wrapped if needed) and the boxes to be aligned (no box should be pushed upwards like the one in the example).
Adding vertical-align: middle to list items(li) will help
.request-list-main li {
/* ... */
vertical-align: middle;
}
JSFiddle: https://jsfiddle.net/magbw149/1/
vertical-align are always useful when deal with inline-blocks.
vertical-align:top;
I'm using top in this case, middle/bottom are available to be use as well.
Fiddle Demo
http://jsfiddle.net/6mcLfdjj/1/
.request-list-main li
In the above call you can either use Float:left CSS property so that it gets aligned properly along with other li's
.request-list-main li{
float:left
}
DEMO Fiddle
I need to create a section that mimics the pictured mockup below
Because I'm using a content management system, I can only control the CSS of the elements in that section. So, for instance, I can't divide the ul into 2 uls in separate divs (without using some fancy JavaScript hack).
What I need to work with is basically
<div class="outer">
<div class="inner-left">
<!-- left content injected here by the CMS -->
</div>
<div class="inner-right">
<!-- list content injected below by the CMS -->
<ul></ul>
</div>
</div>
Off the top of your head, do you know an easy way to achieve the desired behavior?
You can accomplish this with a bunch of floating.
.inner-left {
float: left;
width: 33.33%; // the first column width
}
.inner-right{
float: left;
width: 66.66%; // the container of the next 2 columns
}
Then we make the ul create the next 2 columns, but first you need to reset the ul by removing margin and padding, and then float the li and give them a width of 50%;
.inner-right ul {
padding: 0;
margin: 0;
}
.inner-right ul li {
float: left;
width: 50%;
}
This should give you 3 evenly spaced columns.
Try with this code:
.inner-right ul li {
display:inline-block;
width:49%;
}
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I have searched without any answers. I know I should do something like
<div class="menu_wrapper">
<div class="menu_box_item"></div> <div class="menu_box_item"></div>
</div>
When zooming in the div's appear under each other. I have tried using position:relative; in the wrapper and position absolute in the menu_box items.
The div's appear under each other because they are block elements. If you want them side by side change class to this:
.menu_box_item {float: left; width: 50%;}
You can also try to add this under your item classes:
<div style="clear:both"></div>
Your question isn't very clear, but you probably want:
div.menu_box_item
{
display: inline; /* this line is only needed for some old browsers */
display: inline-block;
}
Also, it looks like you're creating a list of links across the top of the page? You should be using <ul> and <li> tags for that. For example:
<ul id="nav_menu">
<li>Foo</li>
<li>Bar</li>
</ul>
ul#nav_menu
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#nav_menu li
{
display: inline; /* this line is only needed for some old browsers */
display: inline-block;
min-width: 100px; /* minimum width of your nav items */
}