CSS - Position Absolute Within Block Level Element

ss

I have an unordered list that I am using as a horizonal nav with the list items displayed inline.
Code:

<!--
***CSS***
li{display:inline;}
-->
<ul>
  <li><a href="#">Menu1</a> <li>
  <li><a href="#">Menu2</a> <li>
</ul>

produces
Code:

Menu1 Menu2

Easy enough....

Now, I'm also trying to use this image replacement technique that would hide the text and instead use an image instead.

Example:
Code:

#ID_OF_ELEMENT {
    padding: HEIGHT_OF_IMAGEpx 0 0 0;
    overflow: hidden;
    background-image: url("hello_world.gif");
    background-repeat: no-repeat;
    
    height: 0px !important;
    height /**/:HEIGHT_OF_IMAGEpx;
}

This technique, however, was designed for block level elements such as headers. Otherwise, I would have to make the 'a' element block level, then give it a specific width (the width of the image that's replacing the text). The problem with that is now the menu has block level elements and are now stacked on top of each other instead of inline.

I've tried using SPANs to hack around it, but I can't seem to get it to work.

Is there any way through CSS to either:
a) Allow block level elements to display inline, or
b) Set a specific width to an inline element?

Thanks in advance

I read the CSS Mastery book (Andy Budd). I think this is one of the greatest CSS book on the market but sometimes is hard to understand.
I don't understand what the author say, he http://img24.imageshack.us/img24/4705/cssx.jpg

Ok, I have this code:

Code:

<div>
some text
<p>Some more text</p>
</div>

"some text" don't have an element, and is treated like a paragraph. Ok, I add another text without element (some text2)..

Code:

<div>
some text
<p>Some more text</p>
some text2
</div>

Now, what this mean ? The same thing is true for "some text2" ? "some text2" is treated like a paragraph ?
Please, someone explain me a bit what the author want to say in the attached image file.

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;

}

Is it possible mix inline and block-level elements directly together??

For example:

Code:

 <div....>

<input..... />    <-- inline element
<ul>...     <-- block element

</div>

Thank you

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.

The year is 2009, and surely there is a way to such a simple thing as displaying photos of unknown size in the H-center of a Div--without running off the screen. Oh wait, there isn't. The problem:

Given unknown picture size,

1) if I don't specify absolute positioning (or fixed), I can center it but then it floats to the top of the parent which looks silly.

2) If I do specify absolute (or fixed) positioning, I can't center it.

Please prove me wrong. I just want a simple slide-show page without telling folks what to set their resolution at, or how big the pictures need to be.

I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes:

Code:

<style type="text/css">
  .container {
    display: inline-block;
  }

  .title {
    align: left;
  }

  .subtext {
    align: right;
  }
</style>

<div class="container">
  <div class="header">
    <div class="title">Title Goes Here</div>
    <div class="subtext">Align Me Right</div>
  </div>
  <div class="content">
    Variable content which container needs to size dynamically to fit.  Could be 300px wide, could be 500px wide...
  </div>
</div>

What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content
And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks!

the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored?

Thanks in advance!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Groups</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#navbar {
	position: relative;
	z-index: 10000;
}

#globalNavWrapper {
	position: relative;
	width: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	z-index: 10;
}

#globalNavWrapper #nav ul {
	list-style: none;
	z-index: 20;
}

#globalNavWrapper #nav li {
	float: left;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	display: inline;
	height: 24px;
}

#globalNavWrapper #nav li.navpadleft {
	border-left: 1px solid #999;
}

#globalNavWrapper #nav li a {
	display: block;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	height: 0;
	width: 100%;
	padding-top: 24px;
	overflow: hidden;
}

#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }

#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }

#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }

#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }

#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }

#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }

#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }

#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }

#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }

#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }

#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }

#globalNavWrapper #nav .subnav {
	position: absolute;
	margin: -1px;
	border: 1px solid #999;
	background: #fff;
	width: 150px;
	z-index: -10;
	display: none;
	overflow: hidden;
}

#globalNavWrapper #nav .subnav li {
	clear: both;
	float: none;
	display: block;
	background: none;
	line-height: 18px;
	height: 18px;
	width: 150px;
	list-style: none;
	border: 0;
}

#globalNavWrapper #nav .subnav li.hr {
	border-bottom: 1px solid #999;
}

#globalNavWrapper #nav .subnav li a {
	background: #fff;
	padding: 0 0 0 5px;
	width: 1000px;
	height: 18px;
	color: #000;
	text-decoration: none;
}

#globalNavWrapper #nav .subnav li a:hover {
	background: #e4f5e5;
	color: #009f00;
}

#globalNavWrapper #nav li iframe {
	display: none;
	z-index: -1000;
	height: 220px;
	width: 151px;
	-moz-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
</style>
</head>

<body>

	<div id="globalNavWrapper">
		<ul id="nav">
			<li id="nav_home" class="navpadleft">
				<a href="#">Home</a>
			</li>
			<li id="nav_myXXXX">
				<a href="#">My XXXX</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_people">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			<li id="nav_groups" class="active">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_tnn">
				<a href="#">News Network</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_green">
				<a href="#">Green Living</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_ecards">
				<a href="#">E-Cards</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_shopping">
				<a href="#">Shopping</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_petit">
				<a href="#">Petite</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_don">
				<a href="#">Don</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
		</ul>
	</div>

<script type="text/javascript">
	startList = function() {
		var navRoot = document.getElementById("nav");
		var is_MSIE = false;
		if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;

		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
				node.onmouseover = function() { this.className += " over"; }
				node.onmouseout = function() {
					this.className = this.className.replace(" over", "");
					this.className = this.className.replace("over", "");
				}

				for(j=0; j<node.childNodes.length; j++) {
					if(node.childNodes[j].nodeName=="UL"){
						if(is_MSIE) {
							var iframe = document.createElement('<iframe frameborder="0">');
							iframe.style.position = 'absolute';
							iframe.border = '0';
							iframe.frameborder = 0;
							iframe.style.backgroundColor = '#f00';
							iframe.src = 'about:blank';
							node.appendChild(iframe);
						}
					}
				}
			}
		}
	}
	startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.

	document.getElementById('nav').style.zIndex = 2000;
</script>

</body>
</html>

IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>

<style type="text/css">
#elButton a  {

	color: #000000;
	font-size:10px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
	/*border:1px  outset aqua;*/
/*	background-color:#00ffff;*/
	border-right-style:solid;
	border-right-width:1px;
	width: 110px;
/*	padding: 3px 5px;*/
	/*margin: 1px;*/
	
}

</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487" 
align="right" bgcolor="#00eaea" border="0">
  
  <tr>
    <td valign="top" align="middle">
      <div id="elButton">
	<a href="#">Java Script</a>
      <a href="#">Dynamic HTML</a> 
      <a href="#">Server Side</a> 
      <a href="#">Client Side</a> 
  </div></td></tr></table></p>


</body>
</html>

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

I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he
http://www.goldenturmeric.com/layout.php

The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know.

Anyone's help is much appreciated.

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

Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it?