By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,151 Members | 768 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,151 IT Pros & Developers. It's quick & easy.

Drop Down Navigation Menu Not Lining Up...

P: 58
Hey everyone-

This is my first post at The Scripts, but I've used the forums before for other programming issues. Hopefully, someone has some solid styling advice for me.

I've now been dealing with XHTML/CSS for about a week. I'm trying to set up a website for my dad, and this navigation menu is driving me nuts.

I designed this part of the site on Firefox 2.0.

Here's the link: http://www.yalestartups.com/tburger/test.html

If you open it in Firefox, the navigation works as designed. Drop-down boxes appear under each link, and the link changes color upon mouse-over.

The problem occurs when I open the page in other browsers. Even though I've put the navigation menu on a separate z-index and positioned it absolutely, I want it to line up the way it does in Firefox.

I assume this is a cross browser issue - and I've tried to globally change the margins and padding to accommodate this...

But I think it may be something else, because the :hover behaviors don't act the same in other browsers either.

This could be blatantly obvious, but I'm new...

Any help, comments, advice would be appreciated...I've really enjoyed working on this first site, and would like to get more seriously involved with web design...

Thanks,

Tom

------------CSS File

/* Universal Browser Accomodation */

* {
padding:0;
margin:0;
}



/* Body: Format Color / Margins */

body{
margin: 0;
padding: 0;
background: #333333;
}

/*-------Central Content Box id = "container"-------*/

#container{
width: 850px;
height: auto;
position: absolute;
top:0;
left:50%;
margin-left: -425px;
background: white;
border-left: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 2px black;
z-index:1;

}

/*---------Primary Text Box id = "textbox"---------*/

#textbox{
width: 640px;
height: auto;
padding-left: 200px;
padding-top: 0px;
}

/* Content Styling */

h1{
font-family: Geneva;
font-size: 24px;
color: #0066CC;
border-bottom: solid 2px #cc9900;
}

p{

font-family: geneva;
font-size: 16px;
}

/*-------Page Background Structure----------*/

/* Background Table */

table{
width: 850px;
height: 259px;
border-bottom: solid 1px black;
}

/* Table Column Definitions */
td.left{
width: 339px;
}

td.right{
width: 511px;
}
#navleft{
margin:0;
height:133px;
background-image:url(topleft.gif);
}

#navbleft{
margin:0;
height:125px;
background-image:url(botleft.gif);
}

#navright{
margin:0;
height: 133px;
background-image: url(topright.gif);
}
#navbright{
margin:0;
height: 125px;
background-image: url(botright.gif);
}

/*------Top Navigation Menu------------*/

dt{
min-height:30px;
}
#dropmenu{
position: absolute;
top: 37px;
left: 474px;
z-index:3;
}
#dropmenu dl{
float: left;
}

#dropmenu dt{
cursor: pointer;
}

#dropmenu dd{
float: left;
text-align: left;
margin-top: -4px; /*IMPORTANT Overlap with "dt" for Clean Navigation*/
margin-left: 10px;
width: 125px;
background-color: #999999;
border: solid 1px black;
}

#dropmenu a.slink{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: white;
}

#dropmenu li{
text-align: left;
height:auto;
display: block;
width:auto;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 4px;
}

#dropmenu a.slink:hover{
color: #660000;
}

#dropmenu li:hover{
border-bottom: dotted 3px #CC9900;
}


/* Secondary (Lower) Link Positioning */
#lownav{
position: absolute;
top: 75px;
left: 765px;
z-index: 2;
}

/* Top Link Styling */
a.nav, a.lownav{
margin-left: 14px;
color: white;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
}

a.lownav{
margin-left: 10px;
}


/* Top Link Hover Actions*/
a.nav:hover,a.lownav:hover{
color:#CC9900;
}

/*------Side Navigation Box------------------*/

#snav{
margin-top: 0px;
margin-bottom: 0px;
float: left;
width: 185px;
min-height: 500px;
background-color: #5A594A;
border-right: solid 1px black;
clear: left;
}

/* Side Link Styling*/

/* One Line Link Definitions */
a.snavone{
margin-top: 12px;
float: left;
width: 173px;
height: 30px;
background-color: #003366;
border-top: solid 2px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
}

/* Two Line Link Definitions */
a.snavtwo{
margin-top: 12px;
float: left;
width: 173px;
height: 47px;
background-color: #003366;
border-top: solid 2px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
}

/* Side Link Spacing */
span.snavtext{
padding-top: 5px;
padding-left: 12px;
display: block;
text-align: left;
color: white;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

/* Side Link Hover Action */
a.snavone:hover, a.snavtwo:hover{
background-color:#660000;
}


/* -------Page Footer-------*/
#footer{
margin: 0;
float: left;
clear: left;
width: 850px;
height: 24px;
background-image: url(foot.gif);
background-repeat: repeat-x;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
border-top: solid 1px black;
}

/* Footer Text Styling */
#footttext{
display: block;
text-align:center;
margin-top: 6px;
color: white;
}

/* Footer Dividers */
span.yell{
color: #CC9900;
}
Jul 13 '07 #1
Share this Question
Share on Google+
4 Replies

drhowarddrfine
Expert 5K+
P: 7,435
In your doctype:
<!DOCTYPE html PUBLIC ?-//W3C//DTD XHTML

The question mark should be a quote ".

This puts IE into quirks mode and it won't attempt to work like modern browsers. Maybe not the real issue but try it.
Jul 13 '07 #2

P: 58
Thanks...I tried this, but I think it has something to do with the positioning ultimately...I don't understand why some elements seem unaffected while others, like the navigation menu and text area, look great in Firefox, but horrible in other browsers...
Jul 13 '07 #3

P: 58
I figured out what was wrong:

I had been positioning the div box containing the navigation menu absolutely from the top left of the PAGE. Since the distance from my main container div varies in different browsers, this was throwing off the alignment. What I needed to do was position the navigation menu absolutely from the top left of the CONTAINER DIV. Once I did this, the navigation seemed to work properly...

Does anyone know how Safari handles ":hover" behaviors? The proper mouse-over effect occures in Firefox and Camino, but not in Safari? Any advice?
Jul 14 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
hover works fine in Safari. Must be something else.
Since the distance from my main container div varies in different browsers
Don't know why that would be since you set margins to zero.
Jul 14 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.