Office 2003 CSS Menu, Image Problem

evilguru

03-17-2005, 04:14 PM

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:

<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">   New Mail</a>
</td>
</tr>
<tr>
<td>
<a href=""><img src="any.gif">    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. :)

evilguru

03-17-2005, 08:17 PM

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?

mcdougals4all

03-17-2005, 09:15 PM

How about setting the icon as a background-image of the link and declaring its position?

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;
}

evilguru

03-17-2005, 11:15 PM

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.

whizard

03-18-2005, 08:14 PM

just so you know, the menu is a little "bouncy"

Dan

evilguru

03-18-2005, 10:25 PM

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?

Kurashu

03-19-2005, 12:15 AM

Several things.

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

evilguru

03-19-2005, 10:26 AM

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 :thumbsup:

evilguru

03-21-2005, 01:49 PM

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 :confused: