Paul_o_b
msg:4323884 | 8:53 am on Jun 9, 2011 (gmt 0) |
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
msg:4324373 | 1:09 am on Jun 10, 2011 (gmt 0) |
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
msg:4324505 | 10:24 am on Jun 10, 2011 (gmt 0) |
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>
|
|
