Topic: Wrong code or browser differences ? (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=11001" title="Pages that link to Topic: Wrong code or browser differences ? (Page 1 of 1)" rel="nofollow" >Topic: Wrong code or browser differences ? <span class="small">(Page 1 of 1)</span>\

 
Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

posted posted 07-03-2003 12:51

Ok, here is my code :

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 :

code:
.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 ?

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 07-03-2003 12:59

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

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

posted posted 07-03-2003 13:14

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

Problem solved, thanks Emperor !

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 07-03-2003 13:29

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

:FAQ: How can I create rollovers without JavaScript?

___________________
Emps

FAQs: Emperor

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

posted posted 07-03-2003 14:00

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

Thanks for the link Emps



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu