Dropdown Menu CSS Position

datzent83
datzent83 used Ask the Experts™
on
I have a website which has two separate CSS files. the main.css and nav.css. The nav.css does not work right in FireFox. The drop-down is not aligned properly. It is aligned left of the table. However, if I remove margin:0 auto; from my main.css the drop-down is then aligned properly, but then my whole website is aligned to the left instead of center.

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: ;
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 0px solid black;
border-bottom-width: 0;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #fff;
width: 200px; /* default width for menu */
}

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

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;

}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
A link to the page, parsed HTML or your markup will make this much easier. It is hard to debug by simply looking at the CSS.

:)

Author

Commented:
The website is not live, therefore cannot provide a link. Here is the HTML code though:


<div id="headerDiv">
		<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
			<tr>
				<td style="width: 90px">
					<a href="index.html">
					<img alt="" height="105" longdesc="" src="images/logo.gif" width="90" /></a>
				</td>
				<td id="navCell">
					<a href="#">Home</a> &nbsp;|&nbsp; 
					<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a>&nbsp; |&nbsp; 
					<a href="#">Support</a>&nbsp; |&nbsp; Hey <a href="#" class="orrangeFont">Igor</a> (2
					<a href="#"><img class="evelope" alt="" height="13" src="images/evelope.gif" width="21" /></a>)</td>
			</tr>
		</table>
	</div>

Open in new window

Top Expert 2011

Commented:
Thanks.

Could you also post the parsed HTML? Just open your webpage in whatever browser you are using, right click and hit View Source, copy all that and paste it as well.

Thanks!
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
I think it's better to rewrite markup, have a look how to make it simple:
http://www.w3schools.com/css/css_navbar.asp
GlobaLevelProgrammer

Commented:
make sure you use for that ddl:
position: absolute;

Author

Commented:
Here is the parsed HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="en-us" http-equiv="Content-Language" />
<title></title>

<link href="css/mainStyles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/anylinkmenu.css" />

<script type="text/javascript" src="js/menucontents.js"></script>

<script type="text/javascript" src="js/anylinkmenu.js">

</script>

<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>

</head>

<body>

<div id="container">
	<div id="headerDiv">
		<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
			<tr>
				<td style="width: 90px">

					&nbsp;</td>
				<td id="navCell">
					<a href="#">Home</a> &nbsp;|&nbsp; 
					<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a>&nbsp; |&nbsp; 
					<a href="#">Support</a>&nbsp; |&nbsp; Hey <a href="#" class="orrangeFont">You</a> (2
					<a href="#">

					<img class="evelope" alt="" height="13" src="images/evelope.gif" width="21" /></a>)</td>
			</tr>
		</table>
	</div>

</div>


</body>

</html>

Open in new window

Author

Commented:
The position is set to absolute.
Top Expert 2011

Commented:
Could you post the mainStyles.css as well?

Author

Commented:
Here is the mainStyles.css...
body 
{
	margin: 0 auto;
	font-family: comfortaa;
	font-size: 12pt;
	font-weight: normal;
	color: #384d5a;
	overflow-x:hidden; 
	overflow-y: scroll;
	height: 100%;	
}

a:link {border: 0px; text-decoration: none; color: #4b4b4b}
a:visited {border: 0px; text-decoration: none; color: #4b4b4b}
a:active {border: 0px; text-decoration: none; color: #4b4b4b}
a:hover {border: 0px; text-decoration: none; color: #4b4b4b}

@font-face 
{
	font-family: comfortaa;
	src: url('../fonts/Comfortaa-Regular.ttf');
}

html, body, #container 
{
	width: 900px;
	height: 100%; 
	min-height: 100%;
	margin: 0; 
	padding: 0; 
	margin:0 auto;
}

body > #container 
{ 
	height: auto; 
	min-height: 100%; 
}

#content { 
	padding-top: 3em;
	padding-bottom: 3em; 
}

#headerDiv
{
	height: 105px;
	width: 100%;
	padding: 0px;
	background-image:url('../images/header_bg.gif');
	background-repeat: repeat-x;
}

#footer 
{ 
	clear: both; 
	position: relative; 
	z-index: 10; 
	height: 3em; 
	margin-top: -3em; 
	text-align: center; 
}

#logoCell
{
	width: 90px;
	text-align: left;
	vertical-align: top;
}

#navCell
{
	font-family: comfortaa;
	font-size: 18pt;
	color: #4b4b4b;
	text-align: right;
	padding-right: 8px;
	padding-top: 10px;
	text-decoration: none;
}

#horizontalDottedLine
{
	background-image: url('../images/horizontal_dotted_31x16.gif');
	background-repeat: repeat-y;
}

.handcursor{
	cursor:hand;
	cursor:pointer;
}

.headerOrrangeFont
{
	color: #ff8c00;
	font-size: 22pt;
}


.orrangeFont
{
	color: #ff8c00;
}
a.orrangeFont {	color: #ff8c00; }
a.orrangeFont:hover { text-decoration: underline; }

.greenFont
{
	color: #677e23;
}

.evelope
{
	vertical-align: middle;
}

img
{
	border-width: 0;
}

Open in new window

Author

Commented:
Here is the test link. Roll over Info in IE will work just fine. In FF it will align to the  left: http://users.rcn.com/datzent83/site/test.html 
Top Expert 2011

Commented:
I can see how this has been annoying you! Still working on it....

Author

Commented:
Annoying is an understatement! :) Been working on it for the past few days and still cant figure it out. I've attached the files here if you need them.  nav.zip
Top Expert 2011

Commented:
I got IT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (posting in a second)
Top Expert 2011

Commented:
At line 24 of your CSS you have:

html, body, #container {
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    padding: 0;
    width: 900px;
}

Open in new window


Remove the HTML from it

body, #container {
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    padding: 0;
    width: 900px;
}

Open in new window


and you are golden.
Top Expert 2011

Commented:
Here is the screenshot.

 Screenshot with correct nav
Top Expert 2011

Commented:
Actually looking at that again, you don't want your body going to 900px.

I would also remove the body from that element.

#container {
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    padding: 0;
    width: 900px;
}

Open in new window


Declare your body info elsewhere.

Author

Commented:
Yes... this does work, but this code is also used for by bottom sticky footer. Which makes the footer always stick to the bottom of the page. Unless we can somehow modify the footer to always stick to the bottom?
Top Expert 2011

Commented:
Can you define those elements somewhere else, but exclude the width? I think the width on the HTML element is what is doing to the damage. I am mobile right now so I can't check.

Author

Commented:
I can try defining those elements separately. Any suggestions though?
Top Expert 2011

Commented:
Try this:

html, body, #container {
  height: 100%;
  margin: 0pt auto;
  min-height: 100%;
  padding: 0;
}

Open in new window


#container {
  width: 900px;
}

Open in new window

Author

Commented:
That worked. But now I have to scroll to see the footer. Its like something is in the middle of the white space.
Top Expert 2011

Commented:
Try removing the min-height attribute. Sorry I am on an iPad. I will check it in just a minute.

Author

Commented:
Where do I remove the min-height attribute?
Top Expert 2011

Commented:
html, body, #container {
  height: 100%;
  margin: 0pt auto;
  [i]min-height: 100%;[/i] REMOVE
  padding: 0;
}

Open in new window


Remove the specified line above.

Could you upload the version you are using so I can help debug this footer issue?
Top Expert 2011

Commented:
So you want the footer at the bottom, right? It is, but the menu javascript is putting a div at the bottom (anylinkshadow) and that is keeping the div from staying at the bottom of the page.

The reason you are getting the scroll-bar is because of the min-height attribute on the #container div.

Do you want that footer all the way at the bottom of the page?
Top Expert 2011
Commented:
Alright, I have one more fix before I hit the road this weekend.

To make the footer stick to the bottom, I would recommend making a footer that is 100% the width, and THEN making a footer that is 900px inside of that.

Here is the CSS and the markup to help you. Note that the footer has a background and a border (I pulled it from another site I did). This is so you can see what it is doing. You can remove the colors and borders from the CSS easily.

CSS
#footer {
     background-color: #F0F0F0;
     border-top: 1px solid #E3E3E3;
     float: left;
     height: 3em
     position: relative;
     width: 100%;
}

#footer_inner {
     height: 3em;
     margin: 0pt auto;
     text-align: center;
     width: 900px;
}

Open in new window


Markup

<div id="footer">
  <div id="footer_inner">
footer
  </div>
</div>

Open in new window


Edit the colors of the CSS however you like. Here is a screenshot.

I will monitor this as I can over the weekend. Heading out of town.

BUT, we did get the NAV menu working, so WOOHOO!

 Screenshot

Author

Commented:
Great help! Thakn you :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial