CSS - Problem With Aligning Layer..

I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that:

PHP Code:
#maincontent{
    background-image: url(images/layout/contentpanel/contentpanel_background.gif);
    background-repeat: repeat-y;
    background-position: left;
    border: 0px !important;
    padding-left: 30px;
}
#maincontent_inner{
    background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif);
    background-repeat: repeat-y;
    background-position: right;    
    border: 0px !important;
    padding-right: 30px;
} 





PHP Code:
<div id="hold_content">

            <div id="maincontent">
            
            <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?>
</div><!-- End maincontent_inner -->
                        
            </div><!-- End maincontent -->

</div> 





Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas?

Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner:

Code:

<asp:FormView DataSourceID="SqlDataSource20" runat="server">
    <ItemTemplate>
    <div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
        <div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="<%#Eval("bannerSrc") %>" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="opaque" />
        </object>
        </div>
    </div>
    </ItemTemplate>
</asp:FormView>

My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE).

Nested webpage error
URL

Normal page
URL

I don't know why this is happening, especially since it's only part of time. Please help!

Thank you,
Misha

Hello,

I have a table inside a layer (position: absolute).
I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message.

Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution.

Code below. What am I doing wrong?

<div style="position:relative; z-index:1;">
<div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>table</td>
</tr>
</table>
</div>
</div>

Thanks so much!

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.

ok...

im making a site with CSS...

this is my css code -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
font-family: verdana;
font-size: 12px;
text-align: justify;
color:white;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}


#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}



and this is my code for my PHP page, which reads the css -

Quote:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fula.css" />
</head>

<body>


<div id="head"><img src="image/head.jpg"></div>


<div id="content">

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>


ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated!

to view the page this problems on -

http://www.outlawz.frihost.net/fula/test2.php

I'm building a site: www.bunjareecottages.com.au

At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected.

What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom.

Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned.

Any ideas?

The site is located at:
http://68.41.210.39:8081/empcoBeta/index.html

Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE?

The css is as follows:

#under
{
width:84%;
height:1%;
background-color:#1E77D3;
position:absolute;
top:5%;
left:16%;
}
#mainleft
{
width:35%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
left:22%
}
#mainright
{
width:40%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
right:2%
}
body
{
font-family: sans-serif;
font-size: 12px;
}
.indented1
{
padding-left: 5pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}
.indented2
{
padding-left: 10pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}

a:link {color: #17507e; font-size: 2; text-decoration: none; }
a:active {color: blue; font-size: 2; text-decoration: none;}
a:visited {color: #17507e; font-size: 2; text-decoration: none;}
a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;}

#column
{
width:1%;
height:81%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:15%;

}
#leftsidebar1
{
width:100%;
height:5%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:0%;

}
#leftbar1
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:5%;
left:0%;

}
#leftsidebar2
{
width:16%;
height:2%;
background-color:#B4CCEB;
position:absolute;
top:40%;
left:0%;

}
#leftbar2
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:41%;
left:0%;

}
#leftsidebar3
{
width:16%;
height:1%;
background-color:#B4CCEB;
position:absolute;
top:81%;
left:0%;

}
#credits
{

position: absolute;
left:1%;
bottom:20%;

}
.tcredits
{
text-align: left;
font-size: 9px;
font-family: sans-serif;
}

All I'm looking for is something like:

<div class="field">Name</div>
<div class="result">Jeremy</div>

Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath.

I had:

.field{
float:left;
width:150px;
}

result{
float:left;
}

Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want:

Name: .... Here's a really long name. Here's a really long name.
.............. Here's a really long name. Here's a really long name.
.............. Here's a really long name.

But I'm getting:

Name:
Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name.

The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs?

I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

Code:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE.

I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE.

The problem:
I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly.

