[TYPO3-UG Italy] Typo3 e Internet Explorer - RISOLTO
Francesco Pessina
typo3news at yahoo.it
Fri Aug 4 18:42:45 CEST 2006
Carissimi,
Grazie al suggerimento di Roberto che mi consigliava di controllare i CSS, di fatto ho trovato
l'inghippo: non mi ero accorto che il menu che ho utilizzato (riciclato da
http://www.seoconsultants.com/css/menus/tutorial/) utilizzava un trucco per IE in modo da realizzare
il "dinamismo" del menu' tramite CSS (cosa che in FF e Opera non e' necessario perche sono gia' CSS
1.0 e 2.0 conformi); ebbene, tale trucco imponeva una dimensione molto piccola per il font del menu'!
Quindi problema risolto e grazie ancora Roberto!
A volte basta un semplice suggerimento per trovare grandi soluzioni!
Ciao a tutti!
Francesco.
Francesco Pessina ha scritto:
> Grazie Roberto per la pronta risposta!
>
> Il CSS penso che serva a poco perche' si comporta alla stessa maniera
> anche senza!
> Avevo pensato pure io a un problema del genere, infatti, come vedi dal
> codice CSS, tutti i font-size sono commentati...e di fatti sono FireFox
> e Opera i caratteri sono "grandi" nelle misure corrette...
>
> Comunque per il menu:
>
> /**************** menu coding *****************/
> #menu {
> width: auto;
> min-width: 10em;
> /*font-size: 0.8em;*/
> background: #eee;
> }
> #menu ul {
> list-style: none;
> margin: 0px;
> padding: 0px;
> }
> #menu a, #menu h2 {
> display: block;
> margin: 0px;
> padding: 0px;
> font-family: arial;
> /* font-size: 1em; */
> /* font-weight: bold; */
> border-width: 1px;
> border-style: solid;
> border-color: #006699;
>
> }
> #menu h2 {
> color: #fff;
> background: #006699;
> border-color: #006699 #006699 #006699 #006699;
> text-transform: uppercase;
> /*font-size: 1em;*/
> }
> #menu a {
> color: #006699;
> background: #fff;
> text-decoration: none;
> }
> #menu a:hover {
> color: #fff;
> background: #006699;
> }
> #menu li {
> position: relative;
> }
> #menu ul ul ul {
> position: absolute;
> top: 0px;
> left: 100%;
> width: 100%;
> }
> div#menu ul ul ul, div#menu ul ul li:hover ul ul {
> display: none;
> }
> div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
> display: block;
> }
>
> Mentre per il resto della pagina:
>
> body {
> margin: 2em 0em;
> padding: 0px; /* Need to set body margin and padding to get
> consistency between browsers. */
> /*font-size: 1em;*/
> font-family: Arial,Verdana,Helvetica,Sans-Serif;
> background-color: #fff;
> text-align: center; /* Hack for IE5/Win */
> }
> .container {
> width: 85%;
> margin: 0px auto; /* Right and left margin widths set to "auto" */
> text-align: left; /* Counteract to IE5/Win Hack */
> padding: 10px; /* spazio tra cornice del container (tratteggiata) e
> layer interni */
> border: 0px dashed #000;
> background-color: #fff;
> }
> /* Layer positioning, geometry and size */
> #header { /* Header */
> margin: 0px;
> padding: 0px;
> float: left;
> width: 100%;
> border: 0px solid #000;
> }
> .header-1 { /* Logo */
> margin: 0px;
> padding: 0px;
> float: left;
> width: 75%; /* max. 65% with .header-2*/
> min-width: 10em;
> border: 0px solid #f00;
> }
> .header-2 { /* Quick Links */
> margin: 0px;
> padding: 0px;
> float: right;
> width: 20%; /* max. 34% with .header-1 */
> min-width: 6em;
> border: 0px solid #0f0;
> }
> .header-3 { /* Navigation */
> margin: 0px;
> padding: 0px;
> clear: both;
> width: 100%;
> border: 0px solid #000;
> }
> #content { /* Main content */
> margin: 0px;
> padding: 0px;
> float: left;
> width: 73%; /* max. 75% with .content-3 */
> border: 0px solid #000;
> }
> .content-1 { /* Main content column #1 (center) */
> margin: 0px;
> padding: 0px;
> float: right;
> width: 73%;
> min-width: 5em;
> border: 0px solid #000;
> }
> .content-2 { /* Main content column #2 (left) */
> margin: 0px;
> padding: 0px;
> float: left;
> width: 24%;
> min-width: 10em;
> /*border-left: 1px dotted #006699;*/
> /*border-right: 1px dotted #006699;*/
> }
> .content-3 { /* Main content column #3 (right) */
> margin: 0px;
> padding: 0px;
> float: right;
> width: 25%; /* max. 24% with #content */
> min-width: 8em;
> border: 0px solid #000;
> }
> #footer {
> clear: both;
> margin: 0px;
> padding: 0px;
> width: 100%;
> border: 0px solid #000;
> }
> /* box align */
> .box-clear {
> clear: both;
> font-size: 1px;
> line-height: 0px;
> display: none;
> }
> unknown {
> display: none;
> /*display: block;*/
> }
> .nn4clear {
> clear: both;
> font-size: 1px;
> line-height: 0px;
> display: none;
> }
> .box-footer {
> margin: 0px;
> padding: 0px;
> clear: both;
> text-align: center;
> }
> /* box geometry */
> .box-header-1 {
> margin: 0px;
> padding: 0px;
> border: 0px solid #000;
> }
> .box-header-2 {
> margin: 0 0 1em 0;
> padding: 0px;
> border: 1px dashed #006699;
> background-color: #fff;
> color: #006699;
> }
> .box-header-3 {
> margin: 0px;
> padding: 0px;
> clear: both;
> border: 0px solid #000;
> }
> .box-content-1 { /* Box content column #1 (center) */
> margin: 0px;
> padding: 0px; /* spazio tra bordo del box e contenuto testuale
> interno */
> border: 0px solid #000;
> }
> .box-content-2 { /* Box content column #2 (left) */
> margin: 0px;
> padding: 0px; /* spazio tra bordo del box e contenuto testuale
> interno */
> border: 0px solid #000;
> background-color: #fff;
> }
> .box-content-3 { /* Box content column #3 (right) */
> margin: 0.5em 0;
> padding: 0.5em; /* spazio tra bordo del box e contenuto testuale
> interno */
> border: 1px dashed #333;
> }
> #box-footer-1 {
> margin: 0px;
> padding: 0.5em;
> padding-top: 3em;
> border: 0px solid #000;
> }
> #box-footer-2 {
> margin: 0px;
> padding: 0.5em;
> border: 1px solid #000;
> background-color: #006699;
> color: #fff;
> }
> #box-footer-3 {
> margin: 0px;
> padding: 0.5em;
> border: 0px solid #000;
> }
> /* layer position */
> .container {
> position: relative;
> }
> .content, .header { /* Main content */
> position: relative;
> }
> .content-1, .header-1 { /* Main content column #1 (center) */
> position: relative;
> }
> .content-2, .header-2 { /* Main content column #2 (left) */
> position: relative;
> }
> .content-3, .header-3 { /* Main content column #3 (right) */
> position: relative;
> }
> /* other elements */
> #tabmenu {
> margin: 0px;
> padding: 0px;
> float: left;
> width: auto;
> border: 0px solid #000;
> }
> #box-login {
> margin: 0px;
> padding: 3px;
> float: right;
> width: auto;
> border: 0px dashed #006699;
> background-color: #fff;
> color: #006699;
> text-align: right;
> }
> #pathmenu {
> clear: both;
> padding: 0.2em;
> margin: 0px;
> border: 1px solid #000;
> background-color: #006699;
> color: #fff;
> }
> .box-header-2, #box-footer-1, #box-footer-2 {
> /*font-size: 0.75em;*/
> }
> .icon {
> border: 0px solid #fff;
> vertical-align: middle;
> }
> div {
> padding: 0px;
> margin: 0px;
> }
> p {
> padding: 0px;
> margin: 0px;
> }
> .box-header-2 ul {
> padding: 0.5em 2em;
> margin: 0px;
> }
> .box-header-2 a:visited { text-decoration: none; color: #006699;
> background-color: #fff; }
> .box-header-2 a:hover { text-decoration: underline; color: #006699;
> background-color: #fff; }
> .box-header-2 a:link { text-decoration: none; color: #006699;
> background-color: #fff; }
> #box-footer-2 a:visited { text-decoration: none; color: #fff;
> background-color: #006699; }
> #box-footer-2 a:hover { text-decoration: underline; color: #006699;
> background-color: #fff; }
> #box-footer-2 a:link { text-decoration: none; color: #fff;
> background-color: #006699; }
> #pathmenu a:visited { text-decoration: none; color: #fff;
> background-color: #006699; }
> #pathmenu a:hover { text-decoration: underline; color: #fff;
> background-color: #006699; }
> #pathmenu a:link { text-decoration: none; color: #fff; background-color:
> #006699; }
> .box-content-1 h1 {
> padding: 0px;
> margin: 0.5em 0 0 0;
> border-bottom: 1px solid #006699;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1.4em;*/
> font-weight: bold;
> font-style: normal;
> color: #006699;
> }
> .box-content-1 h3 {
> padding: 0px;
> margin: 0.5em 0;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1.1em;*/
> font-weight: bold;
> font-style: normal;
> color: #006699;
> }
> .box-content-1 h4 {
> padding: 0px;
> margin: 0.5em 0;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1em;*/
> font-weight: bold;
> font-style: normal;
> color: #006699;
> }
> h1.header {
> padding: 0px;
> margin: 0px;
> border: 0px solid #000;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1.2em;*/
> font-weight: normal;
> font-style: normal;
> color: #006699;
> }
> h2.header {
> padding: 0px;
> margin: 0px;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1.4em;*/
> font-weight: bold;
> font-style: normal;
> color: #006699;
> }
> h3.header {
> padding: 0px;
> margin: 0px;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 0.75em;*/
> font-weight: normal;
> font-style: normal;
> color: #000;
> }
> h5.footer {
> padding: 0px;
> margin: 0px;
> font-family: Arial, Verdana, Thaoma;
> /*font-size: 1em;*/
> font-weight: normal;
> font-style: normal;
> }
>
> Grazie ancora!
>
> Saluti, Francesco.
>
> Roberto Torresani ha scritto:
>> Ciao Francesco.
>>
>> Penso sia piu' comodo capire il problema dal css relativo al body,
>> menu, ul,
>> li e h2
>> se lo puoi postare...
>>
>> molto probabilmente e' docuto alla diversa interpretazione delle
>> grandezze
>> relative
>> in oggetti nidificati dei due browser
>>
>> Ciao
>> Roberto
>>
>>
>>
>> Il 04/08/06, Francesco Pessina <typo3news at yahoo.it> ha scritto:
>>>
>>> Ciao a tutti!
>>>
>>> Una domanda molto stupida: ho realizzato un menu' verticale mediante una
>>> lista non ordinata in HTML
>>> (tag <ul>) e tramite CSS la rendo come menu' grafico. Il problema che
>>> con
>>> Firefox (qualunque
>>> versione) e Opera (idem) i testi del menu' risultano delle dimensioni
>>> corrette, invece in IE sono
>>> piccolissimi. Ho tolto il CSS, controllato che non ce ne siano di
>>> nascosti, ma nulla, i testi
>>> rimangono piccolini.
>>>
>>> Credo che IE non capisce (ancora) l'HTML come si deve, ma non posso
>>> certo
>>> aspettare che Bill si
>>> renda conto che il mondo non gira intorno a lui...
>>>
>>> Qualche suggerimento?
>>>
>>> Vi allego il TypoScript del menu':
>>>
>>> # Leftside Navigation
>>> MENU-V = HMENU
>>> MENU-V {
>>> wrap = <div id="menu">|</div>
>>> entryLevel = 0
>>> 1 = TMENU
>>> 1 {
>>> noBlur = 1
>>> expAll=1
>>> #wrap = <h2>|</h2>
>>> NO {
>>> stdWrap.case = upper
>>> linkWrap = <h2>|</h2>
>>> wrapItemAndSub = <ul><li>|</li></ul>
>>> }
>>> }
>>> 2 = TMENU
>>> 2 {
>>> noBlur = 1
>>> expAll=1
>>> #wrap = <ul>|</ul>
>>> NO {
>>> wrapItemAndSub = <ul><li>|</li></ul>
>>> }
>>> }
>>> 3 = TMENU
>>> 3 {
>>> noBlur = 1
>>> expAll=1
>>> wrap = <ul>|</ul>
>>> NO {
>>> allWrap = <li>|</li>
>>> }
>>> }
>>> 4 = TMENU
>>> 4 {
>>> noBlur = 1
>>> expAll=1
>>> wrap = <ul>|</ul>
>>> NO {
>>> allWrap = <li>|</li>
>>> }
>>> }
>>> }
>>>
>>> Ringrazio per ogni consiglio,
>>>
>>> Francesco.
>>> _______________________________________________
>>> TYPO3-UG-italy mailing list
>>> TYPO3-UG-italy at lists.netfielders.de
>>> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ug-italy
>>>
More information about the TYPO3-UG-italy
mailing list