1,105,226 Community Members

Position absolute and overflow hidden

Member Avatar
creativeideas
Newbie Poster
11 posts since Apr 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

We have two DIVs, one embedded in the other. the inner popupdiv which is positioned absolute, does not obey the overflow hidden of the outer DIV . hover on anylink will show a popup but it is not showing above red div it goes behind the main div what is the problem??

     <div style="float:left; height:200px; width:100%; background:red; overflow:hidden; position:relative">
     <div class="actionlist">
                <ul class="dott">
                <li>
                  <a href="#">Download</a>
                   <div class="popup_div">


               <em></em>
             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

            </div>
           </li>
              <li><a href="#">Add to Basket</a>


               <div class="popup_div"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

              </div>

              </li>
                <li><a href="#">Share</a>

                <div class="popup_div"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

            </div>

                </li>
            </ul>
            </div><br />
  <br />
<div class="actionlist">
            <ul class="dott">
            <li>
              <a href="#">Download</a>
               <div class="popup_div">

               <em></em>
             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>
               </div>
                    </li>
              <li><a href="#">Add to Basket</a>

               <div class="popup_div" style="overflow:visible"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>
                     </div>

              </li>
                <li><a href="#">Share</a>

                <div class="popup_div"><em></em>
                            </div>

                </li>
            </ul>

    </div>
    </div>`

css:

.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }
.dott { list-style:none;}
.dott li{ height:20px; position:relative}
.dott li a { padding:2px 9px; color:#454545; font-size:11px; }
div.actionlist ul li:hover > div.popup_div { display:block; }
.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }

fiddle link: http://jsfiddle.net/sharma_pooja/CmmYj/13/

LastMitch
Deleted Member
 
0
 

@creativeideas

We have two DIVs, one embedded in the other. the inner popupdiv which is positioned absolute, does not obey the overflow hidden of the outer DIV . hover on anylink will show a popup but it is not showing above red div it goes behind the main div what is the problem??

I think you rush into this.

You forgot to put: semi-colon ; in your CSS code.

Member Avatar
creativeideas
Newbie Poster
11 posts since Apr 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

found no place where i forgot to put semi-colon

Member Avatar
creativeideas
Newbie Poster
11 posts since Apr 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

No one with a answer

LastMitch
Deleted Member
 
1
 

No one with a answer

What do you mean? You have to understand I live in a different time zone. You can't expect me or anyone to be on Daniweb 24 hours a day.

I think you rush into this meaning you didn't bother double checking your CSS code before you post it here. The reason why is that there shouldn't be that much missing semi-colons.

found no place where i forgot to put semi-colon

You're missing semi-colon ;

On .actionlist you forgot to put a semi-colon on padding:8px 0;

.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }

same as .dott li you forgot to put a semi-colon on position:relative;

.dott li{ height:20px; position:relative}

same as .popup_div you forgot to put a semi-colon on display:none;

.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }

Why do you have this > in here:

div.actionlist ul li:hover > div.popup_div { display:block; }

Maybe you can explain to me what is > because I never seen that before.

Member Avatar
creativeideas
Newbie Poster
11 posts since Apr 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

in last i forgot to put semicolon..u say that this is my mistake or i m in little hurry but it doesn't mean this css doesn't work.and > thing is called selectors and if want some knowledge about this read this http://www.w3.org/TR/CSS2/selector.html

LastMitch
Deleted Member
 
0
 

in last i forgot to put semicolon..u say that this is my mistake or i m in little hurry but it doesn't mean this css doesn't work.and > thing is called selectors

Thank for the link. I think I learn something from it!

You're the one asking for help not me so instead downvote me you should ask what should I now and how can I fixed it!

Member Avatar
creativeideas
Newbie Poster
11 posts since Apr 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

ok i m asking now can u help me in fixing my problem ! So i give better comment and a upvote..

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: