CSS - Css Position

Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div.

Here's an example:http://www.caillouette.com/testSite/index2.php

The blank image will be white, but it's dark grey for demonstration purposes.

here's the CSS: Code:

.big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}

.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
	
}

If you look at that page in IE6 you'll see the image with the woman is misaligned. It looks fine in FF and IE7.

I'm not sure what I need to do to get it to align in IE6. This isn't my site design and frankly the CSS is a mess (too many css includes, etc), so I'm actually pretty lost as to how to fix this.

Does it have something to do with the #leftcontent being absolute positioned?

Hi,

The following example is positioned as I want.
Code:

<div><label id="day">Day:</label><span>
<input type="checkbox" name="day" value="1"   />Sat
<input type="checkbox" name="day" value="2"   />Sun
</span>
</div> 	

How do I make in next example
<table> vertically aligned with <label> element?
Right now <table> element is positioned next to it but way below <label> element.
Code:

<div><label id="lang_lbl">What languages do you speak?:</label>
<span>
<table><tr><td><input type="checkbox" name="lang" value="1"   />English </td>&nbsp;
<td><input type="checkbox" name="langs" value="2"   />Spanish</td>
</tr> 
</table>
</span>
</div> 

Thank you.

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

I am working on a website for a friend aamcokc.com and the Nav Bar is sitting right where it's supposed to in FF, Chrome, and Safari on the mac. However, the PC platform seems to make it sit to the left on some of the different browsers, but not all. Is there some kind of code fix I can put in the css to adjust for this? Sorry, this is my first attempt at CSS, so it may be a bit of a mess!

Once I fix this issue the site is done, so the sooner the better!! I really appreciate any help anyone can offer!!

Hello there.
I have an issue with css styling of objects only in Internet Explorer. I am using IE9 and i have tested the styling with other version and still i got the same result.
This is my problem.
I am using this css:
Code:

#map {
			margin:0 auto;
			padding:0;
			width:800px;
			height:461px;
			background:url(images/wrdmap_1.jpg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
 
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
 
		#map li h10 {
			position:absolute;
			display:block;
   			background:url(images/blank.gif);
   			text-decoration:none;
			color:#000;
		}
 
		#map li h10 span { display:none; }
 
		#map li h10:hover span {
			position:relative;
			display:block;
			width:200px;
			left:10px;
			top:10px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
 
		#map h10.senzshen {
			top:215px;
			left:555px;
			width:20px;
			height:20px;
			position:relative;
			z-index:0;
		}
 
		#map h10.slovenia {
			top:143px;
			left:385px;
			width:20px;
			height:20px;
			position:relative;
			z-index:0;
		}

and this html code:
Code:

<ul id="map">
	<li><h10 class="senzshen"><span><b>Shenzshen</b><br>
Primer pisano za kontaktot msn, skype lnikoj ova ona.</span></h10></li>
<!--[if !IE]> -->
<!-- <![endif]-->
 
	<li><h10 class="slovenia"><span><b>Slovenia</b><br>
Primer pisano za kontaktot msn, skype lnikoj ova ona. <a href="#">Proba</a></span></h10></li>
</ul>

to produce world map with 2 dots which on hover will show tooltips with information's. however this code works good with firefox and chrome and the dots are displayed on the exact position as i need but when browsing the web page with internet explorer the dots are displayed outside the map on wrong position.
is there any way i can fix this?
Thanks in advance.
Best wishes Svarc.

Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible.

Full Code
Code:

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

<style type="text/css">
#image {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width:356px;
	height:356px;
	border:1px solid blue;
}
#image * {
	vertical-align: middle;
}
/*\*//*/
#image {
	display: block;
}
#image span {
	display: inline-block;
	height: 100%;
	width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
	display: inline-block;
	height: 100%;
}
</style><![endif]-->

<style type="text/css">
#image img {position:absolute;}
</style>

</head>

<body>

<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>

</body>
</html>

Code that MUST stay in the CSS
Code:

#image img {position:absolute;}

Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html

In IE7 on this page http://hometown.tmhdesign.com the background image position for my #main div is being ignored

Code:

#main {
width: 990px;
margin: 0 auto; 
min-height: 300px;
background: red url(images/style1/main1_div_bg.gif)  0 427px !important;
text-align: left; 
}

Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly.

The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve

I assume that the problem lies with the stylesheet in these two sections...

Code:

#menu {
	position: absolute;
	top: 115px;
	left: 145px;
	width: 50px;
	padding-right: 0px;
	padding-top: 0px;
	text-align: left;
	font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	margin-top: 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	z-index: 200;
	}
	
a.tab, a.tab:link {
	background-color: #222222;
	border: 1px solid #EFEFEF;
	padding: 12px 0em 12px 10px;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	float: left;
	width: 95px;
	margin: 5px 0px 5px 0px;
	text-decoration: none;
	}
a.tab:visited {
	color: #FFFFFF;
	}
a.tab:hover {
	background-color: #666666;
	color: #FFFFFF;
	}
a.tab:active {
	color: #FFFFFF;
	}
a.tab.activeTab, a.activeTab:link {
	border-right-width: 0px;
	width: 100px;
	background-color: #000000;
	}

and Code:

.rightContent {
	float: right;
	width: 535px;
	background-color: #000000;
	border: 1px solid #EFEFEF;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 5px;
	text-align: center;
	color: #FFFFFF;
	}

The (X)HTML for this section looks like this...

Code:

<div id="menu">
		<a class="tab activeTab" href="http://www.paularms.com">Home</a><br />
		<a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br />
		<a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br />
		<a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br />
		<a class="tab" href="http://www.paularms.com/about/index.html">About</a><br />
</div>

<div id="content">
	<div class="rightContent">
..........

Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem.

Thanks everyone.

hello forum,
I am having problem in fixing my <div> position.The div become visible by an event.plz help me .
Regards.

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?

i am trying to do this example here

w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed

the o, in .com has been changed to 0 so i could post. sorry

the text " Some more text "

I wish to had dead center on the right side of the page, not near the top like that,

mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please?

I have an section of code, that on the html side has 7 items in a list, and it's displaying vertically, how (if any) is it possible to break up items and arrange them horizontaly within css?

I have a container DIV a with absolute position containing DIV's b,c,d each with absolute position.
Code:

<DIV class="a">
<DIV class="b"></DIV>
<DIV class="c"></DIV>
<DIV class="d"></DIV>
</DIV> 
<DIV class="e"></DIV>

DIV e has no asssigned position and is not displayed(floating in the background). I want to replace any of b,c or d (setting display to none) with e, displaying e in the position of either b,c or d. How do I assign the style of one DIV to another that is not its parent? I could if necessary place e inside a and do a swap, but I have quite a lot of DIV's like a, and would rather not have to repeat the code in each container DIV. Hope this makes sense!