Sliding Doors Link effect wrong in IE7 fine in Firefox 5

using style on a:hover within href tag.

[gjindancer]

OK this is best visualised:

<snip>

Look in Firefox and my menu works, although the spacing between links could be spaced out further..

Look in IE7 and the tops of each button are cut off - if you move your mouse over one, this is more apparent.

I have no clue why this is happening in IE.
Does any one have any ideas?

Here is my code and css..

<td height="28" colspan="2" background="images/navbar.gif">

<a href="casino-review/index.html" class="topnavbar" title="Casino information, game tips and free casino chips.">casino</a>

<a href="poker-rooms/index.html" class="topnavbar" title="Poker information, online poker, poker tips and chips">poker</a>

<a href="sports-betting/index.html" class="topnavbar" title="Bookmaker information, betting guide and tips">bookmaker</a>

<a href="scratchcards/index.html" class="topnavbar" title="Play scratch card games online">scratch</a>

<a href="slot-machines/index.html" class="topnavbar" title="Fruit machine games online, plus free fruit machines to play">fruit machine</a>

<a href="bingo/index.html" class="topnavbar" title="Bingo game information, find free bingo online">bingo</a>

<a href="scratchcards/index.html" class="topnavbar" title="Play scratch card games online">cards</a>

<a href="free-casino-games/index.html" class="topnavbar" title="Play free games ">free games</a></td>

.topnavbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
display:inline;
text-decoration: none;
background-image: url(images/topnavbg.gif);
background-repeat: no-repeat;
width: 110px;
padding: 7px;
height: 30px;
text-align: center;
}
a.topnavbar:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
display:inline;
text-decoration: none;
background-image: url(images/topnavbgover.gif);
background-repeat: no-repeat;
width: 110px;
padding: 7px;
height: 30px;
text-align: center;
}

Thanks

Dan

[edited by: Robin_reala at 1:31 pm (utc) on April 2, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[gjindancer]

Hmm... that url that has just been edited out was a harmless testing page and nothing to do with any live affilliate site..

It was a lot easier to explain my problem by showing it.

If someone reproduces the code I provided - I get the top of my buttons cut of in IE7, but not Firefox.

Dan

[Parlays]

Yeah it seems like URLs are editing out a little too quickly, it's tough to understand what your talking about without being able to click on that URL.

[SuzyUK]

Parlays, on the contrary if you paste the code from the OP and use background color instead of images you should be able to see where the problem is

if you have a read through through the charter linked at the top of the page you will also see why we don't have discussions based on links, once said example is gone/fixed people following would not know what everyone is talking about ;)

gjindancer, there are a couple of obvious things even without pasting the code..

1. the height of your table cells are 28px
2. you're trying to set the height of the links to 30px

however despite that - the table cells should stretch anyway if you get the link height sorted - the height and width on your links will not be working because they are inline elements and inline elements do not accept a width or a height, so the only thing determining the height of your links at the minute is the padding/font-size this is making for inaccurate heights (I get 28px in FF and 26px in IE)

My suggestion would be to float the links left (space them as required with a right margin) this will make them into block level elements too then you should be able to set a width and height and lose the padding altogether, this should enable you to size them properly to fit the size of your tab images

Suzy