CSS - How Do I Position A Layer Correctly? [img Included Inside]

I've seen a fix for this online before, but I can't seem to find it now.

Basically I've got the following layer declartion:

HTML Code _NOT_ php
PHP Code:
<div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> 





When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low.

How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this.

Okay here's what my HTML basically looks like:

<div id="container">
<div id="top"></div>
<div id="middle"><div id="text"></div></div>
<div id="bottom"></div>
</div>

Now, the top, middle and bottom have a separate background image, that when they are all placed UNDERNEATH each other makes up an image. This works out fine in IE, but in Firefox with the CSS I have set for it, it puts a white line underneath each image (kinda like there's an imaginary <p> in between them, but there's not).

Can anyone help if this is a basic problem? Or do I need to post my CSS in order to get this figured out?

Hi guys,

I'm quite new to CSS and I'm having trouble with layers.

I have a layer that I want to contain other layers.

The main layer has no text or content, its sole aim is to provide a white backdrop for the other layers.

The other layers consist of a banner, navigation and content.

When the content gets longer, i.e. when the page is minimised, the content layer gets longer, but the main containing layer does not.

As a result the content layer extends outside of the main layer.

I'm useless at explaining this so here is the URL

http://www.chriswiggins.net/comp3092/lineup.xml (The page does not render properly in IE, I use Firefox)

The website is for a university assignment,and has little content at the minute.

Any help is well recieved,

Chris

Ok here's my problem - I have three columns/layers (left, center, right) which are inside the content layer. I need to use relative positioning so when the page is re-sized all the page elements are still centered on the page. The problem I am having is that I cannot figure out a way for the colums to be aligned and seem to go under one another. I also need to keep the center colum with an overflow. If anyone has any ideas I would be very grateful! Thanks

<div id="content">
<div id="leftcolumn"></div>
<div id="centercolumn"></div>
<div id="rightcolumn"></div>
<!-- End content -->
</div>


#leftcolumn {
background-image: url(images/leftcolumn.gif);
height: 412px;
width: 148px;
position: relative;
margin-top: 0px;
margin-left: 4px;

}

#centercolumn {
background-color:#FFFFFF;
height: 412px;
width: 382px;
position: relative;
margin-top: 0px;
margin-left: 3px;
overflow: auto;
text-indent: 2px;

}

#rightcolumn {
background-image:url(images/rightcolumn.gif);
height: 412px;
width: 148px;
position: relative;
margin-top: 0px;
margin-left: 7px;

}

I have a site that I have created in WordPress using a pre-designed theme that I heavily customized.
http://www.newlivingwaygreenville.org/blog/

The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x.
The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others.

The image is using inline styles to overcome the limitations of this particular WordPress theme.

Code:

style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;"

Any ideas why this doesn't work right in Safari and what I can do to fix it?

Thanks!

ks

I want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening.

Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it?

Code:

<html>
<head>
<style type="text/css">
#a
{
   width: 800px;
   height: 800px;

   margin: 0 auto;
   text-align: center;

   background-color: #ff0000;
}

#b
{
   position: relative;

   top: 50px;
   left: 50px;

   width: 300px;
   height: 300px;

   background-color: #0000ff;
}

#c
{
   position: relative;

   top: 50px;
   left: 350px;

   width: 300px;
   height: 300px;

   background-color: #00ff00;
}
</style>
</head>

<body>

<div id=a>
   <div id=b>test</div>
   <div id=c>test</div>
</div>

</body>
</html>

I am new to CSS and just experimenting with a site. I have however hit a but of a brick wall. Now the following div tags work fine in Firefox but in IE they don't align right.

This is the syle info

Code:

div#info {
			float: left;
			width: 210px;
			margin-top: 0px;
			border-right: 1px dashed blue;
			font-family: Arial;
			min-height: 350px;
			}	

.infobox { 
				width: 220px; 
				height: 280px;
				background: transparent url(images/userinfo.jpg) no-repeat top left; 
				text-align: left;
				padding-left: 10px;
				}
		.userbox { 
				padding-top: 40px;
				padding-left: 55px;
				font-size: 20px;
				}
		.questionbox { 
				padding-top: 60px;
				padding-left: 55px;
				font-size: 20px;
				}	
		.scorebox { 
				padding-top: 60px;
				padding-left: 55px;
				font-size: 20px;
				}

Now the following code works fine in both firefox and ie. It aligns everything up.

Code:

<div id="info">
			<div class="infobox">
			<div class="userbox">
			Username
			</div>
			<div class="questionbox">
			Question 1
<div class="scorebox">
			3 out of 5
			</div>
			</div>
		</div>	

However i am trying to insert some javascript into the "questionbox" tag like this


Code:

<div id="info">
			<div class="infobox">
			<div class="userbox">
			Username
			</div>
			<div class="questionbox">
			<form name="questionnumber">
			<input type="text" name="question" size="5" readonly="true" value=""></input>
			<script language="JavaScript" type="text/javascript">test()</script>
			</form>

			</div>
			<div class="scorebox">
			3 out of 5
			</div>
			</div>
		</div>	

Then all the alignment stays the same in firefox. However in IE the text box is moved down slightly and therefore doesn't align.

Any ideas

Happy new year everybody, and hopefully with more peace then last year.

I need some help with this.

How can I set a block element, like a div, locked inside an area which have scrollbars? When the content scrolls horizontally the block should not move.

I did try many things now for a few days, but I can't get it to work.

Thanks

I've tried a few combinations of position properties for this and can't figure out how to do it, or whether it is possible.

What I want to do is put an image inside a div which has a property of 'overflow:auto'. I want the image to be positioned so a particlar point is inside the visible area, but so the user can still scroll around to see the whole of the image.

Could somebody point me in the right direction please?

So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div.

But, these 2 divs have to unordered lists in them.

I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths..

Screen shot of how my layout looks.
img209.imageshack.us/img209/2913/idear.gif

I did not add any clear tags to my css.. which I think might be what's causing the issue.
Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns.

I didn't do anything with the unordered lists.
Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works.



Thanks for helping me out!
BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer.
Thanks again.

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet.

I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks!

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

I have attached an image that encapsulates ideally how I would like the page to look.

I'm having troulbe having left nav, body text lining up.

Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows.

Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped.

View how I would "like" it to look
http://urbaneffect.com/test/layers_image.gif

View Page here
http://urbaneffect.com/test/


CSS FILE
Code:

/* this centers the content*/
#wrapper{
	width: 765px;
	margin-left: auto; 
	margin-right: auto;
	text-align: left;
	position: relative;
	background-color:#FFFFFF;
}

#headerBlock{
	z-index:2;
	position:absolute;
	top:0px;
	margin-left:15px;
}

#bodyBlock{
	position:absolute;
	top:70px;	
}

#leftNav{
	width: 182px;
	float: left;
	height: 300px;
	margin-right: 10px;
	background-color:#666666
}

#innerContent {
	float: left;
	padding-left: 12px;
	padding-top: 20px;
	background-color:#FFCCCC;
	width:550px;
}