Menu alignment problem

kade119 · 03-20-2007, 02:01 PM

When I try to set a top maring or top padding for the menu it pushes my #container downwards, and I need the menu to lay on top of the bgimage a little bit.. anyone know where they are conflicting?

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="screen">
<!--
@import url(css/dropmenu.css);
img {border:0}
a:link {text-decoration:none}

-->
</style>
<link rel="stylesheet" href="/css/p/dropdowndemo4msie.css" type="text/css" />
<script type="text/javascript" src="/articles/dropdown/styles4msie.js"></script>

<script type="text/javascript" src="/articles/dropdown/js4msie.js"></script>
<!--[if IE 5]>
<style type="text/css" media="screen">
* html #DropDownMenu li ul {top:2.2em}
* html #DropDownMenu li ul li a {line-height:1.4em;height:1.4em}
</style>
<![endif]-->
</head>
<body onload="TJKSetEvents()">
<noscript>
<!--[if IE 5]>
<style type="text/css" media="screen">
* html #DropDownMenu li ul {top:0}
* html #TJKDDM #current ul {top:0}
* html #DropDownMenu ul a:hover {line-height:17px}
</style>
<![endif]-->
</noscript>
</head>

<body>





<div id="container">
<ul id="DropDownMenu">
	<li><a href="javascript:;">Home</a></li>
	<li class="trigger"><a href="javascript:;">About Us</a>
		<ul>

			<li><a href="javascript:;">Who We Are</a></li>
			<li><a href="javascript:;">Introduction</a></li>
		</ul>
	</li>
	<li class="trigger"><a href="javascript:;">Our Portfolio</a>

		<ul>
			<li><a href="javascript:;">Graphic Design</a></li>
			<li><a href="javascript:;">Imaging</a></li>
			<li><a href="javascript:;">Web Development</a></li>
			<li><a href="javascript:;">Programming</a></li>
		</ul>
	</li>
	<li class="trigger"><a href="javascript:;">Services</a>
		<ul>
			<li><a href="javascript:;">Graphic Design</a></li>
			<li><a href="javascript:;">Imaging</a></li>
			<li><a href="javascript:;">Web Development</a></li>
			<li><a href="javascript:;">Programming</a></li>
		</ul>
	</li>
	<li class="trigger"><a href="javascript:;">Support</a>
		<ul>
			<li><a href="javascript:;">Contact Us</a></li>
			<li><a href="javascript:;">Downloads</a></li>
		</ul>
	</li>
</ul>
</div>
</div>
<!-- /menu -->
</body>
</html>

Code:

/* all lists */
#DropDownMenu a,
#DropDownMenu a:link,
#DropDownMenu a:visited {
	font-size:.9em;
	color:#666666;
	font-family: arial, "myriad-pro";
}

#DropDownMenu,
#DropDownMenu ul {
	width:750px;
	background-image: url(dropmenu.png); 
	background-repeat: no-repeat; 
}

/* Nested ULs */ 
#DropDownMenu li ul {
	position:absolute;
	top:1.2em;
	left:-900px
}
/* All LIs */
#DropDownMenu li {
	float:left;
	width:auto;
	margin:0;
	padding:0;
	list-style-type:none;
	font-weight:600;
	border-bottom:0px;
}
#DropDownMenu li a {
	padding:.1em .4em;
	height:2em;
	color:#999999
	line-height:1em;
	border-bottom:0px;
}
#DropDownMenu li a:hover {
	background-image:none;
	color:#555555
	border-bottom:0px
}
#DropDownMenu li ul li a {
	line-height:1.7em;
	height:1.7em;
	font-weight:400;
	border:none;
	color:#D3D3D3;
	background-image:none;
}

#DropDownMenu li ul li a:hover
 {
 	color:#FFFFFF;
	}
/* we reset the margin for the children */
#DropDownMenu li ul li {
	margin:0;
	border-bottom:0;
	border-right:0px
}
#DropDownMenu li:hover ul,
#DropDownMenu li.msieFix ul {left:9px}


html>body #container
  { 
	position: relative;
	clear: none;
	width: 700px;
	margin: 0 auto;
	height: 635px;	 
	clear: none;
	height: 635px;
	background-image: url(bg1page.jpg); 
	background-repeat: no-repeat; 
	background-position: center; 
	}

Taltos · 03-20-2007, 02:23 PM

What element are you adding the padding or margin to? That could have an effect.

kade119 · 03-20-2007, 07:44 PM

#dropdownmenu {
padding: 25px 0 0 0;
}

Jackassboy · 03-20-2007, 07:58 PM

hmm... try adding px to the end of your 0's

#dropdownmenu {
padding: 25px 0px 0px 0px;
}

this helps better specify what you want. as taltos said, without it, the browser doesnt know what to do if there is nothing there.

if you didn't know, px is for pixel ;D

Taltos · 03-21-2007, 10:36 AM

Also, if you add 25px top padding to #dropdownmenu then it will push the menu down 25px. Since the menu is the first thing in your #container, it will push everything else down 25px also. If you have anything up right now, give us a link or post a screen shot so we can see the problem. A lot of times, seeing it makes all the difference in the world to a quick answer.

kade119 · 03-21-2007, 11:46 AM

well right now , i just check ie7 and nothing at all displays :''(\
when i del the ie5 re-format script it works in ie7.. so ig uess i'll leave that off.. but the one thing that doesn't work is the drop menu in ie7 .. hmmm... any thoughts?

Taltos · 03-21-2007, 12:07 PM

Not really. Not without seeing it in action and seeing the problem. The web is a visual media (among other things) and not being able to see the problem, I'm not sure what to look at in the code. A quick scan of the code and the menu looks like one of the many variations on the CSS dropdown style menu.

kade119 · 03-21-2007, 01:12 PM

sorry about that

http://www.ftrmi.com/sample

look at in firefox and you will see what im aiming at , ty

Jackassboy · 03-21-2007, 01:14 PM

ok..hmm where is the dropdown menu?

kade119 · 03-21-2007, 01:30 PM

you can't see it? roll over the main nav bar.. ::crap:: what browser you using?

Taltos · 03-21-2007, 02:08 PM

Ok, I took a look with IE7 and it looks like the blue background image is shifted to the right too far. In FF it looks OK. In IE6 it is completely messed up. I don't see anything but the menu and the dropdown part is too high and overlays the main level of the menu.

It also looks like there is javascript that we don't have that is part of the menu. There are definitely things missing from here that must be setup in the javascript. I much prefer the CSS menus that don't use any javascript. Stu Nicholls has a nice one that I like. It works a little differently than your current one. You might check it out and its variations out at www.cssplay.co.uk and see if one of them will work. You have to ask permission to use them.

kade119 · 03-21-2007, 02:20 PM

do you think the menu i am creating can created in just css?

kade119 · 03-21-2007, 03:10 PM

ok, i got another menu setup, but is there a way to overlay my buttons over part of my bg?

http://www.ftrmi.com/sample

Jackassboy · 03-21-2007, 03:21 PM

Quote:

Originally Posted by kade119

you can't see it? roll over the main nav bar.. ::crap:: what browser you using?

ah, isee it. in firefox...it looks totally normal

kade119 · 03-21-2007, 03:25 PM

hehe.. yeah man i love firefox....

i just redid the whole thing in css, so now it is visible in IE and FF but i am not sure how to overlay the menu panel on top of my bg... b/c like above it pushes my content down... any ideas.. i believe all the css is in my source now

http://www.ftrmi.com/sample

Taltos · 03-21-2007, 04:57 PM

You have a few little problems.

1. You never open the body. You don't have a <body> tag. You close it but you don't open it.

2. You open a div with id of content but don't close it.

3. In bbody.css you hvae a #content style but it has two heights. One is 800px and one is 582px.

4. The rounded blue background that is displayed for the dropdown isnot in the right place. It is too high in IE7 and covers the first layer of your menu. I think you can fix that by changing your ".menu ul ul" definition to slide it down a little bit. Try adding something like this:

background-position: 0px 10px;

10px is probably not the right number of pixels to shift it down. You will have to play a bit to get the right number.

To move the menu into place you will need to add to the .menu definition. Since the entire site it a background and the menu, try adding to the .menu like this:

top: 200px;
left: 175px;

Just like the previous suggestions, these numbers are just really rough guesses. You will have to play with the numbers to make them work.

Good Luck

kade119 · 03-21-2007, 09:58 PM

taltos, i wanna say thanks man .. your quick on the css.. i correct everything and almost all dandy except for firefox .. its a little to high .. is there a way to adjust for ie and firefox? im loading files now

hey also do you think its a bad idea to do alot of the design in one image? i just thought most of it was background anyways.. so i thought i would make it easier

chicgeek · 03-21-2007, 10:00 PM

IE hack. Something along these lines:

Quote:

Backslash hack for IE 5.x broken box model

A combination of width and padding on the same element is very well known to produce broken layouts in IE 5.x. Box model hack is widely used and can be stripped down to a few lines.

someselector {
padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;
}

This will give as an element which is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.

Pasted from here.

I hate having to hack for IE, but sometimes you just have to.

kade119 · 03-21-2007, 10:27 PM

so i need to insert those on the definition that is giving me problems?

what does that actually do?

chicgeek · 03-21-2007, 10:42 PM

Okay, forgive me, I thought you knew CSS - I didn't look at the thread too closely.

Ignore that for now. If I remember, tomorrow I'll give you some actual code to remedy your situation.