homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE7 List alignment issue
greencode




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

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




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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved