CSS - Oh The Insanity!!! Ff Moves Absolutely Positioned Element

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue??

i see i cannot post a url. any help without seeing the problem?

Here is the code snippet from the iframe:
Code:

<div style="margin: 0px;" id="votes">
<ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh">								                            	           <li id="xvote-0" style="width: 81.25px;" class="current-rating"></>
<span id="mnmc-0">															                   <li class="one-star-noh"></li>											                     		                             <li class="two-stars-noh"></li>
<li class="three-stars-noh"></li>													                                           <li class="four-stars-noh"></li>
<li class="five-stars-noh"></li>
</li>
</ul>
</div>

I've been adding local styles to try and zero any potential problems.

i can post all css styles if noone has any ideas.

Any help would be much appreciated.

Thanks.

hi,

I've run into a bit of a problem... I'm trying to set up a drop down menu in my navigation bar.

I'm using the method from www.gazingus.org/html/menuDropdown.html

it works except for the fact that it hides behind a relatively positioned element - sa-ewb.org.uk/trial/about_us.htm

can I use z-index to fix this?

I'd really appreciate some help on this!

thanks,

Jim.

Hi everyone.

I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element.

The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css.

Here's the CSS...
Code:

#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}

#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}

#hdnav {
margin: 0;
padding: 0;
}

#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}

#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}

#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}

And the HTML...

Code:

<div id="hd">
<div id="hdlogo">
<img src="images/logo.gif" alt="Home" title="Home"/>
</div>
<div id="hdnav">
<ul>
<li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li>
<li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li>
<li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li>
<li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li>
<li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li>
</ul>
</div>
<div id="hdbar">
<img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high -->
</div>
</div>

Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site...

Code:

body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}

body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}

body a:hover {
text-decoration: underline;
color: #555759;
}

#content {
width: 780px;
margin: 0 auto;
padding: 0;
}

#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}

#content centers everything and #allwrap is a container for all it's child elements.

I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline.

Does anyone have any ideas?

Thanks a bunch..

-Brian

I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work.
I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing.
I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach.

Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image.

Essentially, my code is something like this:

CSS:
Code:

td#CONTENTDISPLAY
{
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: top;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div#CONTENTBANNER
{
  position: relative;
  height: 100%;
  padding: 0 0 0 0;
}

img.CONTENTIMG
{
  position: absolute;
  height: 100%;
}

HTML:
Code:

...
  <td id="CONTENTDISPLAY">
    <div id="CONTENTBANNER">
      <img class="CONTENTIMG" />
    </div>
  </td>
...

Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning.

Can anyone help point me in the right direction?

Thanks!

- skubik

I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu.

This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu.

Here's what I've got:

CSS
Code:

#forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }

#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }

HTML
Code:

<div id="adminbar">
         <a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
      </div>
      <div id="forms">
         <div id="software" class="form">
            <h1>Software Administration</h1>
            <form class="ttcform">
            <fieldset>
               <legend>New Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
            <hr>
            <form class="ttcform">
            <fieldset>
               <legend>Edit Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
         </div>
      </div>   

Javascript (In case you need it):
Code:

function show(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'block';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function hide(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'none';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function getElementsByClassName(className) {  
   var retEls = [];
   var els = document.getElementsByTagName('*');
   for(var i = 0; i < els.length; i++) {
      if(els[i].className == className) {
         retEls.push(els[i]);
      }
   }
   return retEls
}

Hey everyone,

I remember once reading an article on positioning everything relative when doing a float site using CSS. The problem is, if I do something like:
css Code:
Original - css Code html *{ position:relative; }

  

  


 html *{


 position:relative;


 } 

It seems to only apply relative positioning to absolutely nothing. Then if I do something like:
css Code:
Original - css Code html * *{ position:relative; }

  

  


 html * *{


 position:relative;


 } 

It seems to apply anything that is an immediate child of <body> Now the real problem is, if I do something like:
css Code:
Original - css Code html * * *{ position:relative; }

  

  


 html * * *{


 position:relative;


 } 

It seems to only apply the relative positioning to grandchildren of <body>. That is to say children of children of <body>. IE:
html4strict Code:
Original - html4strict Code <body> <div><!-- not relative --> <p><!-- is relative --> </div> </body>

  

  


 <body>


 <div><!-- not relative -->


 <p><!-- is relative -->


 </div>


 </body> 

Is there way to easily set it up so that everything is relatively positioned?

Hello

I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good.

Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way).

I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail.

Is there a way to make this work in IE?

Is there maybe another way to make this without absolutely-positioning the fourth DIV?

Cheers,
Calius

Sample code follows:
Code:

<html>
<body>

This is a test<br />
<div style="width:400px; position:relative; border:1px solid red;">
	<div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div>
	<div style="border:1px solid blue; margin-bottom:16px;">1</div>
	<div style="border:1px solid blue; margin-bottom:16px;">2</div>
	<div style="border:1px solid blue;">3</div>

</div>
This is a test<br />
</body>
</html>

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

I want products listed horizontally first, then move to next line if there is to many. But instead, each product listed on a new line.

http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4

PHP Code:
/* products.css */
#products {    float: left; }
#products .productbox    {    background-color: #ececec; width: 150px; padding: 10px;    margin-top: 10px;    }
#products .productfooter {    background: url(../images/arrow.gif) 20px 0 no-repeat; padding-left: 58px; margin-bottom: 10px;}
#products img#product {    width:150px; height:150px; border: 0px;    } 

Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes:

Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green.

Screenshot:



And when minibuttons is hovered over:



But as you can see, it moves the login div too.

Appropriate CSS:

Code:

div.logo
{
	background-image: url("/images/logo.gif");
	border: solid 1px #808080;
	border-bottom: none;
	border-top: none;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	width: 775px
}

div.login
{
	border: solid 1px #00ff00;
	height: 75px;
	left: 625px;
	position: relative;
	top: -18px;
	width: 145px
}

div.minibuttons
{
	border: solid 1px #0000ff;
	left: 570px;
	position: relative;
	top: 70px;
	width: 48px
}

div.minibuttons:hover
{
	left: 570px;
	position: relative;
	top: 1px;
	width: 48px
}

Appropriate HTML:

Code:

		<div class="logo">
			<div class="minibuttons">
				<a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a>
				&nbsp;<a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a>
			</div>
			<div class="login">
				<form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()">
					<fieldset class="login">
				  		<input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br />
			  			<input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br />
						<select class="service" name="service">
							<option value="2082">cPanel</option>
						</select>
			  			<input type="submit" name="login" value="Login" class="button" />
					</fieldset>
				</form>
			</div>
		</div>

Appropriate JS:

Code:

if (document.images)
{
	var flipped = new Array();
	for(i=0; i< inames.length; i++)
	{
    	flipped[i] = new Image();
		if(i <= 7)
	    flipped[i].src = "/images/roll/"+inames[i]+".gif";
		if(i > 7 && i <= 9)
	    flipped[i].src = "/images/full/"+inames[i]+".gif";
	}
}

function over(num)
{
	if(document.images)
	{
    	revert[num] = document.images[inames[num]].src;
		document.images[inames[num]].src = flipped[num].src;
	}
}
function out(num)
{
	if(document.images)
	document.images[inames[num]].src = revert[num];
}

Any ideas people?

Thanks,
Danny.

Hi,

I have spend 2 days trying to figure out why this happens, and i just cant figure it out...

My links in my main menu moves 1 - 3px to the right in IE explorer at mouse-over....but only when i set a: hoover to change background color.... if i only change text color with a : hoover its fine.

Anyway i just realized that this was a complete waste of time since i'm not allowed to give my URL for people to see the problem...

Cheers,

Bukit1

Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it.

link:
http://www.net-force.com/hotest/a1.html

any suggestions how to fix it so it displays properly in IE? thx!

Hi,

I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out.

All help is appreciated. Thanks.

E.