CSS - Css Trouble, Relative Dive Pushes Menu Down

I now am fixing it with tables....
thanks for the forum!

[IMG]cater-express dot com/IE7.png[/IMG]

An image of IE7 and IE6 of my newly relaunched website - I actively have:
html,body {
text-align: center
}
#content {
width: 400px;
margin: 0 auto;
text-align: left
}
</style>
__________
it does not work...
please help bring content up to top in "content"

______
I wish I could just do all the cooking and not the coding!
Thanks for any help!

I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down.

The page is here

Any ideas?

Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness):

Code:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

/* First Level */
li {
  float: left;
  position: relative;
  width: 10em;
  }
  
li#first {
	border-left-width: 2px;
	}

li#last {
	border-right-width: 2px;
	}

/* Second Level -- Drop Downs */
li ul {
  display: none;
  position: absolute; 
  top: 100%;
  left: 0;
  background: url(../images/backgroundvert.gif) bottom left no-repeat;
  padding: 3px 0 3px 8px;
  border-right: solid 1px #777777;
  }

/* Reset for all non-IE Browswers*/
li > ul {
	top: auto;
	left: auto;
	}

/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

#nav a {
	font-weight: bold;
	color: #149AF1;
	font-size:13px; 
}

#nav a {
	text-decoration: none;
}

/* Drop Down Menu Links */
#nav li li a {
	display: block;
	font-weight: normal;
	color: #149AF1;
	padding: 0.2em 10px 0 15px;
	background-image:url(../images/bullet.gif);
	background-repeat:no-repeat;
}

#nav li li a:hover {
	padding: 0.2em 10px 0 15px;
	background-image:url(../images/bullet2.gif);
	background-repeat:no-repeat;
	text-decoration: underline;
}

#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}

.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}

tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html
tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css

For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg).

Neither times does it actually "rollover". What am I doing wrong?

Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

Hello. After days of searching, I have found my ideal menu system. I am trying to mimic it with some minor changes, due to the layout I already have for my website. I think the biggest problem is the fact that my second level drop down menu needs to be contained inside my first level menu boxes. These boxes also expand based on screen width.

Here is the barebones version of Stu Nicholl's 'Simple Drop Down Menu':
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">

/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}

/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>

</head>

<body>
<div class="menu">

<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a  href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>


</div>

</body>
</html>

And here is my implementation of it. I was thinking the problem could be with the absolute positioning, but I really don't know anymore...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html {
	margin:0;
	padding:0;
}

body {
	margin: 0;
	padding: 5px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%;
	background-color: #eee;
	color: #000;
}

.clear {
	clear:both;
	font-size:0;
	line-height:0;
}


/* Top Navigation */


	#topNav {
		margin: 10px 0px;
		border: 1px solid #ff0;
	}

	#searchBox {
		margin: 0;
		padding: 0;
		float: left;
		width: 150px;
		height: 125px;
		border: 1px solid #000;
		background: #fff;
		text-align: center;
	}

	#nav {
		margin: 0px 0px 0px 155px;
		padding: 0;
		border: 1px solid #0f0;
	}

	#nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	#nav li {
		
		margin-left: 8px;
		float: left;
/*
		position: relative;
		z-index: 100;
*/
		display: inline;
		width: 23%;
		height: 125px;
		border: 1px solid #000;
		background-color: #235;
		background-repeat: no-repeat;
		background-position: 50% 100%;
	}

	#nav table {
/*
		position:absolute;
		z-index:80;

*/
		border-collapse: collapse;
		left: -1px;
		top:25px;
	}

	#nav a {
		display: block;
		font-size: 1.5em;
		color: #FFF;
		background: #c7013f;
		text-decoration: none;
		text-align: center;
	}

	#nav ul li:hover a, #nav ul a:hover {
		background-color: #235;
	}

	#nav ul ul {
		margin: 0;
		padding: 0;
		visibility: hidden;
		border: 1px solid #0f0;
/*
		position: absolute;
*/
		}

	#nav ul ul li {
		margin: 0 auto;
		height: 1em;
		width: 95%;
	}


	#nav ul li:hover ul, #nav ul a:hover ul{
		visibility: visible;
	}

</style>

<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>


<div id="topNav">
	<!-- Search Box -->

	<div id="searchBox">
		Welcome, <b>John Doe</b>!
		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
	  	<form action="" name="search">
	    		<input type="text" size="14" name="searchQuery" />
			
	    		<input type="submit" value="Search" />
	  	</form>
	</div>

	<div id="nav">	
		<ul>
		<li>
			<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li>
					<a href="#">Charter</a>
				</li>
				<li>
					<a href="#">Committee</a>
				</li>
				<li>
					<a href="#">Schedule</a>
				</li>
				<div class="clear">&nbsp;</div>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li>
			<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li>
					<a href="#">Charter</a>
				</li>
				<li>
					<a href="#">Committee</a>
				</li>
				<li>
					<a href="#">Schedule</a>
				</li>
				<div class="clear">&nbsp;</div>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	
		<li>
		<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li>
					<a href="#">Charter</a>
				</li>
				<li>
					<a href="#">Committee</a>
				</li>
				<li>
					<a href="#">Schedule</a>
				</li>
				<div class="clear">&nbsp;</div>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li>
		<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li>
					<a href="#">Charter</a>
				</li>
				<li>
					<a href="#">Committee</a>
				</li>
				<li>
					<a href="#">Schedule</a>
				</li>
				<div class="clear">&nbsp;</div>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	<div class="clear">&nbsp;</div>
	</ul>
<div class="clear">&nbsp;</div>
	</div>

</div>

</body>
</html>

Sorry for the lengthy code, but it was the simplest way to explain my exact situation.

Thanks for any help you can give me!

Hi,
I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more.
Cheers,
Ziggy

Hey guys,

Here's my problem:

http://www.3rdcoastpc.com/moonstoys/

Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design.

Here's my css:
http://www.3rdcoastpc.com/moonstoys/main.css

and the HTML:
http://www.3rdcoastpc.com/moonstoys/index.html

Thanks in advance!
Dustin

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}


#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}



#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

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




</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time

Hi Guys,

I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted.

The footer is a simple div that has centered text stating "page posted by $membername on $date"

What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page).

Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page.

Ideas?

Hello,

I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll.

I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail.

I am stuck. Any ideas on how to negate the pussing of a margin?

I am trying to create an image that stays in one place no matter how large the window is. This seems to work great in FF but when i open it in IE the image is not where i positioned it! Has anyone ever seen this? Thanks.
Code:

#apDiv4 {
    position:relative;
    left:370px;
    top:328px;
    width:154px;
    height:130px;
    z-index:1;
    clip: rect(auto,auto,auto,0px);
    margin-left: auto;
    margin-right: auto;
}

Hi,


Code can be found below and output as it is currently @ http://www.generating-sets.com/index.new.php

Anyway, I have the box with the id of 'newsbar'. My problem is i want this box in the following posistion:

It should sit on the bottom footer bar and be in between the two sidebars. The code below makes it overlap the two sidebars.

So how could i make the posistion relative to the two side bars so it nests in the middle? All this CSS is doing my head in, but for glory without tables! lol

Charlie



PHP Code:
 h1 {font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h2 {font-size: 1.3em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h3 {font-size: 1.2em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h4 {font-size: 1.1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h5 {font-size: 1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

a:link {color: #ffffff;
text-decoration: none;}

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

a:visited {
    color: #ffffff;
text-decoration: none;}    

body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em}

div#header {padding: 2%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-bottom: solid #ffffff 1px}

div#navbar {padding: 0%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 0px;
border-bottom: solid #ffffff 1px}

div#newsbar {padding: 1%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 0px;
border: 2px #ffffff solid;
position: relative;}

div#footer {padding: 0%;
text-align: center;
color: #ffffff;
clear: both;
background-color: #0e2e3b;
border-top: solid #ffffff 1px}

div#maincontent {padding: 2%;
text-align: justify;
margin-left:  150px;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-right: solid #ffffff 1px;
border-left: solid #ffffff 1px}

div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 150px;}

div#rightcolumn {padding: 2%;
float: right;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 10px;} 

I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers.

As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems:

1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated.

2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers.

3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow.

Original site (tables): http://www.gpleague.com
New test site (css): http://www.gpleague.com/cssp.htm
Css file: http://www.gpleague.com/csstest.css