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!
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;
}
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.
:)
:)
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
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>
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;
}
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
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
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.
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.
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.
Try this:
html, body, #container {
height: 100%;
margin: 0pt auto;
min-height: 100%;
padding: 0;
}
#container {
width: 900px;
}
That worked. But now I have to scroll to see the footer. Its like something is in the middle of the white space.
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?
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?
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
Markup
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!
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;
}
Markup
<div id="footer">
<div id="footer_inner">
footer
</div>
</div>
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!
Premium Content
You need an Expert Office subscription to comment.Start Free Trial