www.webdeveloper.com
Results 1 to 2 of 2

Thread: Relative position within LI in IE 7

  1. #1
    Join Date
    Mar 2009
    Posts
    30

    Relative position within LI in IE 7

    I have this problem using relative position (or maybe something else). Basically I have a menu with each item is an LI. Within LI there are A element and DIV for the arrow if needed. I have problem lining up the arrow in the middle of each LI for IE7. It works fine in FF or IE8

    Can you help me to make the arrow in the middle of each LI in IE7? I don't want to use absolute positioning because the page may change. Thanks

    Below is the link
    http://innovie.com/csserror/aa.html

    This is the code

    Code:
    <div id="container">
      <div id="help-menu">
      	<ul id="help-nav">
        	<li id="help-1">
          	<a href="#"></a>
            <div id="help-arrow"></div>
          </li>
        	<li id="help-2">
          	<a href="#"></a>
          </li>
        	<li id="help-3">
          	<a href="#"></a>
          </li>
        	<li id="help-4">
          	<a href="#"></a>
          </li>
        </ul>
      </div>

    Code:
    #help-menu {
    	display:block;
    	float:left;
    	width:900px;
    	height:76px;
    	margin-top:0px;
    	margin-bottom:20px;
    }
    
    #help-nav {
    	display:block;
    	float:left;
    	width:900px;
    	height:60px;
    }
    
    #help-nav li {
    	display:block;
    	float:left;
    	height:76px;
    }
    
    #help-1 {
    	display:block;
    	float:left;
    	height:76px;
    	width:236px;
    }
    
    #help-1 a, #help-1 a:hover {
    	background:url(../aa_files/help_menu.gif) 0 0 no-repeat;
    	display:block;
    	float:left;
    	width:236px;
    	height:60px;
    	cursor:pointer;
    }
    
    #help-1 a:hover {
    	background:url(../aa_files/help_menu.gif) 0 -60px no-repeat;
    }
    
    #help-2 a, #help-2 a:hover {
    	background:url(../aa_files/help_menu.gif) -236px 0 no-repeat;
    	display:block;
    	float:left;
    	width:192px;
    	height:60px;
    	cursor:pointer;
    }
    
    #help-2 a:hover {
    	background:url(../aa_files/help_menu.gif) -236px -60px no-repeat;
    }
    
    #help-3 a, #help-3 a:hover {
    	background:url(../aa_files/help_menu.gif) -428px 0 no-repeat;
    	display:block;
    	float:left;
    	width:241px;
    	height:60px;
    	cursor:pointer;
    }
    
    #help-3 a:hover {
    	background:url(../aa_files/help_menu.gif) -428px -60px no-repeat;
    }
    
    #help-4 a, #help-4 a:hover {
    	background:url(../aa_files/help_menu.gif) -669px 0 no-repeat;
    	display:block;
    	float:left;
    	width:231px;
    	height:60px;
    	cursor:pointer;
    }
    
    #help-4 a:hover {
    	background:url(../aa_files/help_menu.gif) -669px -60px no-repeat;
    }
    
    #help-wrap {
    	display:block;
    	float:left;
    	width:900px;
    	padding-left:20px;
    	padding-right:20px;
    	margin-bottom:20px;
    }
    
    #help-arrow {
    	background:transparent url(../aa_files/help_arrow.gif) no-repeat scroll 0 0;
    	position:relative;
    	height:16px;
    	width:26px;
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:59px;
    }

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    Hi Cohq82,
    You can use absolute positioning, especially for menus. All you would do is set your LI tag to have the position relative, and then absolutely position your arrow div, with the left / top values. When this div is put inside the LI, it'll be absolutely positioned to that LI only, so it wont matter if your layout changes.

    <LI id=help-1>
    <div class="help-arrow"></div>
    <A href="http://innovie.com/csserror/aa.html#"></A>
    </LI>

    Also, don't forget to change your help-arrow to be a class, instead of an ID, as it will be repeated.

    Hope this helps

    - Andy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles