By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,034 Members | 1,777 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,034 IT Pros & Developers. It's quick & easy.

When doing a background image rollover - text aligns top instead middle

P: n/a
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-->&nbsp;</td>
</tr>

</table>
</body>
</html>

Sep 22 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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

Sep 22 '05 #2

P: n/a
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?

Sep 23 '05 #3

P: n/a
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?

Sep 23 '05 #4

P: n/a
Here is a link so you can see what i mean.

http://www.3phones.com/test/About/links.htm

Sep 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.