...

View Full Version : menu button not fully showing



jasonc310771
04-05-2009, 10:14 PM
the menu buttons are not showing fully in IE but all seems ok in Fire Fox

can someone please take a look at the following code and advise what could be wrong with my css code.



<html>
<title></title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<script TYPE="text/javascript">
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
</SCRIPT>
<body bgcolor="#ffffff">
<div class="page">
<div align="center"><img src="logo.jpg" style="width:450; height:112; margin: 3px 50px 3px 3px;">
<div style="display: inline; vertical-align: top;"><a href="">Home</a> | <a href="">About Us</a> | <a href="">Contact Us</a>

</div>
</div>

<style>

/*a {
background-image: url('./images/mouseout.gif');
height: 30px;
width: 60px;
color: #000000;
text-decoration: none;
}
a:hover {
background-image: url('./images/mouseover.gif');
}*/

.hovermenu ul{
font: bold 12px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
text-align:center;
}

.hovermenu ul li a{
padding: 2px 0.5em;
padding:7px;

float: left;
/*color: black;
background-color: #92b9ee;
text-decoration: none;
border: 2px solid #FFF2BF;*/
/*height:30px; Make this match the UL height for larger sizes */
background-color:white;
background-image: url('./images/mouseover.gif');
height: 20px;
width: 100px;
color: white;
text-decoration: none;
}

.hovermenu ul li a:hover{
/*background-color: #FFE271;
border-style: outset;
background-image: url('./images/mouseover.gif');*/
color:white;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
/*border-style: inset;
background-image: url('./images/mouseover.gif');*/
color:white;
}

</style>

<div class="hovermenu" align="center">
<ul>
<li> <a href="index.php">Home</a></li>
<li><a href="">menu1</a></li>

<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
<li><a href="">menu6</a></li>
</ul>

</div> <table width="100%" height="325" border="0">
<tr>
<td width="21%">Login</td>
<td width="79%" rowspan="2"> </td>
</tr>
<tr>
<td><p>Tell A Friend</p>

</td>
</tr>

</table>

</div>
<div align="center"></div></body>
</html>





/*a {
background-image: url('./images/mouseout.gif');
height: 30px;
width: 60px;
color: #000000;
text-decoration: none;
}
a:hover {
background-image: url('./images/mouseover.gif');
}*/

.footerLink {
color: #8cade4;
text-decoration: none;
}

.footerLink:hover {
background-color:#8cade4;
color:white;
}

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
text-align:center;
}

.hovermenu ul li a{
padding: 2px 0.5em;
padding:7px;
text-align:center;
float: left;
/*color: black;
background-color: #92b9ee;
text-decoration: none;
border: 2px solid #FFF2BF;*/
/*height:30px; Make this match the UL height for larger sizes */
background-color:white;
background-image: url('./images/mouseout.gif');
height: 20px;
width: 78px;
color: white;
text-decoration: none;
}

.hovermenu ul li a:hover{
/*background-color: #FFE271;
border-style: outset;
background-image: url('./images/mouseover.gif');*/
color:black;;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
/*border-style: inset;
background-image: url('./images/mouseover.gif');*/
color:black;
}

body {
background-image:url(images/bg-gradient.jpg);
background-repeat:repeat-x;
background-color:white;
}

.document {
background-color: white;
border:1px solid black;
}

.contentBit {
border: 1px solid red;
}

td {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.servicesList li {
list-style-image:url('images/busBullet.gif');
/*list-style-position:outside;*/
margin-left:0px;
font-size:12px;
}

h2 {
text-align:center;
color: #fb0a03;
}

h1 {
color: #fb0a03;
}

Excavator
04-05-2009, 10:22 PM
Hello jasonc310771,
I'm sorry I don't have any time right now, I'm literally headed out the door as soon as I finish this post.
Just a quick glance though... your button image is 30px high but you have this in your CSS -
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

If that's not it, I'll can have a look at it later and I'm sure someone else here may be able to help too.

F-b0mb
04-06-2009, 09:00 AM
Your a and a:hover rules are commented out?

Excavator
04-06-2009, 10:28 AM
Well I'm back.
After a second look I see a bit more wrong with this than a single mistake.
You have no DocType.
Your embedded CSS is inside the body of the document and it belongs inside the head.

Have a look at the links in my sig below. The ones about DocType, validation and tables.

And try something like this for your menu -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #fff url(images/bg-gradient.jpg) repeat-x;
font: bold 13px Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#page {
width: 800px;
height: 600px;
margin: 30px auto;
padding: 50px;
background: #ccc;
}
ul#hovermenu {
width: 90px;
background: #999;
list-style-type: none;
}
#hovermenu a{
display: block;
width: 90px;
height: 30px;
text-align: center;
line-height: 30px;
background: url(mouseover.gif)
}
</style>
</head>
<body>
<div id="page">
<ul id="hovermenu">
<li><a href="">Home</a></li>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
<li><a href="">menu6</a></li>
</ul>
<!--end page--></div>
</body>
</html>

jasonc310771
04-06-2009, 06:47 PM
great thanks much sorter, but how do i get the menus items to get in the same line, showing right to left. not underneath one another.

Excavator
04-06-2009, 07:10 PM
Goodmorning jasonc310771,
For a horizontal menu you would float the li.
Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #fff url(images/bg-gradient.jpg) repeat-x;
font: bold 13px Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#page {
width: 800px;
height: 600px;
margin: 30px auto;
padding: 50px;
background: #ccc;
}
ul#hovermenu {
background: #999;
list-style-type: none;
}
#hovermenu li {
float: left;
margin: 0 2px 0 0;
}
#hovermenu a{
display: block;
width: 90px;
height: 30px;
text-align: center;
line-height: 30px;
background: url(mouseover.gif)
}
</style>
</head>
<body>
<div id="page">
<ul id="hovermenu">
<li><a href="">Home</a></li>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
<li><a href="">menu6</a></li>
</ul>
<!--end page--></div>
</body>
</html>

I'm sure you will want to do some sort of hover effect on those buttons also. Have a look at how some menu examples are built here - http://nopeople.com/design/CSS%20tips/index.html - view the source to see how they are done.

jasonc310771
04-07-2009, 12:09 AM
great thanks for all that, yeah i think i will do something like that with them, just looking at it how would i get the whole menu to be centred. i have tried to add in margin 0px auto; for the li and the ul but did not seem to work.

thanks again for your help so far.

Excavator
04-07-2009, 12:18 AM
great thanks for all that, yeah i think i will do something like that with them, just looking at it how would i get the whole menu to be centred. i have tried to add in margin 0px auto; for the li and the ul but did not seem to work.

thanks again for your help so far.

Centered menu examples on that page I linked too.

margin:0 auto; is not what you want on your li since your menu is made up of 7 li's and you can't very well center them all and still have a horizontal menu. To center the ul, it needs a width.

To center an element we need 3 things:

a DocType
an element with a width
left/right margins of that element set to auto



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum