Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    IE7 alignment issue

    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>
    "The problem with troubleshooting is that trouble shoots back."

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    eberdome (11-05-2011)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Things are lining up perfectly here in IE9 in IE7 mode: http://prntscr.com/3us2c. Same thing in IE Tester IE7 mode.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    eberdome (11-05-2011)

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    @Excavator - Thanks for the reply! Your solution worked perfectly. Thank you!

    @Frankie - Thank you for letting me know that it looks good in IE9!
    "The problem with troubleshooting is that trouble shoots back."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •