Textpattern CMS

#1 2005-10-26 08:04:01

thehonoraryfan

New Member

Registered: 2005-10-26

Posts: 4

CSS "display:inline" tag

Hello, I’m somewhat of a CSS newbie and am a bit unfamiliar with the “display: inline” tag for an image. Currently, I have a playlist in the sidebar that just displays icons of CD art. But perhaps 1 in every 5-6 times that I go to my page, one of the icons is floating “out of place.” It’s just really strange since it happens sporadically. You’ll see what I mean if you visit the site with a snapshot of it: http://www.thehonoraryfan.com/images/ListProblem.jpg. That one album is actually supposed to be in the bottom left-hand corner.

My css tag is pretty straight foward, a ul and li (neither labeled) with a div class of “playlist” around the whole thing. My css for that div is pretty straight forward as well with the exception of a “display:inline” tag. I used a tutorial to write the code so I’m not 100% sure if setting the display to inline is causing that problem. So my code looks like this:

#playlist img { text-align: center; margin: 0 6px 6px 0; display: inline; }

I also like to add that it seems like I’m only getting this problem in Safari. Firefox and IE are fine. Please let me know if there’s something wrong with that. Much thanks in advance for the help!

Last edited by thehonoraryfan (2005-10-26 08:20:08)

#2 2005-10-26 14:13:35

paularms

Member

From: University of Minnesota

Registered: 2004-10-21

Posts: 155

Website

Re: CSS "display:inline" tag

if your div has the CLASS of “playlist” then the css should read <code>.playlist img</code>

Instead of the way that you are doing it… which I really don’t know what other css you are using for it, I will offer this instead, which should work with minor adjustments:

<code>
.playlist ul {
list-style-type: none;
margin: 0; /* change if needed */
padding: 0; /* add padding if you need some, but you shouldn’t need any */
width: 220px; /* assuming the width of your images + margins */
}
.playlist li {
float: left;
width: 100px; /* I’m assuming that is the width & height of your image */
padding: 0; /* Just in case you are using padding for your base list items to keep IE from box-model problems */
margin: 5px;
}
div.clear { /* you’ll use this later */
clear: both;
height: 1px;
font-size: 1px;
}
</code>

Then, your html would look like this:

<code>
<div class=“playlist”>
<ul>
<li><img src=”“ alt=”“ /></li>
<li><img src=”“ alt=”“ /></li>
<li><img src=”“ alt=”“ /></li>
<li><img src=”“ alt=”“ /></li>
<li><img src=”“ alt=”“ /></li>
<li><img src=”“ alt=”“ /></li>
</ul>
<!— clear out the floats for more content and expanding the containing div.playlist —>
<div class=“clear”></div>
</div>
</code>

Last edited by paularms (2005-10-26 14:16:23)

#3 2005-10-26 19:57:27

thehonoraryfan

New Member

Registered: 2005-10-26

Posts: 4

Re: CSS "display:inline" tag

Thanks for your help, I think actually setting the styles on the ul and li and not on the div helped. I also goofed, I had an id “playlist” and not a class “playlist”. Also, clearing the bottom with the “clear” div might’ve done it as well. Appreciated it!