background image button failure

**fodo** · 07-24-2008, 12:21 PM

I am trying to adapt the Vista Aero button menu.
I cant get the button images to appear.
This is a link to the test page
http://217.46.159.226/foot/foot.html
I am posting the code below.
The button images are in a folder in foot called media.
Foot is in the root dir.
The background url seems not to work
Any help much appreciated.

HTML 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">
	<meta name="author" content="M Stocks">

	<title>foot</title>
	<link href="./includes/foot.css" media="screen"
    			rel="stylesheet" type="text/css" />
</head>

<body>

<div id="footer">
	<div class="aerobuttonmenu">

<div class="rightsection">
<!--<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>-->
</div>

<a href="about.php" class="aero"><span>About</span></a> 
<a href="faq.php" class="aero"><span>FAQ's'</span></a> 
<a href="terms.php" class="aero"><span>Terms.php</span></a> 
<a href="privacy.php" class="aero"><span>Privacy Notice</span></a> 
<a href="contact.php" class="aero"><span>Contact Us</span></a> 
<a href="index.php" class="aero"><span>Links</span></a>
</div>
<!--
<br />

<div class="aerobuttonmenu black">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="about.php" class="aero"><span>About</span></a> 
<a href="faq.php" class="aero"><span>FAQ's'</span></a> 
<a href="terms.php" class="aero"><span>Terms.php</span></a> 
<a href="privacy.php" class="aero"><span>Privacy Notice</span></a> 
<a href="contact.php" class="aero"><span>Contact Us</span></a> 
<a href="index.php" class="aero"><span>Links</span></a>
</div>
-->
	<p class="footer">&copy;
<?php
ini_set('date.timezone','Europe/London');
$startYear = 2006;
$thisYear = date('Y');
if ($startYear==$thisYear){
  echo $startYear;
//  echo'';
}else{
  echo "{$startYear}-{$thisYear}";
//  echo '';
}
?>
</p>
	<p><img border="0" src="images/New Hawkesley 134x60.jpg" width="134" height="60"onmouseover="Tip('We publish e-Book4U.<br />How to guides you can take anywhere', BALLOON, true, ABOVE, true,FADEIN, 600, FADEOUT, 600)"/></p>
</div><!-- End of Footer -->
</div><!-- End of WRAPPER DIV. -->	


</body>
</html>
The css
[CODE]
.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
text-align:center;
}

* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('./media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color:black; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent url('./media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}

.black a.aero{
background-image: url('./media/aeroleftblack.gif');
}

.black a.aero span{
background-image: url('./media/aerorightblack.gif');
}

.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

.aerobuttonmenu .rightsection a{
color: navy;
}

[/CODE]

**Nile** · 07-24-2008, 12:58 PM

Change the css to this:

Code:

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
text-align:center;
}

* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('/media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color:black; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent url('/media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}

.black a.aero{
background-image: url('/media/aeroleftblack.gif');
}

.black a.aero span{
background-image: url('/media/aerorightblack.gif');
}

.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

.aerobuttonmenu .rightsection a{
color: navy;
}

**fodo** · 07-24-2008, 03:49 PM

Hi Nile thanks for the reply but still no images.
any thoughts?

**jscheuer1** · 07-24-2008, 05:26 PM

Code:

background: transparent url('/media/aeroleft.gif') no-repeat top left;

For example doesn't exist, this does:

Code:

background: transparent url('/foot/media/aeroleft.gif') no-repeat top left;

There could be other problems. One thing I noticed is that your css file uses character hex 00 a lot in place of space (hex 20). But the browser (FF 3) doesn't seem to have a problem with that, except in certain code views. But it is non-standard and might mess up in some browsers.

**fodo** · 07-25-2008, 03:43 PM

hi jscheuer1,
Thanks for that.That shows the image but with a black line through it.
I dont follow your refernece to hex 00 and hex 20. Could you please enlighten me. Where is this code refered to? In the color reference?

**fodo** · 07-25-2008, 03:52 PM

I sorted the black line. text needs to white not black.

**fodo** · 07-25-2008, 04:00 PM

An additional thought. How do you center the buttons. I have the menu in a div #footer
700 px wide. I have tried margin 0 auto; on the aerobuttonmenu class to no avail.

Thread: background image button failure

Thread Tools

Search Thread

background image button failure

sort of working

Bookmarks

Bookmarks

Posting Permissions