Relative vs Absolute

spamoom · 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;
}

dbrimlow · 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.

spamoom · 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...

Sign In

Relative vs Absolute

Recommended Posts

spamoom

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

spamoom

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information