CSS - Position:absolute In Msie

I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he
http://www.goldenturmeric.com/layout.php

The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know.

Anyone's help is much appreciated.

The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?"

Is the answer "it will be measured from the top left"?

Hi everyone,

I found how to position imgs and txt relative to the browser window, but when i print it out it will be like 3/4 inch from the edge of the paper, even though the page border is set at 1/2 ... Anyway I can get it closer?
Found this piece of code from another page but didn't seem to work
<STYLE TYPE="text/css" MEDIA="print">

thanks

Alright, here we go again.

The page in question...

Various screenshots

I'm working up a sample for a job I came across. The scenario:

He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered.

However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column.

Obviously is going to require absolute positioning, right?

So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system).

Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning.

Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation.

Any advice?

Hi css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions?

This is the x/html:

Code:

<div id="logo">
		<a href="index.html"></a>
</div>

This is the CSS:
Code:

#logo {
	left: 20px;
	top: 0px;
	position: absolute;
	z-index: 5;
	margin: 0pt;
	border: 1px solid #315185;
}

#logo a {
	background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
	display: block;
	height: 435px;
	width: 140px;
}

#logo a:hover {
	background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
	display: block;
	height: 435px;
	width: 140px;
}

Thanks for any tips or references.

Hi,

I have a table with the following div :

div#mod-banner {
height:60px;
position:absolute;
right:180px;
top:22px;
width:468px;
}


in IE7 and Opera looks ok but in IE6 it shows it like its left aligned or something. I dont have any knowledge of CSS , can anybody help me?

Thanks

Hi there,

I have a show/hide div and want it to appear on top of my other layers, however, when I use absolute to get it to appear on top of the other layers, with left and top positions, it appears in different places when I resize my window or change my resolutions.

Is there anyway to make it appear the same no matter what resolution or window size?

I am using pixels by the way.

Thanks.

i have a div tag absolutely positioned and inside that tag i ONLY have an image.

so if place it in some code like this:

Code:

<tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr>

and following that right away, if i have another table row with whatever in it:

Code:

<tr><td>asdf</td></tr>

then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'.

if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there.

any ideas?

thanks

Hi,

Basically I have two divs, and I want to position another div within each div using the absolute property of css. However for some reason, rather then having to absolute divs within my other divs I finish having the two abolute divs one on top of each other. Here is an example I did: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<body>
		<!-- first box -->
		<div style="border:1px solid black;">
			Hello
			<br><br><br><br><br><br><br><br>
			<div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div>
		</div>
		<!-- second box -->
		<div style="border:1px solid black;">
			Hello
			<br><br><br><br><br><br><br><br>
			<div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div>
		</div>
	</body>
</html>

I have done some research and found that this is happening because when I set a div as absolute, this does not remain part of the parent div, and thus the absolute div is not positioned according to the parent div, but according to the whole website.

What I want to achieve is to position my absolute divs taking in consideration the parent div, and this in the example above I would have the label 'helloooo' with red border in both parent divs and not one of top of each other!!

Is this possible?

Regards,
Sim085

ahh thanks figures it out

never mind.

What i want to do is have a block set to the exact width and height that i want. I am trying to find it on w3schools and cant seem to get anywhere.

When i use the code below it works great, untill i enter text to it. i want the height of the block to be 15 pixels, the text is set at 12 in the external stylesheet. When i add the text it makes it about 25px or something... does this have something to do with clip?

Line-height also makes no differences.

This is my attempt at getting rid of my smaller tables

Code:

<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>

stylesheet
Code:

h5 
{ 
padding: 0px;
FONT-WEIGHT: bold;
text-align: center;
font-size: 12px }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left } 

here is the basic idea of the site

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Kingdoms-Tester</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />

<title></title>

</head>
<body>

<div style="position: absolute; left: 0px; top: 0px; background-color: TRANSPARENT; padding: 0px;">

<!--A very large mess of tables in here for my navigation bar at the top-->

</div>


<!--I want to have a lot of blocks (such as below) in here i was hoping to do with absolute positions and place them where i want.  Its basically a multi columned theme with a bunch of sections-->



<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>

<div style="position: absolute; top; 2px; left: 617px; width: 147px; height: 30px; background-color: transperant; padding: 0px;">
<h5 style="padding:0px;margin:3px;">Click here to join the community!</h6>

</div>

</body>
</html>

thanks for any help!

I have an application that includes a login form and it's positioned absolute in the upper right corner. It works great in Safari and Firefox but in IE6 it is not displayed at all. Yet, if I view the source it is there.

This is what my css looks like:

Code:

 #header{
 width:780px;
 margin-bottom:10px;
 background:#e4dbcc;
 height:90px;
}

#header .logo{
 font-size:2em;
 color:#301d0e;
 width:400px;
}

#header .logo_subtext{
 font-size:1em;
 color:#301d0e;
 padding-left:80px;
 border-bottom:10px solid #e2d2bb;
}

#header .login{
 clear:both;
 width:380px;
 position:absolute;
 top:20px;
 left:408px;
font-size:70%;
}

Here is the html:
Code:

 <div id="header">
     <div class="logo"> Program </div>
      <div class="logo_subtext">company name</div>
      <div class="login">
              <form action="index.php?action=login" method="post">
        login: user <input type="text" name="user_name" size="8"/> password <input type="password" name="password" size="12"/>
        <input type="submit" name="Submit" value="submit"/><br />
        Don't have an account? <a href="index.php?action=register">Register here</a> &nbsp; Forget password? <a href="index.php?action=password"> click here </a>
               </form>
      </div>
      <div id="navcontainer">
        <ul id="navlist">
         <li><a href="index.php" id="current">ABOUT US</a></li>
         <li><a href="index.php?action=program" >PROGRAM</a></li>
         <li><a href="index.php?action=contact"  >CONTACT</a></li>
         <li><a href="index.php?action=register" >REGISTER</a></li>
       </ul>
      </div>

Thanks in Advance.

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 -->