CSS - My Expanded Div Won't Stay In Container

hi folks,

i am redesigning my homepage and i have one little problem in IE. The footer i have will not stay down at the bottom of the screen in IE. Firefox works just fine like usual.
Here is the original site
Here is the new design

I changed the design, so that it is easier to read and scroll - some people reviewed my page and i think that makes sence.

if someone could help me with that problem, that would be great .... i think IE puts the footer right underneath the navigationbox to the left, thats why it is up there ....
i tried to set the position of the footer 'fixed', but it didn't look right in FF nor IE (when scrolling it somehw moved with the overall picture)

the footer in the CSS is called #verify .....

Thank you

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

Like when I make a field..

<fieldset>
<fieldset>

How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email?

Please help.

Would be really cool with a code below.

Issue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions?

hi folks,

i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution.
i have this code:
Code:

<p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products  </a></p>

... which makes the grey-colored word 'products' appear brown when the mouse is over it.
thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on?

any advice would be greatly appreciated

I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content.

I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3
http://www.themaninblue.com/writing/perspective/2005/08/29/

but I'm having a hard time with the longer content page.

Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php
Long page: http://windrivers-gsp.com/WRK/hclub.php or
http://windrivers-gsp.com/WRK/dams.php

As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div.

I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated!

Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css

And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed.

hi,

is there any way to keep the text inside of a box, when narrowing a browser window - OTHER than to specify a minimum width?

ideally i would like to have a window expand to the bottom - i have a feeling that it doesn't work though. i mean, a box can expand sideways, why not vertically as well?

this is the test page i am talking about.
i would love to keep the text (and the images) inside the box at all times, without specifying a min-width. it would make the whole design eligible for any screen resolution.

thanx for reading

Hi,

I'm racking my brain here and I can't figure out what I'm doing wrong.

First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content.

http://65.175.116.253/design/demo.html

I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link

http://65.175.116.253/design/design.rar

I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong.

Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out..





Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	width: 100%;
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: left;
	width: 17em;
	margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

-------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>www.company.com/</title>
		<link href="css.css" type="text/css" rel="stylesheet" media="screen">
		<!--[if IE]>
			<style type="text/css">
				#today{
					text-align: right;
					margin-top: 0;
					margin-bottom: 0;
					padding: 0 2em 0 0;
					position: relative;
					top: -1.66em;
					color: #fff;
					font-weight: bold;
					line-height: 1;
				}
			</style>
		<![endif]-->
	</head>
	<body>
		<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
		<div id="header">
			<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
			<ul id="navbar">
				<li class="first">
				<a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li class="last"><a href="http://www.company.com">nav link</a></li>
			</ul>
			<p id="today">date here</p>
		</div> <!-- end div id header -->

<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>

<h2>quick search</h2>
<table class="mainsearch">

<tr>
<td>

<FORM action="http://company.com/" method="post">

<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
 
</td>
 
<td width="285" valign="top">
<br>
&nbsp;<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
&nbsp;<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>

</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
&nbsp;<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
		
</div> <!-- end div id content -->
				
							<div id="sidebar">
				<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p>				This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is. 
<br>
</p>
</div> <!-- end div id whatistea -->

<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
&nbsp;Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
&nbsp;Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->

<div id="footer">
			<p>
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a>  
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- 
			</p>

		</div> <!-- end div id footer -->
	</body>
</html>

Ok here is the problem I have...
I have 3 DIVS....

DIV 1 is a container the centers the contents
DIV 2 I want to wrap tight around an image
DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left.

Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center.

here is the HTML i have...


<div id="div1" align="center">
<div id="div2">
<img alt="fddsffsd" src="image.jpg"/>
<div class='div3'></div>
</div>


and here is my CSS...

#div2 {position: relative}
.div3 {
position:absolute;
width: 80px; height: 80px;
top: 100px; left:20px;
background-image: url(transparent.png);
}

i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar.

i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript?

here's my page:

http://www.myspace.com/marx0i0

and here are some examples of what im trying to do:

http://bonrouge.com/test/fixed.htm
http://www.howtocreate.co.uk/fixedPosition.html

finally, here is my code:

<embed allowScriptAccess="never" allowNetworking="internal"
SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent">

thanks very much for any help!

http://www.students.niu.edu/~z162609/asme.html

That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger.

I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help.

Code:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}

In short, my problem is the image used for the navigation bar wont stay put.
It works fine in IE8 but the image alignment isn't fixed (page to page) in Firefox. I used Microsoft expression web 3 to create, and i admit i have no clue what i messed up. Thanks in advance for any responses.
website is: tigertandem.com


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-attachment:fixed;
background-color: #000000;
background-image: url("../images/background.gif");
background-position: top left;
background-repeat: repeat-x;
}
#container {
width: 100%;
margin-top: 57px;
border-bottom: 2px solid #363636;
background-color: #fff;
}
#masthead {
width: 670px;
position: fixed;
margin-right: auto;
margin-left: auto;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
}
#navigation {
width: 670px;
margin-right: auto;
margin-left: auto;
clear: both;
overflow: hidden;