I have my site here. In IE7 and FF2, the 5 icons just above the banner do not appear or are pushed to the far right (depending on what I’m trying to fix at the moment). How can I get them aligned properly as it renders appropriately in FF3 and IE8.
Hi,
Set a stacking context for the menu using position:relative on #top-strip so that the absolute menu stays in relation to the centred page and not the viewport. Then change the positioning to match the new parent.
Lastly float the anchors to the left and not the right to avoid the bug in ff2 and ie7.
[B]#top-strip {
position:relative
}[/B]
#icons {
display:inline;
[B] left:320px;[/B]
[B] top:60px;[/B]
position:absolute;
width: 600px;
height:40px;
}
#icons ul li.media a, #icons ul li.apply a, #icons ul li.request a, #icons ul li.donate a, #icons ul li.join a {
margin:0 10px 0 0;
[B] float:left;[/B]
}