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;
}
Last Comment
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> |
<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a> |
<a href="#">Support</a> | 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>
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!
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!
I think it's better to rewrite markup, have a look how to make it simple:
http://www.w3schools.com/css/css_navbar.asp
http://www.w3schools.com/css/css_navbar.asp
make sure you use for that ddl:
position: absolute;
position: absolute;
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">
</td>
<td id="navCell">
<a href="#">Home</a> |
<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a> |
<a href="#">Support</a> | 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>
ASKER
The position is set to absolute.
Could you post the mainStyles.css as well?
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;
}
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
I can see how this has been annoying you! Still working on it....
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
I got IT!!!!!!!!!!!!!!!!!!!!!!!!
At line 24 of your CSS you have:
Remove the HTML from it
and you are golden.
html, body, #container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
Remove the HTML from it
body, #container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
and you are golden.
Here is the screenshot.
Actually looking at that again, you don't want your body going to 900px.
I would also remove the body from that element.
Declare your body info elsewhere.
I would also remove the body from that element.
#container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
Declare your body info elsewhere.
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?
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.
ASKER
I can try defining those elements separately. Any suggestions though?
Try this:
html, body, #container {
height: 100%;
margin: 0pt auto;
min-height: 100%;
padding: 0;
}
#container {
width: 900px;
}
ASKER
That worked. But now I have to scroll to see the footer. Its like something is in the middle of the white space.
Try removing the min-height attribute. Sorry I am on an iPad. I will check it in just a minute.
ASKER
Where do I remove the min-height attribute?
html, body, #container {
height: 100%;
margin: 0pt auto;
[i]min-height: 100%;[/i] REMOVE
padding: 0;
}
Remove the specified line above.
Could you upload the version you are using so I can help debug this footer issue?
ASKER
Here it is: http://users.rcn.com/datzent83/site/test.html
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?
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
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.
ASKER
Great help! Thakn you :)
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
TRUSTED BY
:)