SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE phantom float bug...

    It'll be best if I show you the markup first. Here is a menu:

    Code HTML4Strict:
    <ul id="memberMenu">
    	<li><a class="home" href="https://perksforwork.com/business"><div class="aicon"></div><span>BUSINESS HOME</span></a></li>
    	<li><a class="tools" href="https://perksforwork.com/business/manage?action=viewbusiness"><div class="aicon"></div><span>BUSINESS TOOLS</span></a></li>
    	<li><a class="viewedit" href="https://perksforwork.com/business/manage?action=viewperks"><div class="aicon"></div><span>VIEW/EDIT PERKS</span></a></li>
    	<li><a class="create" href="https://perksforwork.com/business/manage?action=addperk"><div class="aicon"></div><span>CREATE PERK</span></a></li>
    	<li><a class="profile" href="https://perksforwork.com/business/manage?action=editprofile"><div class="aicon"></div><span>EDIT PROFILE</span></a></li>
    	<li><a class="logout" href="https://perksforwork.com/logout"><div class="aicon"></div><span>LOGOUT</span></a></li>
    </ul>

    In terms of the icon images themselves, they are used as background images to a div and I have one image with all icons in a column, and then the hover state icons in a column right next to that. I'm going for the whole sliding doors thing. I'm pretty sure I could chop that one image up and use just the icon/hover state pairs but I want to avoid it if possible. Anyway I'm having some rendering issues in IE7. The list is supposed to be horizontal with the icons centered above the text. In IE7, everything appears as a block element which totally ruins the menu. in IE8, Safari 4, and FF3+ the menu looks fine. Along with the centering of the icon, I want the hover state triggered when the user mouses over the icon OR the text. That's why I have two elements inside an anchor element (not the most elegant I know...). Here is the CSS (#businesstoolsnav is a similar menu on a different page):

    Code CSS:
    #memberMenu {
    	margin: 0 117px;
    	float: left;
    }
     
    #memberMenu li, #businesstoolsnav li {
    	float:left;
    	margin: 5px;
    	font-family: Arial, sans-serif;
    	font-size: 12px;
    	clear: none;
    }
     
    #memberMenu li a, #businesstoolsnav li a, #memberMenu li a:visited, #businesstoolsnav li a:visited {
    	color: rgb(69,112,43);
    	text-decoration: none;
    }
     
    #memberMenu li a span {
    	float: left;
    	clear: both;
    }
     
    /**		admin icons map
    *				L 		T
    *	home1:		0 		0
    *	home2:		-40		0
    *	tools1:		0		-40
    *	tools2:		-40		-40
    *	viewedit1:	0		-80
    *	viewedit2:	-40		-80
    *	create1:	0		-120
    *	create2:	-40		-120
    *	profile1:	0		-160
    *	profile2:	-40		-160
    *	logout1:	0		-200
    *	logout2:	-40		-200
    *		
    **/
     
    .aicon, .bicon {
    	height: 40px;
    	width: 40px;
    	margin: 0 auto;
    }
     
    .aicon {
    	background: transparent url([url]https://perksforwork.com/business/images/business_menu_icons.png[/url]) no-repeat;
    }
     
    .home .aicon {
    	background-position: 0 0;
    }
     
    .home:hover .aicon, .stayhome .aicon {
    	background-position: -40px 0;
    }
     
    .tools .aicon {
    	background-position: 0 -40px;
    }
     
    .tools:hover .aicon, .staytools .aicon {
    	background-position: -40px -40px;
    }
     
    .viewedit .aicon {
    	background-position: 0 -80px;
    }
     
    .viewedit:hover .aicon, .stayviewedit .aicon {
    	background-position: -40px -80px;
    }
     
    .create .aicon {
    	background-position: 0 -120px;
    }
     
    .create:hover .aicon, .staycreate .aicon {
    	background-position: -40px -120px;
    }
     
    .profile .aicon {
    	background-position: 0 -160px;
    }
     
    .profile:hover .aicon, .stayprofile .aicon {
    	background-position: -40px -160px;
    }
     
    .logout .aicon {
    	background-position: 0 -200px;
    }
     
    .logout:hover .aicon, .staylogout .aicon {
    	background-position: -40px -200px;
    }

    Now, I have a feeling that IE7 is rendering the elements vertically because the .aicon/.bicon divs are block elements. However, if I float and clear them, they aren't centered. If I make width 100%, the hover state icon is visible. I'm kind of stuck with this one in terms of a simple fix. Am I going to have to break up that image and try and different route? I've attached an image of the bug.
    Attached Images Attached Images
    Humbly,

    Smola

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,589
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, try making your markup valid, aka no blocks inside inlines.

    Aka no <div> inside of <a>

    Get valid markup then we will start debuggin
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You have some semantic problems with the code you posted. You can't nest block level divs in an anchor. Let's change those divs to spans.

    Next, let's change that last span that the text is nested in into a "b" tag for the sake of working with another inline element and avoid any styling problems with the first span.

    Now lets' set them both as inline-blocks for two reasons:
    1) the ability to set dimensions
    2) trip haslayout in IE

    Working with the rules that were relevant to the html you posted I came up with this.

    I highlighted the first list item in the html so you could see how it goes together, they are all the same though.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    
    #wrapper {
        width:900px;
        margin:0 auto;
        overflow:hidden;/*contain inner floats*/
        background:#777;
    }
    #memberMenu {
        margin: 0 117px;
        float: left;
    }
    #memberMenu li {
        float:left;
        margin: 5px;
        font-family: Arial, sans-serif;
        font-size: 12px;
        clear: none;
        list-style:none;
        background:#EEF;
    }
    #memberMenu li a, #memberMenu li a:visited {
        float:left;
        color:#45702B;
        text-decoration:none;
        text-align:center;/*center the span*/
    }
    #memberMenu li a span {
        display:inline-block;
        height:40px;
        width:40px;
    }
    #memberMenu li a b {/*text element*/
        display:inline-block;
        font-weight:normal;/*remove bold text*/
    }
    .aicon {
        background: lime url(https://perksforwork.com/business/images/business_menu_icons.png) no-repeat;
    }
    .home .aicon {
        background-position: 0 0;
    }
    .home:hover .aicon {
        background-position:-40px 0;
    }
    .tools .aicon {
        background-position: 0 -40px;
    }
    .tools:hover .aicon {
        background-position: -40px -40px;
    }
    .viewedit .aicon {
        background-position: 0 -80px;
    }
    .viewedit:hover .aicon {
        background-position: -40px -80px;
    }
    .create .aicon {
        background-position: 0 -120px;
    }
    .create:hover .aicon {
        background-position: -40px -120px;
    }
    .profile .aicon {
        background-position: 0 -160px;
    }
    .profile:hover .aicon {
        background-position: -40px -160px;
    }
    .logout .aicon {
        background-position: 0 -200px;
    }
    .logout:hover .aicon {
        background-position: -40px -200px;
    }
    </style>
    </head>
    <body>
    
    <div id="wrapper">
    <ul id="memberMenu">
        <li><a class="home" href="#"><span class="aicon"></span><br><b>BUSINESS HOME</b></a></li>
        <li><a class="tools" href="#"><span class="aicon"></span><br><b>BUSINESS TOOLS</b></a></li>
        <li><a class="viewedit" href="#"><span class="aicon"></span><br><b>VIEW/EDIT PERKS</b></a></li>
        <li><a class="create" href="#"><span class="aicon"></span><br><b>CREATE PERK</b></a></li>
        <li><a class="profile" href="#"><span class="aicon"></span><br><b>EDIT PROFILE</b></a></li>
        <li><a class="logout" href="#"><span class="aicon"></span><br><b>LOGOUT</b></a></li>
    </ul>
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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