How to fix IE float alignment problem

HTML & CSS
1

Hi can anyone help me solve this really annoying problem in IE?

I have a paged list where the previous link is floated left and the next link is flaoted right.

html

<div class="ou-paged">
<ul>
<li><a class="ou-previous" href="previous.php">Previous</a></li>
<li><a class="ou-next" href="next">Next</a></li>
</ul>
</div>

CSS

a.ou-previous, a.ou-next {display:block; width:35%; background-repeat:no-repeat;}

a.ou-previous {background-image: url(ods-teaser-arrow-left.gif); background-position:center left; padding-left:30px;border:1px solid black; }

a.ou-next {background-image: url(ods-teaser-arrow-right.gif); background-position:center right; padding-right:30px; border:1px solid black;}


div.ou-paged {margin:0; border:1px solid #eee; padding:1em; overflow:hidden; }

div.ou-paged ul {border:1px solid #fff; overflow:hidden; margin:0; padding:0; }
div.ou-paged li {list-style-type:none; margin:0; padding:0; }
div.ou-paged a {text-decoration:none;}

a.ou-previous {float:left; text-align:left;  overflow:hidden;}
a.ou-next {float:right; text-align:right;  overflow:hidden;}

This works fine in most browsers the two floated links are aligned. However in IE7 the next link sits below the previous link. Any ideas?

2

Try this:

a.ou-previous {float:left; display:inline; text-align:left;  overflow:hidden;}
a.ou-next {float:right; display:inline; text-align:right;  overflow:hidden;}
3

Thanks but it doesnt work

4

Can you post a full page code or a live page?

5

Yeah, sorry, got distracted with all those classes you have there :). Try

div.ou-paged li {list-style-type:none; margin:0; padding:0; display:inline; }
6

Hi,

You floated the anchors but not the block level lists which will cause the floats to stagger onto a new line.

Set the lists to display:inline or float them as well.

You will need haslayout on the container to contain the floats in IE6.

[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a.ou-previous, a.ou-next {
    display:block;
    width:35%;
    background-repeat:no-repeat;
}
a.ou-previous {
    background-image: url(ods-teaser-arrow-left.gif);
    background-position:center left;
    padding-left:30px;
    border:1px solid black;
}
a.ou-next {
    background-image: url(ods-teaser-arrow-right.gif);
    background-position:center right;
    padding-right:30px;
    border:1px solid black;
}
div.ou-paged {
    margin:0;
    border:1px solid #eee;
    padding:1em;
    overflow:hidden;
    zoom:1.0;
}
div.ou-paged ul {
    border:1px solid #fff;
    overflow:hidden;
    margin:0;
    padding:0;
}
div.ou-paged li {
    list-style-type:none;
    margin:0;
    padding:0;
}
div.ou-paged a {
    text-decoration:none;
}
a.ou-previous {
    float:left;
    text-align:left;
    overflow:hidden;
}
a.ou-next {
    float:right;
    text-align:right;
    overflow:hidden;
}

div.ou-paged li{display:inline}
</style>
</head>
<body>
<div class="ou-paged">
    <ul>
        <li><a class="ou-previous" href="previous.php">Previous</a></li>
        <li><a class="ou-next" href="next">Next</a></li>
    </ul>
</div>
</body>
</html>
Edit:

too slow …:slight_smile:

7

^ It may be, but I forgot the hasLayout for IE6:

div.ou-paged ul {border:1px solid #fff; overflow:hidden; margin:0; padding:0; height:1%; }
8

The height 1% should be fed to IE6 only, otherwise it could cause issues in the future if a parent gets a fixed height.

9

That works great - i have some conditional code for IE too to trigger hasLayout

<!--[if IE 6]>
<link href="gui/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->

div.ou-paged ul {zoom:1;}

Thanks
Steven

10

Was that div.ou-paged ul suposed to be in the ie.css file? Seems logical if you are placing the haslayout triggers in IE CCs.