The code (taken from my site):
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
div#content
{
	margin-left: 205px;
	margin-right: 205px;
	width: 610px;
	margin-top: 0px;
	line-height: 150%;
	background-color: white;
	border: 1px solid red;
}
div#more
{
	float: right;
	width: 160px;
	margin: 0;
	padding: 4px 0px 8px 4px;
	background-color: red;
	color: #fff;
	border: 1px solid white;
}
div#container
{
/*	background-image:  url(../nav_col_base.jpg); */
/*	background-repeat: repeat-y; */
	background-color: yellow;
	border: 1px solid black;
}
div#container2
{
/*	background-image:  url(../more_col_base.jpg); 
	background-repeat: repeat-y;
	background-position: right; */
	border: 1px solid black;
	background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
	margin: 0;
	padding: .3em 0 .3em .5em;
	font-size: 2.2em;
	font-weight: normal;
}
#cleardiv
{
	clear: both;
	height: 1em;
}

</style>

</head>

<body>
<div id="banner">
	<h1>This is my banner division</h1>
</div>
<div id="container">
	<div id="container2">
		<div id="vermenu">
		This is the VERMENU division.  Lets see what happens if I add a whole lot of content to this deivision.  I am expecting the content division to drop down and start displaying just as this content ends.
		</div>
		<div id="more">This is the more division.  I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
		<div id="content">This is the content division.  I cannot figure out why this division drops to just under the larger of the other two divisions.  If you add lines to any of the two divisions, this division shifts down ...</div>
		<div id="cleardiv"></div>
	</div>
</div>

</body>
</html>

I have color coded the layers to simplify identifying the layers and where they show.

What am I doing wrong?

Thank you all in advance for your assistance.


Jose

PS: I cannot post a link otherwise, I would have provided you with one for my website.

I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look?

http://www.marginalspace.com/asif/index.php

Hi guys .. Kinda stuck again.

I've just obtained a menu which I liked, and for some reason, using the 960 gridsystem i cant get it to align correctly under the space which will eventually be a textlogo

Here's the index.html:

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel= "stylesheet" href="css/960/960.css" />
  <link rel= "stylesheet" href="css/960/text.css" />
  <link rel= "stylesheet" href="css/nav.css" />
  <title>FIXA DATORN!</title>
  </head>
  
  <body>
                  
  
  <div class="container_16">
  <div id="logo" class="grid_4 push_5"><p><h3>FIXA DATORN!</h3></p>
    </div>
    </div>
<nav>
  <div class="menu">
  <ul>
  <li><a href="#" title="Home">Home</a></li>
  <li><a href="#" title="About">Portfolio</a></li>
  <li><a href="#" title="Jobs">Blog</a></li>
  <li><a href="#" title="Contact">Contact</a></li>
  </ul>
  </div>
  </nav>
  </body>
  </html> 





and nav.css:

PHP Code:
/* Nav */
nav{
    bottom:414px;
    min-width:450px;
    position:absolute;
    right:10%;
    text-align: center;
}
nav ul li{
    border-bottom:5px solid #68a99f;
    float:left;
    font-family:'BebasNeueRegular', sans-serif;
    font-size:18pt;
    height:60px;
    line-height:60px;
    list-style-type:none;
    margin:0 7px;
    text-align:center;
    width:120px;
}
nav ul li:hover{
    border-bottom-color:#0076a3;
    transition-property:border-bottom-color;
    transition-duration:0.5s;
    -moz-transition-property:border-bottom-color;
    -moz-transition-duration:0.5s;
    -webkit-transition-property:border-bottom-color;
    -webkit-transition-duration:0.5s;
}
nav ul li a{
    color:#eee;
    display:inline-block;
    height:100%;
    width:100%;
    text-decoration:none;
}
nav ul li a:hover{
    color:#999;
    text-decoration:none;
    transition-property:color;
    transition-duration:0.5s;
    -moz-transition-property:color;
    -moz-transition-duration:0.5s;
    -webkit-transition-property:color;
    -webkit-transition-duration:0.5s;
}
.current_page_item{
    border-bottom-color:#af4932;
} 

http://s125392025.websitehome.co.uk/layout.html

I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav.

But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help.

Edit: Finally Found it, nm.

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