CSS - Position Relative Causing Extra Spacing

Hi there guys,

This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE.

So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it!

On my new design: http://codymays.net/~private_ftp/theed
The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers.

I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason.

Any ideas/suggestions on what to do here would be appreciated.

Thanks,
Cody

Hello -

I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value.

The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D.


Here is an example of what I ideally want to achieve (created w/ Visio):
Ideal Table Look

However, here is what I am currently experiancing


Here's the style sheet that I'm using
Code:

<style type="text/css">
  div.number {  visibility:visble; 
	position: relative; 
	width: 20px; 
	height: 20px; 
	z-index: 2; 
	left: 5px;
	bottom: 35px; 
	text-align: center; 
	text-vertical-align: center;
	font-family: arial; 
	font-size: 8pt; 
	background-image: url(circle.gif); 
	background-repeat: no-repeat; 
	background-position:0px -1px
	background:none; 
	border-style:none; 
	border-width:none; 
	}
</style>

- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells.

Any help would be greatly appreciated.

Thanks in Advance.
Dave

I'm having an issue using position: relative in IE6.


Basically I'm doing this:

Code:

<style>

.class1 {
    width: 900px;
    padding: 0px;
    margin: 0 auto 0 auto;
}

.floatimg {
    position: relative;
    top: -200px;
    left: 0px;
    padding: 0px;
    margin: 0px;
}
</style>

<div class="class1">
    <img class="floatimg" src="foo.gif" />
    <p>Some text.</p>
</div>

So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap.

Im working on a project that required some css that I'm not used to using to pull off an effect.

here is the url
http://www.staging.crea8te.com/ftea

I'm having one issue:

Issue:
the basic structure is
<div1>position: relative
<subdiv></div>position:absolute
<subdiv></div>position:absolute
</div>
<div2>
</div>
<div3
</div>

I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1

i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas?

Hi, I'm following a tutorial and I would like to understand the position functioning.
I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning.

Thanks in advance.

PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www)

This may or may not be a stupid question, but mostly because the sites I learn this stuff from dont really go into much detail I really have to ask...

Whats the real difference between using...
margin: 12px 0px 0px 12px
and
position: relative; top: 12; left: 12;

This is mostly concerning <div>'s that are just making boxes onscreen (which will have images/text in em). I guess you guys will wanna see code, so heres an example:

Code:

div#menu_head {
	background: #ffffff;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

div#cont_head {
	background: #ffffff;
	float: left;
	 margin: 12px 0px 0px 12px; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

As you can see on #cont_head I used a margin to set it 12 pixels away from #menu_head ... If I were to change it to this instead...
Code:

div#cont_head {
	background: #ffffff;
	float: left;
	 position: relative;
        top: 12;
        left: 12; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

...then it still looks exactly the same in the browser. So I am mainly looking to know, please, which one is proper to use and why? im sorta confused on what the purpose of both margins and position:relative are specifically for.

I mean as far as I know.. position:relative; is like position:static; but allows you to take where its naturally supposed to go, and adjust it. so to me that makes sense for my situation. That's what its there for!.. but the only site i could find that shows floats being used with spacing inbetween it using margins to do so. but i mean how do i know that are right? yknow?

Your help is greatly appreciated. And maybe since I was brave enough to post this I might mention another strange thing I don't understand (compared to old, non-xhtml ways)

Code:

<div id="container">
	<div id="sub_container">
		<div id="pasta"></div>
		<div id="trees"></div>
		<div id="widget"></div>
		<div id="squirrel"></div>
	</div>
</div>

Code:

div#container {
	background: #ff0000;
	position: relative;
	margin: 0 auto 0 auto;
	width: 600px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}

div#sub_container {
	padding: 4px;
	position: relative;
}

For whatever reason that #sub_container seems to be required if I want to have padding of 4 pixels around all my content. because if i put the padding: 4px into #container instead and remove #sub_container altogether.. then the width stretches further than it is supposed to... and actually just now as I write this, I suddenly consider that maybe, like with borders, when you add padding it increases the width/height by the padding amounts. hmm maybe that must be it then I am not sure why I hadnt thought of that. I guess because it never did that with tables.
Is this new assumption correct? But then thats almost like the padding gets put onto the outside of the layer rather than the inside of the layer like before??? I'm sorry I am just a confused person I guess :P

