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

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > When doing a background image rollover - text aligns top instead middle

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

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

lindsey.crocker@celltalk.co.uk

09-23-05 - 12:48 AM

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>

[ Post Follow-Up to this message ]

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

ijsaunders@gmail.com

09-23-05 - 12:48 AM

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

[ Post Follow-Up to this message ]

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

lindsey.crocker@celltalk.co.uk

09-23-05 - 12:19 PM

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?

[ Post Follow-Up to this message ]

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

lindsey.crocker@celltalk.co.uk

09-23-05 - 12:19 PM

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?

[ Post Follow-Up to this message ]

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

lindsey.crocker@celltalk.co.uk

09-23-05 - 12:19 PM

Here is a link so you can see what i mean.

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

[ Post Follow-Up to this message ]