spamoom Posted August 27, 2007 Share Posted August 27, 2007 I am using simple javascript to make a div appear when i hover.... The problem is that the thing that it is hovering over a floating div already so if I use Relative it will float to the right but move the origional menu, wheras if I use absolute float: right does not work! please help... I'm not sure if this makes sense, send a reply if it doesn't. Thanks in advance! ps here is my css code at the moment .menu { float: right; position: relative; top: -50px; z-index: 1; } #menupopup { background-color: #333333; width: 415px; height: 100px; position: static; float: right; clear: both; z-index: 50; } Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted August 27, 2007 Share Posted August 27, 2007 Just give us an example of what you want to do. What you ask is too abstract. The css cannot even begin to explain what you are attempting. Show us an html example. Quote Link to comment Share on other sites More sharing options...
spamoom Posted August 28, 2007 Author Share Posted August 28, 2007 Yeah sorry, I just am trying to figure out the concept of relative and absolute and why they differ from firefox to ie. for example.... <html> <!-- header stuff !--> <body> <div id="wrapper"> <div id="logo"><img src="template/{THEME_NAME}/images/logo.gif" /><br /></div> <table class="menu" width="415" cellspacing="0" cellpadding="0" border="0"> <tr height="40"> <td width="11"><img src="template/{THEME_NAME}/images/yellow_big_left.gif" /></td> <td colspan="9" class="big_yellow"> Welcome back Rich! </td> <td width="11"><img src="template/{THEME_NAME}/images/yellow_big_right.gif" /></td> </tr> <tr height="33"> <td width="11"><img src="template/{THEME_NAME}/images/white_left.gif" /></td> <td class="white" width="45">Home</td> <td class="white" width="3"><img src="template/{THEME_NAME}/images/white_seperator.gif" /></td> <td class="white" width="98"> Browse Store</td> <td class="white" width="3"><img src="template/{THEME_NAME}/images/white_seperator.gif" /></td> <td class="white" width="95"> Start Trading</td> <td class="white" width="3"><img src="template/{THEME_NAME}/images/white_seperator.gif" /></td> <td class="white" width="65"> Account</td> <td class="white" width="3"><img src="template/{THEME_NAME}/images/white_seperator.gif" /></td> <td class="white" width="78"> Assistance</td> <td width="11"><img src="template/{THEME_NAME}/images/white_right.gif" /></td> </tr> </table> <!-- the above works fine! !--> <table class="floatmiddle" width="95%" border="0" cellspacing="3" cellpadding="5"> <tr> <td width="197" valign="top"> <div class="smalllefttop"> <div class="smalllefttexttitle"> Search The Revision Shop </div> </div> <div class="smallleftbg"> <div class="smalllefttext"> <input type="text" > </div> </div> <div class="smallleftbottom"></div> </td> <td rowspan="2" valign="top"> <table border="0" width="580" cellpadding="0" cellspacing="0"> <tr height="32"> <td width="11"><img src="template/{THEME_NAME}/images/yellow_left.gif" /></td> <td width="100%" class="yellow"></td> <td width="11"><img src="template/{THEME_NAME}/images/yellow_right.gif" /></td> </tr> <tr> <td colspan="3"><img src="template/{THEME_NAME}/images/testad.gif" /></td> </tr> </table> </td> </tr> <tr> <td valign="top"> <div class="smalllefttop"> <div class="smalllefttexttitle"> Catagories </div> </div> <div class="smallleftbg"> <div class="smalllefttext"> <ul> <li>lol <li>test <li>books <li>videos </ul> </div> </div> <div class="smallleftbottom"></div> </td> </td> </tr> </table> </div> </body> </html> this is some of the stylesheet .floatmiddle { top: 50px; left: 20px; } #wrapper { width: 800px; height: auto; } #logo { padding-left: 20px; border: 0px; } In this code there are dramatic differences seen in this screenie... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.