PDA

Click to See Complete Forum and Search --> : Menu problems...

DesignIt
05-02-2006, 09:33 PM
Hi everyone, I am banging my head trying to figure out why this menu that I did keeps kicking itself over to the right. It should line right up on the left side but its not. Any ideas?

Heres the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">

body {

}



/**************** menu coding *****************/


div#listmenu {

width: 760px;

}

div#listmenu ul {
margin:0 0 0 0px;
}


div#listmenu li {
float:left;
list-style-type: none;
}

div#listmenu li:hover {
background-color: #fff;
}

div#listmenu li:first-child {
border-left:1px solid #fff;
}

div#listmenu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
text-decoration: none;
color: #fff;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 11px;
height: 10px;

}

div#listmenu a:hover {
text-decoration: none;
color: #000;
}



li.bend, li.bend li {
background-color: #002266;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 90px;
text-align: center;
}

li.resort, li.resort li {
background-color: #884400;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 127px;
text-align: center;
}

li.own, li.own li {
background-color: #334411;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 125px;
text-align: center;
}

li.residence, li.residence li {
background-color: #664411;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 129px;
text-align: center;
}

li.travel, li.travel li {
background-color: #442255;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 202px;
text-align: center;
}

li.qa, li.qa li {
background-color: #aa8800;
border-bottom:1px solid #fff;
width: 77px;
text-align: center;
}
*html a {
display:block;
}

/**************** end of menu coding *****************/
</style>

</head>

<body>


<div id="listmenu">
<ul>
<li class="bend"><a href="#">BEND</a></li>
<li class="resort"><a href="#">THE RESORT</a></li>
<li class="own"><a href="#">OWNERSHIP</a></li>
<li class="residence"><a href="#">RESIDENCES</a></li>
<li class="travel"><a href="#">TRAVEL PRIVILEGES</a></li>
<li class="qa"><a href="#">Q&A</a></li>
</ul>
</div>
</body>
</html>
DesignIt
05-02-2006, 09:44 PM
Well...I changed the below coding to -40 px from 0 px and that lined everything up. (This is in Safari by the way). I am not sure why that would have to be at margin -40??

div#listmenu ul {
margin:0 0 0 -40px;
}
DesignIt
05-02-2006, 09:57 PM
One other question I had is...how to make each button "hover" a different color? Currently the hover is set to a white block and black text.
JPnyc
05-02-2006, 10:28 PM
TO make em each a different hover color, you have to assign an ID to them. You can assign both a class and an ID to an element, and they have similar function, except that ID's MUST be unique. No 2 elements may share an ID. Classes can contain as many elements as you like.
JPnyc
05-02-2006, 10:41 PM
Oh, and there's also compound classes. Such as class="blue small" and class="blue medium" and class="blue large". You can set the blue class to have blue text, and the small medium and large classes can have 3 different sizes. All 3 will show whatever setting blue has in your css, but the 2nd part of the class will be different for all 3.

here's an example page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body { white-space:nowrap }

//a { height:20px;width:300px; float:left; background-color:#FF0000 }

.blue { color:blue }

.small { font-size:7pt }

.medium { font-size:12pt }
.large {font-size:18pt }

#container { width:auto !important; width:1200px; min-width:1200px }
</style>


</head>

<body>

<a class="blue small">blah</a><a class="blue medium">blah</a><a class="blue large">blah</a>
</body>
</html>
DesignIt
05-03-2006, 02:52 PM
Thanks JPync! Really appreciate the help! =)
DesignIt
05-03-2006, 04:13 PM
This menu that I have done works in every browser except Internet Explore for PC. It kicks the menu down, like it doesn't fit. Where as in all the others it fits perfectly.

Here is the code:

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"></style>
<link href="styles/global_styles.css" rel="stylesheet" type="text/css" />
<link href="styles/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* CSS */

body {font: 12px Verdana, Arial, Helvetica, sans-serif;}


#container {
background-color: #eee6c9;
width: 760px;
\width: 780px;
w\idth: 760px;
border: 0px;
margin: 20px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

/**************** menu coding *****************/