Thank you so very much for the help.. I really do appreciate it.

-Chi

Hi folks,

Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute.

I have the following structure -

Code:

<div>
   <div style="position:relative">
      <ul style="position:relative">
         <li>
           <p>

<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>

          </p>
        </li>
      </ul>
   </div>
</div>

The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>.

Question is:

Is what I am attempting going against the grain and something that just isn't going to work?

If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable.

Any clever ideas?

The code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned.

I would like to have those boxes to be aligned to the left.

Any help is appreciated.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">


div {
	position: relative;
	width: 10em;
	padding: 0.25em;
	margin: 0.25em;
    border: 1px solid black;
	text-align: center;
	overflow: auto;
	float: left;
}

</style>
</head>
<body>
    <div style="top: 0em; height: 2em;"> 8 pm</div>
    <div style="top: 5em; height: 2em;"> 9 pm</div>
    <div style="top: 10em; height: 2em;">10 pm</div>
    <div style="top: 8em; height: 5em;">Box A</div>
    <div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>

Hello,

I've been trying to find a solution to this on the board already but nothing quite answers what Im trying to do.

I have a layer that opens from this css:

Code:

#helplayeropen {

	margin-top: auto;
	margin-right: auto;
	float: right;
	position: relative;
	right: 0px;
	top: 80%;
	z-index: auto;
	visibility: hidden;
}

The problem is that if the page is scrollable, when you scroll to the bottom and open the layer, it opens the layer 80% from the top of the original screen, not the new view of the page. 80% from the real top, not 80% from the top of your current view of the page.

Is there any way to get the layer to open 80% from the top of the screen that you are viewing and not from the absolute top.

Heres an example of whats going on Go here and click on the help chilli (right floating layer)

Hello

I'm hoping a CSS guru will be able to help me out. I'm thinking this is a simple question, but CSS is not my strength.

I have a three column layout. First column is going to contain RSS feed headline, second column is the main site content and the third column is meant for ads. As it stands now, the first column and the third column are slowing the page load, since they use javascript to suck in RSS (for the headline) and phpAdNew for the the Ads. What I'd like to do is create a div at the bottom of the page, so these load last and then are positioned relatively to those columns? I hope that makes sense. I'm not sure how to move position after page load.. almost seems like I need to make a layer within a layer or something??

This is an example of what I'm trying to do:

Code:

<html>
<head>
	<title>Test</title>
</head>
<table cellpadding=0 cellspacing=0 border=0 valign="top">
<tr>
	<td width=100>
	<!-- headline rss feed javascript -->
	</td>
	<td width=500>
	<!-- main content -->
	</td>
	<td width=100>
	<!-- phpAdNew javascript -->
	</td>
</tr>
</table>
<div id="headline">
<script language="javascript" src="http://www.domain.com/path/to/headline.js></script>
<!-- I'd like this to be placed in column 1 -->
</div>
<div id="ads">
<script language="javascript" src="http://www.domain.com/path/to/ad.js></script>
<!-- I'd like this to be placed in column 3 -->
</div>
</body>
</html>

Anyways, any help is greatly appreciated. Let me know if you need any additional information from me, etc.

Thanks!
hanji

I am a newbie to CSS and HTML
I am trying to understand how div positioning works
I made a CSS and a class container where I did put some thing
now I made another class say named useful which is placed inside div tags of class container white I am finding problem is when the next div element of class useful is placed then its position is not coming as I desire

some one told me to use float to over come it worked when I used an image but it did not worked when it was not an image here are the contents of my CSS about which I am asking



.header_container {
margin:auto;
height:101px;
width: 1290px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #D5EDB3;
border-right-color: #D5EDB3;
border-bottom-color: #D5EDB3;
border-left-color: #D5EDB3;
}

.header {
background-image: url(n/mm_health_photo.jpg);
height: 101px;
width: 382px;
}

.header1 {
position:relative;
background-color: #D5EDB3;
height:101px;
width: 908px;
float:left;
border-left-color:#999900;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
margin-left: 381px;
margin-top: -101px;

}


Now the problem is in above CSS margin-left and margin-top has been used which I dont think is needed following is my html code

<!-- Header Container Startts -->
<div class="header_container" >
<div class="header"> </div> <!-- header container left image in this box -->
<div class="header1"></div> <!-- the right side of header -->
</div>
<!--Header Finishes here -->