IE7 alignment issue

eberdome · 11-04-2011, 11:23 PM

Hi All!

I am having an issue with some text aligning within an unordered list (li). I have some text that aligns to the left and a span within the li that aligns everything to the right using float:right;. Everything looks great in all browsers, except of course IE7! Anyone know a fix??

Thanks in advance! The link this can be viewed at is as follows: https://www.gorillaonemedia.com/services/?r=p

This is the CSS for the unordered list:

Code:

ul#pricing_menu { list-style:none; margin:0; padding:0; z-index:2; float:left; margin:0 43px 0 0; width:100%; }
ul#pricing_menu li { margin:0; padding:0; height:auto; text-align:left; z-index:2; border:0; border-top:1px dotted #ddd; display:block; padding:15px 0 15px 50px; height:100%; color:#666; text-decoration:none; font-size:14px; }
ul#pricing_menu li span { float:right; padding-right:20px; font-size:14px; color:#777; }
ul#pricing_menu li span.arrow { float:none; padding:0 3px 0 4px; color:#F90; }
ul#pricing_menu li.web_design { background:url(../images/web_design_sm.png) left center no-repeat #FBFBFB; }
ul#pricing_menu li.web_development { background:url(../images/web_develop_sm.png) left center no-repeat #EEE; }
ul#pricing_menu li.web_marketing { background:url(../images/web_market_sm.png) left center no-repeat #FBFBFB; }
ul#pricing_menu li.web_media { background:url(../images/web_media_sm.png) left center no-repeat #EEE; }
ul#pricing_menu li.graphic_design { background:url(../images/graphic_design_sm.png) left center no-repeat #FBFBFB; }
ul#pricing_menu li.web_hosting { background:url(../images/web_hosting_sm.png) left center no-repeat #EEE; }

The HTML:

Code:

<ul id="pricing_menu">
<li class="web_design">Web Design / Mobile Design<span>Hourly Rate<span class="arrow">&rarr;</span>$50.00</span></li>
<li class="web_development">Web Maintenance / Web Development<span>Hourly Rate<span class="arrow">&rarr;</span>$60.00</span></li>
<li class="web_marketing">Web Marketing / Social Networking / SEO<span>Hourly Rate<span class="arrow">&rarr;</span>$45.00</span></li>
<li class="web_media">Web Media / Videography / Photography<span>Hourly Rate<span class="arrow">&rarr;</span>$75.00</span></li>
<li class="graphic_design">Graphic Design<span>Hourly Rate<span class="arrow">&rarr;</span>$50.00</span></li>
<li class="web_hosting" style="border-bottom:1px dotted #ddd;">Web Hosting<span style="font-size:15px; color:#BBB;">Ask for details!</span></li>
</ul>

Excavator · 11-05-2011, 01:42 AM

Hello eberdome,
Instead of text-align, try wrapping that left text in a span and floating it left.
Something like this -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #FC6;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
ul#pricing_menu {
	list-style:none;
	margin:0;
	padding:0;
	z-index:2;
	float:left;
	margin:0;
	width:100%;
}
ul#pricing_menu li {
	margin:0;
	padding:0;
	height:auto;
	overflow: auto;
	text-align:left;
	z-index:2;
	border:0;
	border-top:1px dotted #ddd;
	display:block;
	padding:15px 0 15px 50px;
	height:100%;
	color:#666;
	text-decoration:none;
	font-size:14px;
}
ul#pricing_menu li span.left {float: left;}
ul#pricing_menu li span {
	float:right;
	padding-right:20px;
	font-size:14px;
	color:#777;
}
ul#pricing_menu li span.arrow {
	float:none;
	padding:0 3px 0 4px;
	color:#F90;
}
ul#pricing_menu li.web_design {background:url(../images/web_design_sm.png) left center no-repeat #FBFBFB;}
ul#pricing_menu li.web_development {background:url(../images/web_develop_sm.png) left center no-repeat #EEE;}
ul#pricing_menu li.web_marketing {background:url(../images/web_market_sm.png) left center no-repeat #FBFBFB;}
ul#pricing_menu li.web_media {background:url(../images/web_media_sm.png) left center no-repeat #EEE;}
ul#pricing_menu li.graphic_design {background:url(../images/graphic_design_sm.png) left center no-repeat #FBFBFB;}
ul#pricing_menu li.web_hosting {background:url(../images/web_hosting_sm.png) left center no-repeat #EEE;}
</style>
</head>
<body>
    <div id="container">
        <ul id="pricing_menu">
            <li class="web_design"><span class="left">Web Design / Mobile Design</span><span>Hourly Rate<span class="arrow">&rarr;</span>$50.00</span></li>
            <li class="web_development">Web Maintenance / Web Development<span>Hourly Rate<span class="arrow">&rarr;</span>$60.00</span></li>
            <li class="web_marketing">Web Marketing / Social Networking / SEO<span>Hourly Rate<span class="arrow">&rarr;</span>$45.00</span></li>
            <li class="web_media">Web Media / Videography / Photography<span>Hourly Rate<span class="arrow">&rarr;</span>$75.00</span></li>
            <li class="graphic_design">Graphic Design<span>Hourly Rate<span class="arrow">&rarr;</span>$50.00</span></li>
            <li class="web_hosting" style="border-bottom:1px dotted #ddd;">Web Hosting<span style="font-size:15px; color:#BBB;">Ask for details!</span></li>
        </ul>
    <!--end container--></div>
</body>
</html>

Frankie · 11-05-2011, 02:03 AM

Things are lining up perfectly here in IE9 in IE7 mode: http://prntscr.com/3us2c. Same thing in IE Tester IE7 mode.

eberdome · 11-05-2011, 03:43 AM

@Excavator - Thanks for the reply! Your solution worked perfectly. Thank you!

@Frankie - Thank you for letting me know that it looks good in IE9!