div#listmenu {
font-size: 12px;
font: bold 11px/16px verdana, arial, helvetica, sans-serif;
font-weight: bold;
width: 760px;
\width: 780px;
w\idth: 760px;
border-top:1px solid #fff;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}


div#listmenu ul {
margin:0 0 0 0px;
padding:0 0 0 0px;
}

div#listmenu li {
float:left;
list-style-type: none;
}

div#listmenu li:hover {
background-color: #112200;
}

div#listmenu li:first-child {
border-left:0px solid #fff;
}

div#listmenu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
text-decoration: none;
color: #fff;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 11px;
height: 10px;
}

div#listmenu a:hover {
text-decoration: none;
color: #eee6c9;
}

li.bend, li.bend li {
background-color: #002266;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 90px;
text-align: center;
}

li.resort, li.resort li {
background-color: #884400;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 127px;
text-align: center;
}

li.own, li.own li {
background-color: #334411;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 125px;
text-align: center;
}

li.residence, li.residence li {
background-color: #664411;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 129px;
text-align: center;
}

li.travel, li.travel li {
background-color: #442255;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
width: 202px;
text-align: center;
}

li.qa, li.qa li {
background-color: #aa8800;
border-bottom:1px solid #fff;
width: 77px;
text-align: center;
}
*html a {
display:block;
}

/**************** end of menu coding *****************/

</style>
</head>
<body bgcolor="#112200" background="../images/image_mapback.gif">
<div id="container">

<div id="content">

<div id="listmenu">
<ul>
<li class="bend"><a href="#">BEND</a></li>
<li class="resort"><a href="#">THE RESORT</a></li>
<li class="own"><a href="#">OWNERSHIP</a></li>
<li class="residence"><a href="#">RESIDENCES</a></li>
<li class="travel"><a href="#">TRAVEL PRIVILEGES</a></li>
<li class="qa"><a href="#">Q&A</a></li>
</ul>
</div>



</div>



</div>
</body>
</html>
JPnyc
05-03-2006, 04:22 PM
I don't have the time right now to really scrutinize the code, but a quick fix is to use the !important hack. Find the placement that displays right in IE, and add that to your code, then BEFORE it, you put the code that works for FF and Opera and the rest, followed by a space and !important. IE doesn't understand that, but the other browsers will. They'll take that value, while IE will take the next value in the code.

Like I did here:
#container { width:auto !important; width:1200px; min-width:1200px }

IE will take a width of 1200px, but FF and Opera and Netscrape will set width:auto.

So you can use the same idea to set the position of the menu
DesignIt
05-03-2006, 04:58 PM
I don't have the time right now to really scrutinize the code, but a quick fix is to use the !important hack. Find the placement that displays right in IE, and add that to your code, then BEFORE it, you put the code that works for FF and Opera and the rest, followed by a space and !important. IE doesn't understand that, but the other browsers will. They'll take that value, while IE will take the next value in the code.

Like I did here:
#container { width:auto !important; width:1200px; min-width:1200px }

IE will take a width of 1200px, but FF and Opera and Netscrape will set width:auto.

So you can use the same idea to set the position of the menu

The prob is that I can't find the placement that works correctly in IE. Thanks again for your help, I will keep messing with it and see if I can come up with something.
DesignIt
05-04-2006, 02:31 PM
Anyone else that might have some insight?
JPnyc
05-04-2006, 06:04 PM
You don't seem to be using any position except natural document flow, so the answer may be in margins and padding.
DesignIt
05-05-2006, 05:58 PM
You don't seem to be using any position except natural document flow, so the answer may be in margins and padding.

What's strange is I have tested the site on our pc (w explorer 6.0) here at the office and that is when the menu shifts down. although I have sent the site link to a couple of friends w/pc's and they say the menu looks correct. So I am not sure what to think. :D
DesignIt
05-05-2006, 06:03 PM
I am curious to know how this works on other pc's with Explorer? Here is the link to the page:

http://dev.nootgroup.com/dev.seventhmtn/FullSite/index.html
flutterby nut
05-05-2006, 06:14 PM
i'm viewing with ie6 and don't see any shift...
1ooScreamingTrees
05-05-2006, 11:33 PM
Using a PC, IE6, IE7 beta, and Firefox, I don't see any shifting.
:confused: