| Author |
When doing a background image rollover - text aligns top instead middle
|
|
| lindsey.crocker@celltalk.co.uk 2005-09-22, 7:48 pm |
| I have this links list with background images set on them which changes
when they roll over.
The <td> is set valign="middle" however as soon as you apply the
rollover to the link, the text jumps to the top of the <td> instead of
staying middle.
I can not put padding on the top as some links are 2 lines and some are
1 line.
Does anyone know why this is happening?
I have included the code and yes i know that it is not the best way
using tables, but i need it done quickly and not sure how to do it all
in css.
Thanks in advance.
Linds
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
td.backactive {
background-image : url(images/back_active3.gif);
color : White;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
border-top: 1px white solid;
border-right: 1px white solid;
}
td.backinactive {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
color : #666666;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
text-decoration: none;
border-top: 1px white solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
}
a.backinactive {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
color : #666666;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
text-decoration: none;
text-align : center;
border-right: 1px white solid;
}
a.backinactive:visited {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
}
a.backinactive:hover {
background-image : url(images/back_active3.gif);
background-repeat: no-repeat;
background-position: center;
}
td a.backinactive{
display: block;
margin: 0;
width: 93px;
height: 35px;
}
-->
</style>
</head>
<body>
<table width="558" border="0" cellpadding="" cellspacing="0"
dwcopytype="CopyTableCell">
<!--DWLayoutTable-->
<tr>
<td width="93" height="36" align="center" valign="middle"
Class="backactive">Latest<br>
Offers </td>
<td width="93" align="center" valign="middle"><a href="x"
Class="backinactive">Networks</a></td>
<td width="93" align="center" valign="middle"><a href="x"
Class="backinactive">Browse<br>
Phones</a></td>
<td width="93" align="center" valign="middle"
Class="backinactive">Accessories</td>
<td width="93" align="center" valign="middle"
Class="backinactive">Forum</td>
<td width="93" align="center" valign="middle"
Class="backinactive"><!--DWLayoutEmptyCell--> </td>
</tr>
</table>
</body>
</html>
| |
| ijsaunders@gmail.com 2005-09-22, 7:48 pm |
| css rollovers not that hard at all, especially as you can use a
technique to avoid having to preload the over image.
Look at http://www.pavauk.org.uk/images/button.gif, then look at
http://www.pavauk.org.uk
This makes the menus fast loading, and no preloading required for the
rollovers.
Hope this helps, if you need some help with this let me know. Would
recommend using css as 'tables should not be used for layout' etc
according to w3c.
Cheers
Ian
http://www.boan-design.co.uk
| |
| lindsey.crocker@celltalk.co.uk 2005-09-23, 7:19 am |
| That worked great except my text is still at the top of the buttons.
Is the menufix class in the style sheet meant to fix this as the text
on the buttons on the example are v aligned middle?
| |
| lindsey.crocker@celltalk.co.uk 2005-09-23, 7:19 am |
| That worked great except my text is still at the top of the buttons.
Is the menufix class in the style sheet meant to fix this as the text
on the buttons on the example are v aligned middle?
| |
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |