Topic: Wrong code or browser differences ? (Page 1 of 1)

Ok, here is my code :

<tr> 

    <td style="padding-top: 20px"><img src="images/art.gif" alt="Art" />

	<div class="menu"><a class="lienmenu" href="ps.php">Photoshop</a></div>

      <div class="menu"><a class="lienmenu" href="bryce.php">Bryce 5</a></div>

      <div class="menu"><a class="lienmenu" href="sig.htm">My signatures</a></div></td>

  </tr>

The class menu is the following :

.menu a{

background-color: #000000;

border-color: #505050;

border-style: solid;

border-width: 1px 1px 1px 1px;

width: 125px;

text-align: center;

margin-top: 4px;

}



.menu a:hover{

background-color: #ffffff;

}

The code is valid XHTML 1.1, and the CSS is valid too. Now here is the problem :

Under IE 6 it works fine :



But under Opera 7 I get :



So, can anyone tell me what is the problem with my code ?

MS: The problem is that the A tag are inline elements and not block. I'd:

1. Get rid of the DIVs and pos. assign the menu class to the cell (if at all).

2. Use display: block on the A styles.

See some of Eric Meyer's CSS Edge stuff as he does something very similar. Hmmmmmmm there might even be an FAQ on this hold on........

___________________
Emps

FAQs: Emperor

I used TDs instead of DIVs and "display : block" and indeed it works fine now.

Problem solved, thanks Emperor !

MS: Glad to hear it worked. The FAQ is:

:FAQ: How can I create rollovers without JavaScript?

___________________
Emps

FAQs: Emperor

I used Eric Meyer's CSS trick to make text appear... Very powerful and neat.

Thanks for the link Emps