Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Office 2003 CSS Menu, Image Problem

    Hi, I am currently making an office 2003 style css menu for a project and have a problem with the image vertical alignment. You can see what I mean here:

    http://www.dcrez.co.uk/create/menu/test.htm

    Here is the code for it:

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=windows-1252">
    <title>Test</title>
    <style type="text/css">
    a:link{
    padding: 1px;
    text-decoration: none;
    font-family: tahoma;
    font-size: 10.5pt;
    color: #000000;
    display: block;
    width: 165px;
    height: 50px;
    }
    a:hover{
    display: block;
    background: rgb(255,238,194);
    text-dcoration: none;
    border: solid 1px rgb(00,045,150);
    width: 165px;
    font-family: tahoma;
    font-size: 10.5pt;
    color: black;
    padding: 0px;
    }
    a:visited{
    text-decoration: none;
    font-family: tahoma;
    font-size: 10.5pt;
    color: black;
    }
    td,td.2,td.3{
    vertical-align: text-middle;
    background-image: 
    url('vertical%20tab.png');
    background-repeat: repeat-y;
    border-color: rgb(000,045,150);
    border-style: solid;
    border-width: 1px;
    height: 25px;
    width: 165px;
    background-color: rgb(246,246,246);
    line-height: 50px;
    }
    td{
    border-top-width: 0px;
    border-bottom-width: 0px;
    }
    td.2{
    border-top-width: 1px;
    border-bottom-width: 0px;
    }
    td.3{
    border-top-width: 0px;
    border-bottom-width: 1px;
    }
    img{
    vertical-align: text-middle;
    border-width: 0px;
    }
    </style>
    </head>
    
    <body>
    
    <table border="0" cellpadding="1" cellspacing="0">
    <tr>
    	<td class="2">
    		<a href=""><img src="any.gif">&nbsp; &nbsp;New Mail</a>
    	</td>
    </tr>
    <tr>
    	<td>
    	<a href=""><img src="any.gif">&nbsp; &nbsp;&nbsp;Test</a>
    	</td>
    </tr>
    <tr>
    	<td class="3">
    		<a href="">Link</a>
    	</td>
    </tr>
    </table>
    
    </body>
    
    </html>
    If you take a look at the page you will see that the buttons which have images, are top aligned (with the images being middle aligned to the text) while the buttons without images are middle aligned. Now, I have made the line spacing and the height of the link bigger, to make the problem easier to see. Currently I have only tested the menu in ie, but it should work in firefox. Does anyone know how I can get the whole link (text and images) to be middle vertically aligned?

    Thanks for any help.

  • #2
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I have tried it in firefox and it does nouthing but fail I am not sure why, but no background image is displayed and the aligment is wrong, well I want to get it working right in ie first, (v-align) then I will work on getting it working in firefox. Anyone can help?

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about setting the icon as a background-image of the link and declaring its position?

    Code:
    a:link{
    background: url(icon.gif) left center no-repeat;
    padding: 1px;
    text-decoration: none;
    font-family: tahoma;
    font-size: 10.5pt;
    color: #000000;
    display: block;
    width: 165px;
    height: 50px;
    }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you take a look at it in internet explorer (views correctly) you will see that the blue 'stripe' is the background image, and it seems best to do it that way.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    just so you know, the menu is a little "bouncy"

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, sorry, you man have the icon image as the background to the link, good idea I will try that, should work fine, but I will use inline styles <a style=""> so it is eaiser for each link. The menu seems fine for me in ie, however it 'jumps' down in firefox (does not listen to the padding:1px). If anyone could tell me why it does not work in firefox I would be very happy, I think it is because the CSS is invalid (not sure why, but the validator is always correct). Any CSS/HTML experts know why?

  • #7
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Several things.

    1. Use a list for the menu. =D
    2. Make the image next to the links a background
    Code:
    background: url("http://www.dcrez.co.uk/create/menu/any.gif") no-repeat top left;

  • #8
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would love to be able to use the <ul><li> Method, however I am too darn stupid to know how (seen it done loads), if anyone could give me an insight then I would be very happy. Thanks for all of yout help

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried the background way, however I find that there are a few problems (look at the page to see them). The :hover now does not have a background color, and the background image moves 1px left on :hover as a border is created. Can anyone help me fix this


  •  

    Posting Permissions

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