Avatar of datzent83
datzent83Flag for United States of America

asked on 

Dropdown Menu CSS Position

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

CSS

Avatar of undefined
Last Comment
datzent83
Avatar of jonahzona
jonahzona
Flag of United States of America image

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.

:)
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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

Avatar of jonahzona
jonahzona
Flag of United States of America image

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!
Avatar of SSupreme
SSupreme
Flag of Belarus image

I think it's better to rewrite markup, have a look how to make it simple:
http://www.w3schools.com/css/css_navbar.asp
Avatar of GlobaLevel
GlobaLevel
Flag of United States of America image

make sure you use for that ddl:
position: absolute;
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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

Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

The position is set to absolute.
Avatar of jonahzona
jonahzona
Flag of United States of America image

Could you post the mainStyles.css as well?
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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

Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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 
Avatar of jonahzona
jonahzona
Flag of United States of America image

I can see how this has been annoying you! Still working on it....
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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
Avatar of jonahzona
jonahzona
Flag of United States of America image

I got IT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (posting in a second)
Avatar of jonahzona
jonahzona
Flag of United States of America image

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.
Avatar of jonahzona
jonahzona
Flag of United States of America image

Here is the screenshot.

 User generated image
Avatar of jonahzona
jonahzona
Flag of United States of America image

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.
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

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?
Avatar of jonahzona
jonahzona
Flag of United States of America image

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.
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

I can try defining those elements separately. Any suggestions though?
Avatar of jonahzona
jonahzona
Flag of United States of America image

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

Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

That worked. But now I have to scroll to see the footer. Its like something is in the middle of the white space.
Avatar of jonahzona
jonahzona
Flag of United States of America image

Try removing the min-height attribute. Sorry I am on an iPad. I will check it in just a minute.
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

Where do I remove the min-height attribute?
Avatar of jonahzona
jonahzona
Flag of United States of America image

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?
Avatar of jonahzona
jonahzona
Flag of United States of America image

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?
ASKER CERTIFIED SOLUTION
Avatar of jonahzona
jonahzona
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of datzent83
datzent83
Flag of United States of America image

ASKER

Great help! Thakn you :)
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo