CSS - Absolute Position

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.

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

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.

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,

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

Sorry for a link and not pasting but code but I want to be sure not to miss anything out ...

There should be a menu item at the top of the page of:
http://egg.epicdesigns.co.uk/home/index.php

It shows up fine in Mozilla and Opera but not MSIE.

Code:

#menu {
z-index:1; 
left:auto; 
top:272px; 
position:absolute; 
width:631px; 
margin:0px 0px 0px 12px; 
padding:0px; 
font:normal 110% agency fb,arial,sans-serif; 
}

I notice that if I remove the <HEAD> tag int he HTML or the FLOAT:RIGHT styling on #sidebar then thigns show up as expected.

Thanks in advance.

Please look at this page -

http://www.mts-diesel.com/index.php?cPath=20_23_42

The breadcrumb trail links on the main page in FF are higher up than the same element in Chrome and IE. If anyone can shed some light it would be greatly appreciated. Thanks so much, Tom

I don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom

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

Hi, and thanks for reading.

I have a design that I put together in Photoshop without thinking of what I would have to do to make it a reality and then got the okay on it. That was a mistake.
I'm now stuck with this.
Which is totally fine, but then you hit this, and everything sucks.
The problem is he
Code:

#body {position:absolute; left:101px; top:13px; width:624px; height:100%;}
			#content {border:solid 3px #000000; background-color:#FFFFFF; width:613px; padding-left:80px;}

#content is inside #body. I also have a transparent image I use as a placeholder with a height of 360px, which seems to only really work if I have height:100% in #content. The problem with that is then any page where the content is over 360px, like in the first link, overlaps #content even though it's all inside content as <p>, <table>, <form>, etc.

My question is, what can I do to fix this? If there's nothing that will work on CSS 2, then I could always just add some extra lines at the bottom of pages with little content. Problem is, this is going to eventually be backed by a CM used by totally clueless people who won't understand the purpose of the extra lines even if I explained it.

Any ideas?
Thanks in advance,
-colin

Hello all, I am having a problem I can't seem to figure out.

The site is:

http://www.ciccotticenter.org/test_site/

When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add

* {
border: 1px solid red;
}

it works. But I can't figure out what thats doing to make it work.

Any ideas?

Thanks,
Ryan

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