1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE7 List alignment issue

         

greencode

8:01 pm on Jun 8, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



I have a list where I have the list title (year) and then the amount of posts in that year (amount) followed by a list of months below (months). This is working perfectly in all browsers with the exception of IE7 where I can't get the year and amount to align correctly i.e. on the same line. In IE7 the amount is aligned correctly i.e. on the right but it then sits below the line. Here's the code - any help would be greatly appreciated… 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
<!--
ul#archives {
width: 300px;
}

ul#archives li {
font-size: 15px;
padding: 10px 0;
border-bottom: 1px dotted #c7cccf;
}

ul#archives li li {
font-size: 13px;
padding: 3px 0;
border: none;
text-indent: 30px;
}

ul#archives li span {
float: right;
font-size: 11px;
vertical-align: middle;
background-color: #aba59e;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
padding: 2px 4px;
color: #fff;
line-height: 13px;
min-width: 25px;
text-align: center;
font-weight: bold;
}
-->
</style>

 <title></title>
</head>
<body>
 <ul id="archives">
 <li class="year"><a href="#">2010</a><span class="amount">3</span></li>
 <li class="months">
  <ul>
  <li><a href="#">December (8)</a></li>
  <li><a href="#">November (8)</a></li>
  </ul>
 </li>
 </ul>
</body>
</html>

Paul_o_b

8:53 am on Jun 9, 2011 (gmt 0)

10+ Year Member



In IE7 and under floats must always come first or they start on a new line (when in fact they should sit on the same single line as inline content and displace the inline content on that single line - All floats will start on a new line when they follow block content though).

The easy solution is to change the html so that the soan is first. 


<li class="year"><span class="amount">3</span><a href="#">2010</a></li>



You probably also need this to get the bullet to show in IE7. 


ul#archives{margin:0;padding:0 0 0 1em;}
ul#archives li{
min-height:0;/* force haslayout */
vertical-align:middle;/* nonsense rule but still aligns the bullet in IE7*/
}



IE7 is very buggy with lists/bullets/numbers/ when either floats or haslayout are present (or not present in some cases). It can sometimes be impossible to get the desired result where bullets or numbering are concerned.

SuzyUK

1:09 am on Jun 10, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



as Paul says you cannot float right after a non floated block level element and get it on the same line..

..well at least not without a bit of trickery, so if you don't want to change the source order of the HTML, this may work for you

ul#archives .year a {float: left; width: 100%; margin-right: -100%;}


that code is not really the trickery, it's just floating the first element too, but depending on if you have a reset and what you want to do with the bullets the width may be a hasLayout saviour and the negative margin just compensates for an unknown width.. however simply floating the 
.year a
may be enough

greencode

10:24 am on Jun 10, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for everyone's help with this. I've managed to find a solution by adding a conditional statement for IE7 and tweaking the HTML a little bit. So now the code reads.

Obviously the styling needs to be sorted out a bit (a lot) but at least everything now lines up perfectly in all the major browsers! 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if IE 7]>
<style type="text/css">
<!--
ul#archives li span.year {
float: left
}
-->
</style>
<![endif]-->
<style type="text/css">
<!--
ul#archives {
width: 300px;
}

ul#archives li {
font-size: 15px;
padding: 10px 0;
border-bottom: 1px dotted #c7cccf;
}

ul#archives li li {
font-size: 13px;
padding: 3px 0;
border: none;
text-indent: 30px;
}

ul#archives li span.amount {
float: right;
font-size: 11px;
vertical-align: middle;
background-color: #aba59e;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
padding: 2px 4px;
color: #fff;
line-height: 13px;
min-width: 25px;
text-align: center;
font-weight: bold;
}
-->
</style>
<title></title>
</head>
<body>
<ul id="archives">
<li class="year-ctn"><a href="#"><span class="year">2010</span><span class="amount">3</span></a></li>
<li class="months">
<ul>
<li><a href="#">December (8)</a></li>
<li><a href="#">November (8)</a></li>
</ul>
</li>
</ul>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026