Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css absolute position margin hack?

Status
Not open for further replies.
theocraticmind

theocraticmind

Programmer
Apr 19, 2002
318
CA
ok, this is what I want to see: (this is IE6 by the way)

this is what I'm getting in NS:

the problem is that in IE, the margin (5px) of the above div (#menu) pushes the absolutely (yet without top specified) positioned left column down, and it dosn't in NS. what I need to do is keep the left column fluin in relation to the top, but move it down 5 pixels...

any help would be great...
 
Sort by date Sort by votes
I know I've seen that songs somewhere before...Have you heard of CGR? Did you post it there?

Anyway, I'd need the HTML code to see the problem.

Rick -----------------------------------------------------------
RISTMO Designs
Arab Church
 
Upvote 0 Downvote
project 86 - one armed man

I put it there just because it was text, I get it from the window streaming me music (they have the lyrics to the current song at all times)

I'm not sure what CGR is...

anyway, the code.

Code: 
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;  &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;>[/URL]
<head>
<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; />
	<title>defrex | a theocratic mind</title>
<style type=&quot;text/css&quot;>
body{
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#000000;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
font-size:13px;
}

#flash{
postition:absolute;
top:0px;
left:0px;
margin:0px;
}

#filler{
position:absolute;
left:5px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
width:100px;
height:304px;
border:1px solid #000;
}

#content{
margin-left:113px;
margin-right:5px;
margin-top:0px;
margin-bottom:0px;
padding:2px;
border:1px solid #000;
height:300px;
text-align:justify;
font-size:14px;
overflow:auto;
}

#menu{
margin:5px;
padding:2px;
border:1px solid #000;
text-align:right;
font-size:13px;
}

a:link.menu_links {background:none;text-decoration:none;color:#000;}
a:visited.menu_links {background:none;text-decoration:none;color:#000;}
a:hover.menu_links {background:none;text-decoration:none;color:#000;}
a:active.menu_links {background:none;text-decoration:none;color:#000;}
</style>
</head>

<body>
<div id=&quot;flash&quot;>
<object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;100%&quot; height=&quot;200px&quot;>
 <param name=&quot;movie&quot; value=&quot;feet.swf&quot; />
 <param name=&quot;quality&quot; value=&quot;high&quot; />
 <param name=&quot;bgcolor&quot; value=&quot;#FFFFFF&quot; />
  <EMBED src=&quot;feet.swf&quot; quality=high bgcolor=#FFFFFF  WIDTH=&quot;100%&quot; HEIGHT=&quot;200&quot; TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;></EMBED>[/URL]
</object>
</div>
<div id=&quot;menu&quot;>
<a href=&quot;index.html&quot; class=&quot;menu_links&quot;>home</a> | <a href=&quot;photo.html&quot; class=&quot;menu_links&quot;>photo</a> | <a href=&quot;web.html&quot; class=&quot;menu_links&quot;>web</a> | <a href=&quot;bio.html&quot; class=&quot;menu_links&quot;>bio</a> | <a href=&quot;faith.html&quot; class=&quot;menu_links&quot;>faith</a> | <a href=&quot;link.html&quot; class=&quot;menu_links&quot;>link</a>
</div>
<div id=&quot;filler&quot;></div>
<div id=&quot;content&quot;>
text...
</div>
</body>
</html>
 
Upvote 0 Downvote
looks like you are running Dreamweaver
go to and download their snap layers extension

This is by far the best layer layout extension for dreamweaver i have come across. And the best thing is that it is NN and IE compatible [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
I'm not running dreamweaver at all, I wrote that code. lol, I didn't think my code was so bad as to look like it was writen by a WYSYG app. oh well.

so how does this dreamweaver extention get around the problem?
 
Upvote 0 Downvote
the code looks fine lol, I use dreamweaver cuz it saves time and money and is so freaking easy to use [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
as for how it gets around the problem is that it anchors your layers to certain spots on the page

ie. you have an image id=&quot;anchor1&quot;
and you want a layer to be below the image in the middle at all times no matter what

This extension makes it so that the layer will snap to the bottom middle of anchor1 at all times [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
753
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
602
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
641
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
206
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top