FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS a:hover and tables problem. Help really needed?

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


ncwdavid
Hey, I am trying to do some CSS rollover things on my navigation bar. Here is my code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
margin:0px;
padding:0px:
}

body{
font-family: 5x5;
font-size: 10px;
}

#container{
width: 790px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
#header{
width: 790px;
height: 72px;
border-bottom: 1px solid #FFFFFF;
margin-left: auto;
margin-right: auto;
}

#navigation{
width: 790px;
height: 49px;
background: url('images/navigation.gif');
margin-left: auto;
margin-right: auto;
}
#navigation td{
border-left: 1px solid #8299a3;
border-right: 1px solid #162730;
font-family: Tahoma;
font-size: 10pt;
color: #FFFFFF;
}
#navigation td a{
color: #FFFFFF;
text-decoration: none;
}
#navigation td a:hover{
display: block;
height: 49px;
text-decoration: none;
background: url('images/navigation_over.gif');
width: 68px;
}
</style>
</head>

<body>
<div id="container">

<div id="header">
<img src="images/header.gif" width="790" alt="header">
</div>

<div id="navigation">
<table align="left" width="340" height="49" cellpadding="0" cellspacing="0" border="0">
<tr valign="middle">
<td align="center" height="49" width="68"><a href="#">Home</a></td>
<td align="center" width="68" height="49"><A href="#">Upload</A></td>
<td align="center" width="68" height="49"><a href="#">Register</a></td>
<td align="center" width="68" height="49"><a href="#">Members</a></td>
<td align="center" width="68" height="49"><a href="#">Forums</a></td>
</tr>
</table>
</div>

</div>
</body>
</html>



Now the problem is that when you hover over the link the background changes perfectly but the text ends up being at the top of the image and not valigned in the middle height. I have tried padding-top but that just makes everything worse. So any ideas?
Thanks for your help.
alalex
just take out the width and height, and also, the background, i would put it as background-image:, here is the code, for me it works..
Code:
#navigation{
width: 790px;
height: 49px;
background: url('images/navigation.gif');
margin-left: auto;
margin-right: auto;
}
#navigation td{
border-left: 1px solid #8299a3;
border-right: 1px solid #162730;
font-family: Tahoma;
font-size: 10pt;
color: #FFFFFF;
}
#navigation td a{
color: #FFFFFF;
text-decoration: none;
}
#navigation td a:hover{
display: block;
text-decoration: none;
background-image: url('images/navigation_over.gif');
background-position:center;
background-repeat:no-repeat;
}

then you can change the no-repeat to x-repeat, y-repeat, or repeat. whatever you want. for me it worked. tested in firefox
ncwdavid
Thanks but it didnt work. It only made the image appear around the text and not around the whole <td> and then when i set the height back to 49px it worked again just the text doesnt stay valaigned in the middle it moves up to the top of the <td>. Any more ideas?
JinTenshi
Try this?
Code:
#navigation td a:hover{
display: block;
height: 49px;
text-decoration: none;
vertical-align: middle;
background: url('images/navigation_over.gif');
width: 68px;
}


Or this?
Code:
<td valign="middle" align="center" height="49" width="68"><a href="#">Home</a></td>
<td valign="middle" align="center" width="68" height="49"><A href="#">Upload</A></td>
<td valign="middle" align="center" width="68" height="49"><a href="#">Register</a></td>
<td valign="middle" align="center" width="68" height="49"><a href="#">Members</a></td>
<td valign="middle" align="center" width="68" height="49"><a href="#">Forums</a></td>
ncwdavid
No that doesnt work either Confused Im actually pretty used to it now though the way it moves up top the top and I think it looks pretty cool.
Azmo
lalallala this does work.. I've used it on a website I made for a client.. however.. I'm using divs.. but this is an <ul> if u dont know what that is.. google it.

Code:
/* menu */

#pressmenu {
   float:left;
   list-style-type:none;
   overflow:hidden;
   margin:0;
   padding:0;
   width:482px;
   height:33px;
   background:#E0DDDB url('') left top;
}
#pressmenu li  {
   background:#ccc url('') left top;
   float:left;
   overflow:hidden;
   margin:0px;
   padding:0px;
   display:inline;
}
#pressmenu li a {
   float:left;
   display: inline;
   display:block;
   height:33px;
   margin:0px;
   padding:0px;
   text-decoration:none;
   overflow:hidden;
   border:0px solid #000;
}
#pressmenu li a.corp {
   float:left;
   height:33px;
   width:90px;
   background:url('image/starps.gif') top left no-repeat;
}
#pressmenu li a.corp:hover {
   float:left;
   height:33px;
   width:90px;
   background:url('image/staraps.gif') 0 -33px;
}
#pressmenu li a.corp-active {
   float:left;
   height:33px;
   width:90px;
   background:url('image/staraps.gif') 0 -33px;
}


if u got any questions about the code.. just send me a pm Smile
taitj
if your menus look weird, sometimes adding a height to the hover or a: will allow to look normal again. I tried this with my menus and even if I put something that doesnt affect the height much at all, it still corrected my problem.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.