Forums
View unanswered posts | View active topics It is currently Sun Dec 17, 2017 11:24 am



Reply to topic  [ 1 post ] 
 Absolutely positioned image in rounded box (IE6) 
Author Message

Joined: Mon Mar 07, 2011 5:54 am
Posts: 11
Post Absolutely positioned image in rounded box (IE6)
I'm sure this must be a variation on the z-index issue mentioned in the site, but I haven't been able to fix it. Can anyone suggest where I'm going wrong?

I'm using an accordion script from Dynamic Drive where each 'heading' is an 'a ' tag with the classes 'menuitem' and 'submenuheader'. Positioned absolutely inside each one is an image that shows a plus or minus depending on whether the next div is revealed or not. I'll put the style definitions below. I've added a class 'roundtop' to the topmost heading to give it border-radius on the top left and right corners. This uses CSSPie and works perfectly in Firefox and IE8, but in IE6 and IE7, the plus-or-minus image doesn't show in this element until the page is refreshed with Ctrl-F5. The border-radius works. The other thing I've noticed is that in the other elements the a stretches for the entire width of the box, whereas for the one I've styled 'roundtop' only the words are clickable. I've tried various combinations of position:relative and absolute, and z-index but haven't found a fix yet. The standard browser in my company is IE6 so I can't just ignore it.

PAGE CODE example
Code:
<a class="menuitem submenuheader roundtop" href="#" >Business Acumen - Proficient</a>


CSS
Code:
.roundtop {
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
behavior:url(/academies/academies_common/css/PIE.htc);
}

.glossymenu a.menuitem {
   background:  url(../images/accordion/header.gif);
   color: #333333;
   display: block;
   position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
   width: auto;
   padding: 6px;
   padding-left: 10px;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   border:1px solid #9ac1c9;
   margin:0;
   z-index:0;

}

 /* this is icon image that gets dynamically added to headers and disappears when 'roundtop' added */

.glossymenu a.menuitem .statusicon {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  z-index:40;
}


Mon Mar 07, 2011 10:47 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.