Visualizzazione dei risultati da 1 a 4 su 4

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    14

    spostamento laterale container allineato con altro tag li.current in FF e non IE

    premesse:
    tutto l'html e' generato da un CMS sul quale non ho controllo, quindi l'html non e' modificabile. L'unico modo che ho per personalizzare il layout del sito generato dal CMS e' usare i CSS (per fortuna gli sviluppatori di questo CMS hanno avuto l'accortezza di rendere il tutto abbastanza gestibile solo con CSS)

    il CSS deve seguire determinate regole e quindi anche li ho le mani legate ...

    purtroppo i limiti sono tanti ma in qualche modo devo farlo funzionare

    ora il problema e' il solito, su IE6 il render funzia bene ... su FF (2.0.0.11) non va bene .. visto che prevalentemente sto sito viene usato con IE6 me ne infischierei anche, ma voglio che vada bene anche li... non si sa mai che sti furboni che gestiscono i ns. computers decidano di fare una scelta giusta. su IE7 non ho modo di provarlo perche' non posso installarlo (sempre a causa dei furboni di cui prima) ancora.


    io credo che solo guardando l'effetto che fa, sareste in grado di capire qual'e' il problema (guardate l'allegato).

    in pratica i box di sotto il menu si allineano sulla sinistra con l'estremo della voce del menu selezionata. piu' sono a destra nel menu e piu' i box sottostanti vanno a finire a destra.


    ora il menu ha il seguente codice css:

    /* Main menu wrapper */
    #pageNavBar {
    background: #444; border-bottom: 1px solid #ccc;
    margin-left:137px;
    width:750px;
    }


    /* Single menu entries */
    .mainNav
    {
    margin: 0; padding: 0 0 0 15px;
    height: 39px;
    list-style: none;
    line-height: 3em;
    color: #fff;
    /*border-bottom: 1px solid #999;*/
    background: transparent url("images/vista_v_bar.png") repeat-x top;
    }
    .mainNav li
    {
    float: left;
    height: 35px;
    margin-right: 1.5em;
    white-space: nowrap;
    }
    .mainNav li.current
    {
    cursor: pointer;
    margin: 0; padding: 1px 1.1em 1px 1.1em;
    height: 39px;
    border: 1px outset #fff;
    background: transparent url("images/vista_v_bar_on.png") repeat-x top;
    color: #fff;
    font-weight: bold;
    }
    .mainNav li.current span.menuTitle { color: #fff; }
    .mainNav a
    {
    display: block;
    float: left;
    margin: 0; padding: 1px 1.1em 1px 1.1em;
    color: #fff;
    text-decoration: none;
    border:none;
    }
    .mainNav a:hover
    {
    cursor: pointer;
    margin: 0; padding: 0 1em 0 1em;
    color: #fff;
    border: 1px outset #fff;
    height:39px;
    background: transparent url("images/vista_v_bar_on.png") repeat-x top;
    }
    .mainNav li.current a:hover span
    {
    display: block;
    }

    /* submenus */
    .mainNav ul
    {
    height: auto;
    background: #fff;
    color: #333;
    line-height: normal;
    }
    .mainNav ul li
    {
    display: block;
    float: none;
    height: auto;
    border: none;
    line-height: normal;
    }
    .mainNav ul li a
    {
    float: none;
    display: inline;
    line-height: normal;
    }
    ora non chiedetemi perche' e' stata usata una struttura cosi' poco chiara ... il codice html relativo che contiene il menu

    <div id="pageNavBar">
    <ul class="mainNav">
    <li class="first">Home
    [*]Organization
    [*]Training
    <li class=" current"><span>Documentation</span>
    [*]Support
    <li class="last">Contacts[/list]
    </div>
    cerco di scrivere qui la struttura generica della pagina, tagliando tutte le parti inutili

    <div id="MasterHeader">
    <ul id="primaryNav">[*]Contact[*]My Profile[*]Sign Out[/list]
    </div>

    <div id="MasterContent">

    <div id="pageNavBar">
    ...il menu di sopra....
    </div>

    <div id="contentarea">
    <table class="columns" cellspacing="15" border="0">
    <tr>
    <td class="column">
    <div class="colHead"><h2>Documentation</h2></div>
    <div class="contentPanel" partid="wp343363742">
    <div class="contentHead">
    <h3 class=""></h3>
    </div>
    <div style="display:block;" class="contentBlock" >
    <p style="TEXT-ALIGN: center">






    [img]GetImage.aspx?AccountID=xxxx&ID=xx[/img]




    <span style="FONT-SIZE: 14pt; COLOR: #ff0000; FONT-FAMILY:
    Verdana">
    UNDER WORK
    </span>
    </p>
    </div>
    </div>
    <span class="extra"></span>
    </td>
    </tr>
    </table>
    </div>
    </div>
    spero che l'incolonnamento si mantenga...

    scusate la lunghezza del messaggio ma non saprei come meglio spiegare il problema, se volete posso postare anche il css dei vari wrapper della pagina come sopra.

    io intanto continuo a cercare di capire qual'e' il prob, ma se qualche anima pia mi aiuta ne sarei felice.... :master:
    Immagini allegate Immagini allegate
    Imagination is more important than knowledge. [A.Einstein]

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.