[SOLVED] Alignment question (probably simple)

[unsider]

Well, I'm trying to create a list of content that looks like:

 

(icon.gif) 01. Test                             9.3 / 10

 

With this bit of code below.

 

<ol class="entries">
  <li class="loop">
    <a href="" class="none">Test</a><p class="right"> 9.3 / 10</p>
  </li>
  <li class="song">
    <a href="" class="none">Test</a><p class="right"> 9.5 / 10</p>
  </li>
</ol>

 

Only, the problem is I'm using class="right" to shift the 9.3 / 10 text to the far right, but in the process of doing that it shifts the "9.3" text up. Creating a space underneath the 9.3, and it becomes highly noticable when there is a long list.

 

I'm not sure if this makes any sense, or if any of you have had this sort of problem, but I guess a good visual representation would be:

 

(regular content) __________  (9.3 / 10) ---

 

It's literally a shift of that much. It's quite an usually error as well.

 

Anyway, this was tested in FF and Safari, and it's the same result both times, but I'm not certain of IE. Incase you decide to test it.

 

Thanks.

[unsider]

any ideas?

[jcombs_31]

How can anyone test it when you don't show any css?  I'm also not sure whey you would want to use a paragraph inside of a list.

[unsider]

How can anyone test it when you don't show any css?  I'm also not sure whey you would want to use a paragraph inside of a list.

 

You're right about that, but I'm not aware of any other methods, can you recommend some?

 

relavent CSS: (sorry about that guys, completely forgot)

 

li.song { background: url() left center no-repeat }
li.loop { background: url() left center no-repeat }


ol.entries {
line-height: 1.9em; *line-height: 1.4em; 
list-style-position: inside;
list-style-type: decimal-leading-zero;
padding: 5px 0 5px 0;	
}

ol.entries li {
display: list-item;
position: relative;
right: 0px;		
z-index: 1;		
overflow: hidden; *overflow: visible;
height: 1.9em; *height: auto;
margin: 1px 3px; *margin: 0 3px;
padding: 0 0 0 20px;   
*padding: 3px 0 3px 18px; 
}

 

 

[Daniel0]

Try this:

 

<ol class="entries">
  <li class="loop">
    <a href="">Test</a><div class="score">9.3 / 10</div>
  </li>
  <li class="song">
    <a href="">Test</a><div class="score">9.5 / 10</div>
  </li>
</ol>

 

ol.entries li {
clear: both;
}
ol.entries li a {
float: left;
}
ol.entries li .score {
float: right;
}

 

I renamed your class because it should reflect the content, not how it looks.

[unsider]

I renamed your class because it should reflect the content, not how it looks.

 

I don't think I say it enough.

 

Thanks, works perfectly. Really appreciate it.