Results 1 to 7 of 7

Thread: background image button failure

  1. #1
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default background image button failure

    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]

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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;
    }
    Jeremy | jfein.net

  3. #3
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default sort of working

    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?

  6. #6
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •