469,612 Members | 1,610 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

Drop Down Navigation Menu Not Lining Up...

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
4 3712
drhowarddrfine
7,435 Expert 4TB
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
tburger
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
tburger
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
7,435 Expert 4TB
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.

Similar topics

2 posts views Thread by Yve | last post: by
3 posts views Thread by KK | last post: by
8 posts views Thread by Yeah | last post: by
1 post views Thread by ngoc | last post: by
3 posts views Thread by Andrew | last post: by
3 posts views Thread by lewisthesmith | last post: by
2 posts views Thread by Steve Richter | last post: by
reply views Thread by aboutjav.com | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.