Member Avatar for josephmcnelis

Hey All,

Im making a website that utilises a menu that floats about 3/4 of the way down the page, however on page load my menu always ends up at the top of the screen. But when i mouseover the menu it jumps to where it was originally meant to be... im stumped (im also pretty idiotic with css)

Heres the code involved:
HTML

<div id="welcome">

<div class="blackbox">
	<ul class="nav">
	<li><a class="nav" href="index.php?module=aboutus">About Me</a></li>
	<li><a class="nav" href="index.php?module=portfolio">Portfolio</a></li>
	<li><a class="nav" href="index.php?module=contact">Contact</a></li>
	</ul>
	</div>
</div>
<div id="menu">   
	<div class="menubox">
	test    
    </div>
</div>

</div>

CSS

.box {
    margin: 0 auto;
    width: 400px;
    padding-top: 15px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 50px;
    background: white;
    font-size: small;
	background: #111111;
	line-height:150%
}

#menu {
	position: fixed;
    bottom:100;left:0;
    z-index:71;
    overflow:hidden;
	width:100%;
	position: fixed;
}

.menubox {
	position: fixed;
    margin: 0 auto;
    width: 100%;
    padding: 25px;
    background: #111111;
	color: #ffffff;
    padding-bottom:25px;
	opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-khtml-opacity: 0.5;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
}


#welcome {

    bottom:100;left:0;
    z-index:72;
    overflow:hidden;
	position: fixed;
}
.blackbox {
    margin: 0 auto;
    width: 200px;
    padding: 10px;
    background: #111111;
	color: #ffffff;
    padding-bottom:10px;
	position: fixed;
}

/*----------navigation---------------------*/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	font-size: small;
	text-transform: uppercase;
	margin: 0;
	padding: 0px 0px 0px 10px;
	cursor: default;
	list-style-type: none;
	text-align: right;
}

ul.nav{
	width: 75px;
/*Optional, to make the navigation bar positions on the left of the content*/
	float: right;
	margin-right: 1em;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #111111;
	color: #ffffff;
}

ul.nav li:hover{
	background-color: #111111;
	color: #ffffff;
	font-weight: bold;
}

ul.nav li:active{
	background-color: #ffffff;
	color: #111111;
}

ul.nav{
	border: 0px solid #369;
}

a.nav:link { color: #ffffff; text-decoration: none; }
a.nav:visited {color: #ffffff; text-decoration: none; }
a.nav:hover {color: #ffffff; text-decoration: none; }
a.nav:active {color: #ffffff; text-decoration: none; }
  • 3 Contributors
  • 4 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by josephmcnelis

Dani AI

Generated

Short diagnosis: the behavior you describe is usually caused by one or two invalid/misplaced CSS rules plus the browser forcing a repaint when you hover. As pointed out, stray curly quotes in vendor filters can break rules; as noted, having both parent and child forced out of flow with fixed positioning is unnecessary and can lead to odd stacking/placement. The single most common root cause here is a nonzero length declared without units (browsers ignore that rule), which leaves the element unanchored until a hover triggers a reflow.

Practical fixes (in order of priority):

  • Give any length values a unit (for example use px or %). Nonzero lengths without units are invalid and get ignored.
  • Use only one fixed container for the bar. Make the inner box positioned normally (static/relative) instead of fixed.
  • Replace any “curly” quotes in CSS (especially in legacy filter syntax) with straight quotes or remove old IE filters and rely on standard opacity.
  • Check the HTML for unbalanced tags and ensure a standards DOCTYPE is present; quirks mode and broken markup change how fixed positioning behaves.

Quick example (generic names — adjust to your markup):

.fixed-bar {
  position: fixed;
  left: 0;
  bottom: 100px;    /* include units */
  width: 100%;
  z-index: 999;
}

.fixed-bar .inner {
  position: relative; /* do not re-fix the child */
}

Debug checklist: open developer tools, inspect the element and review the computed top/bottom values; toggle the suspect rules off to see which one causes the jump; test after removing legacy filter lines; and validate the HTML (missing/extra closing tags can change layout). Prioritize fixing the missing units and the nested fixed positions first — those will most likely stop the jumping.

Recommended Answers

All 4 Replies

Member Avatar for Airshow

Before you do anything else, replace those “angled quotes” in the css with "straight'ns".

Airshow

Member Avatar for webmaven

Just a quick question: why are you dividing up the attributes between an id and a class? I'm wondering if the double "fixed" is part of your problem.

Member Avatar for josephmcnelis

Before you do anything else, replace those “angled quotes” in the css with "straight'ns".

Airshow

Never noticed those to be honest, just copied that piece of the css for some website

Member Avatar for josephmcnelis

Just a quick question: why are you dividing up the attributes between an id and a class? I'm wondering if the double "fixed" is part of your problem.

To be perfectly honest i dont know, im quite new to css.
I thought that aslong as they were called correctly it wouldn't matter whether they where a class or an id.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.