1 reply [Last post]
darklite
darklite's picture
Offline
newbie
Last seen: 2 years 14 weeks ago
Timezone: GMT-7
Joined: 2012-02-14
Posts: 5
Points: 8

Hi, I'm new at CSS, and have never known anything but absolute positioning. I have a problem page here where you can view

the source code: http://www.jeffs60s.com/a/school.html

I like the page layout just fine. The problem is that the main nav menu (yellow links) rests a few pixels above, or below on different pages. I'm trying to get it to stay in the same place for each page. Thanks!!

Here's the separate css for the menu:

.glossymenu

{float:left;
margin-top:-130px;
padding: 0;
width: 11em;

z-index:5;/*width of menu*/
background-color:#F9FF88;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background-color:none; repeat-x bottom left;
font-family: times new roman;
font-size:11pt;
font-weight:bold;
color: black;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
border-bottom: 1px solid gray;
border-right: 1px solid gray; padding-right:30px;
text-decoration: none;
text-align:center;
margin-right:0px;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: black;
}

.glossymenu a.menuitem:hover{
background-color: #66ffcc;
color: black;

}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background-color:#5AFF83;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid silver;
}

.glossymenu div.submenu ul li a{
display: block;
font-family: times new roman;
font-size:11pt;
font-weight:bold;
color: black;
display: block;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
text-align:center;
margin-right:20px;
}

.glossymenu div.submenu ul li a:hover{
background:#ffff99;
margin-right:10px;

color: red;
}

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 40 weeks 5 days ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

This is simple css issue.

This is simple css issue. border:1px solid pink; it will make 2px on both left right section. either way of top and bottom also. so the jerk will happen at any time.

.menu li ul a:hover, .menu li ul li:hover a{
			background-color:#f9ff88;
			border:0px;
			color:black;
			text-decoration:none;
			border:1px solid pink;
 
			}