...

View Full Version : 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:


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:


<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 -
<!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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum