PDA

Visualizza versione completa : [HTML + CSS]Menu con layout CSS sfasato in Opera


exion
09-05-2008, 21.32.35
Ho un problema con un template di Joomla che appare completamente sfasatoin Opera.

Vi allego una immagine per rendere l'idea.
A destra il menu in IE6, a sinistra lo stesso in Opera 9:


http://www.labrigue.net/exion/css.gif




Questa la parte di codice HTML che genera il menu:


<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Main Menu </th>
</tr>
<tr>
<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" >Home</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid =6" class="mainlevel" >Joomla! License</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_content&amp;task=section&amp;id=1&amp;Ite mid=2" class="mainlevel" >News</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_content&amp;task=blogsection&amp;id=0 &amp;Itemid=9" class="mainlevel" >Blog</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_weblinks&amp;Itemid=23" class="mainlevel" >Links</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_contact&amp;Itemid=3" class="mainlevel" >Contact Us</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_search&amp;Itemid=5" class="mainlevel" >Search</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_newsfeeds&amp;Itemid=7" class="mainlevel" >News Feeds</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_content&amp;task=category&amp;section id=3&amp;id=7&amp;Itemid=25" class="mainlevel" >FAQs</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_wrapper&amp;Itemid=8" class="mainlevel" >Wrapper</a></td></tr>
<tr align="left"><td><a href="http://labrigue.net/loris3/index.php?option=com_gallery2&amp;Itemid=26" class="mainlevel" id="active_menu">Photos</a></td></tr>
</table> </td>
</tr>
</table>




E questi sono i CSS a cui fa riferimento l'HTML:


a.mainlevel:link, a.mainlevel:visited {
color: White; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: bold;
width: 95%;
background-color: #59A6FF;
border-bottom: 2px solid #2B8CFF;
border-right: 2px solid #B9D9FF;
border-left: 2px solid #2B8CFF;
border-top: 2px solid #B9D9FF;
text-align: center;
letter-spacing: 3px;
}

a.mainlevel:hover {
color: White; background-color: #3592FF;
width: 95%;
border-top-width: 1px;
border-top: 2px solid #2B8CFF;
border-left: 2px solid #B9D9FF;
border-bottom: 2px solid #B9D9FF;
border-right: 2px solid #2B8CFF;
text-align: center;
letter-spacing: 3px;
}


table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
border-bottom: 0px solid Aqua;
background-repeat: no-repeat;
background-position: bottom;
}

table.moduletable th {
font: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0277FF;
text-align: left;
height: 36px;
line-height: 22px;
white-space: nowrap;
width: 95%;
border-bottom: 3px;
background-image: url(../images/modhead.gif);
background-position: left;
background-repeat: no-repeat;
text-indent: 30px;
}

table.moduletable td {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}






Ora so che Opera non certo il pi diffuso browser, ma sfiga vuole che la maggiora parte delle perosone che accederanno a questo sito usanno appunto Opera.

Avete idea di quale potrebbe essere la causa del problema?

Grazie mille!

Dav82
09-05-2008, 23.29.48
In effetti anche con FF fa scaghicchiare :p


Prova ad aggiungere nel CSS questa regola:

table.moduletable td a.mainlevel {
display:block;
}


Con FF funziona, su Opera non ho strumenti di sviluppo :o

exion
10-05-2008, 04.32.37
In effetti anche con FF fa scaghicchiare :p


Prova ad aggiungere nel CSS questa regola:

table.moduletable td a.mainlevel {
display:block;
}


Con FF funziona, su Opera non ho strumenti di sviluppo :o


Grande Dav! (Y) :) :act:


Grazie mille!