Problema colonna dx e font (IE, Safari, NO Firefox)

**hasuprobe** · 21-08-2008, 22:00

Salve, sono nuovissimo e di conseguenza n00bissimo del mondo.
Ad ogni modo preparando un sito, dopo averlo "terminato" mi hanno subito fatto notare gli utenti di safari e IE che non funziona come dovrebbe..

il sito in questione è Questo

e questo è il codice della pagina iniziale (tanto per le altre è sempre uguale

)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>World oF Twilights</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--

function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

//--> 
</script>
</head>
<body>
<div id="menu">
	<ul>
		[*]Home
		[*]Bio
		[*]Media
		[*]Projects
		[*]Info
		[*]Guest Book
	[/list]
</div>
<div id="logo">
	<h1>World Of Twilights

	
</div>

<!-- end #superiore '
<div id="superiore" class="clearfix">
	<div id="splashImage">
	[img]images/img09.jpg[/img]
	</div>
</div>
-->


<div id="inferiore">
	<div id="contenuto">
		<div id="testo">
			<h2>IE User, Here</h2>
			<h1>World Of Twilights</h1>
			

World oF Twilights Studio came to life to fulfill your game experiences with Sound Effects and Atmospheres.

Why just drawings and descriptions while the atavistic enemy of your heroes may have a unique and distinctive voice?

What about a secret dungeon door's opening sound to delve your characters IN the scene?

Haven't you hear the chief of the secret agency making a speech with the President of the Confederation behind the studio's door?

And what about the eerie sound of your psychic power filling the air before blasting the glasses in the room and hurling them in your rivals body?</p>


Terrifying aliens and wonderful fairies are now at your disposal, Game Master.</p>


There's only one limit to what can be unleashed...</p>
<p style="padding-left: 200px;">...Your imagination...</p>

			<h1>The Gate Has Been Opened</h1>
			

The site is still WIP, and IE Users won't be very happy, but in a few days everything will be fully operative.
			IE users Here
			

			While you're waiting for the tasty dish, I hope you'll appreciate a little example of what this site will soon provide you

			Walk through a Country Field near animals and horse wagons or feel noisy ambience in a Wrecked Space Station

			


			</p>
			Have a look in our Media section for the Archive in chronological order.
			


			</p>
			Explore a whole new world.. it has just woken up..
			</p>
			
		</div>
	</div>
	<div id="menuSx">
		<div id="links">
			<ul>
				<li class="lv1">Modern
				<div id="modern">
					<li class="lv2">Ambience
					<div id="modern-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="modern-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="modern-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">SciFi
				<div id="scifi">
					<li class="lv2">Ambience
					<div id="scifi-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="scifi-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="scifi-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">Fantasy
				<div id="fantasy">
					<li class="lv2">Ambience
					<div id="fantasy-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="fantasy-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="fantasy-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">Historical
				<div id="historical">
					<li class="lv2">Ambience
					<div id="historical-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="historical-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="historical-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<div><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<input type="hidden" name="cmd" value="_donations">
					<input type="hidden" name="business" value="worldoftwilights@gmail.com">
					<input type="hidden" name="item_name" value="One-A-Month!">
					<input type="hidden" name="no_shipping" value="0">
					<input type="hidden" name="logo_custom" value="http://worldoftwilights.altervista.org/images/bottoni/donations.gif">
					<input type="hidden" name="cn" value="Your Choice">
					<input type="hidden" name="currency_code" value="EUR">
					<input type="hidden" name="tax" value="0">
					<input type="hidden" name="lc" value="IT">
					<input type="hidden" name="bn" value="PP-DonationsBF">
					<input type="image" src="http://worldoftwilights.altervista.org/images/bottoni/donations.gif" border="0" name="submit" alt="PayPal - Il sistema di pagamento online più facile e sicuro!">
					
					</form>
				</div>
			[/list]
		</div>
	</div>
	<div style="clear:both;"></div>
</div>



<div id="footer">
	<div class="termOfUse">E' ammessa la possibilit&agrave; di scaricare o stampare una copia dei materiali contenuti nel sito per uso personale e scopi non speculativi</div>
	<div class="copyright">&copy; 2008 www.vands.org</div>


</div>
</body>
</html>

perchè viene visualizzato bene solo in firefox?

Grazie mille

**hasuprobe** · 22-08-2008, 08:46

ehm.. la colonna è di SX non di DX :P

**Mich_** · 22-08-2008, 09:25

Io vedo vari errori di sintassi, in particolare elementi e attributi non compatibili con la DTD.

Prima di procedere devi correggere e validare la tua pagina: non ha senso cercare errori di altro tipo, quando ci sono errori gravi che possono essere trovati dai validatori.

Ecco gli errori che ho visto:
1. Il codice JS dentro il file HTML (il parser HTML tenta di interpretarlo e puo` confondersi).
2. Mancata chiusura di tag (ad esempio <h1>).
3. Uso del tag [b] (non esiste in XHTML Strict)

Inoltre non metti mai lo spazio prima della / di chusura dei tag (es
): questo crea problemi ai browser che non conoscono XHTML, che possono non interpretare il tag o l'ultimo attributo

**hasuprobe** · 22-08-2008, 11:18

olè!

grazie mille! risolto i primi problemucci.. ho validato la pagina (ora mi concentro sull'index poi applico a tutte le altre le correzioni), ho spostato lo script java prima dell'HTML, ho tolto il comando [b] (non ne esiste uno per xhtml strict? mi piaceva il sottolineato della lettera :P tipo l' <u> ?) e ovviamente chiuso quel maledetto h1 :P

ora la pagina si presenta bene.. ma il menu a sx è ancora completamente sballato..

riposto il tutto corretto e validato!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<script language="javascript">
<!--

function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

//--> 
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>World oF Twilights</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="menu">
	<ul>
		[*]Home
		[*]Bio
		[*]Media
		[*]Projects
		[*]Info
		[*]Guest Book
	[/list]
</div>
<div id="logo">
	<h1>World Of Twilights </h1>

	
</div>

<!-- end #superiore '
<div id="superiore" class="clearfix">
	<div id="splashImage">
	[img]images/img09.jpg[/img]
	</div>
</div>
-->


<div id="inferiore">
	<div id="contenuto">
		<div id="testo">
			<h2>IE User, Here</h2>
			<h1>World Of Twilights</h1>
			

World oF Twilights Studio came to life to fulfill your game experiences with Sound Effects and Atmospheres.

Why just drawings and descriptions while the atavistic enemy of your heroes may have a unique and distinctive voice?

What about a secret dungeon door's opening sound to delve your characters IN the scene?

Haven't you hear the chief of the secret agency making a speech with the President of the Confederation behind the studio's door?

And what about the eerie sound of your psychic power filling the air before blasting the glasses in the room and hurling them in your rivals body?</p>


Terrifying aliens and wonderful fairies are now at your disposal, Game Master.</p>


There's only one limit to what can be unleashed...</p>
<p style="padding-left: 200px;">...Your imagination...</p>

			<h1>The Gate Has Been Opened</h1>
			

The site is still WIP, and IE Users won't be very happy, but in a few days everything will be fully operative.
			IE users Here
			

			While you're waiting for the tasty dish, I hope you'll appreciate a little example of what this site will soon provide you

			Walk through a Country Field near animals and horse wagons or feel noisy ambience in a Wrecked Space Station

			


			</p>
			Have a look in our Media section for the Archive in chronological order.
			


			</p>
			Explore a whole new world.. it has just woken up..
			</p>
			
		</div>
	</div>
	<div id="menuSx">
		<div id="links">
			<ul>
				<li class="lv1">Modern
				<div id="modern">
					<li class="lv2">Ambience
					<div id="modern-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="modern-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="modern-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">SciFi
				<div id="scifi">
					<li class="lv2">Ambience
					<div id="scifi-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="scifi-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="scifi-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">Fantasy
				<div id="fantasy">
					<li class="lv2">Ambience
					<div id="fantasy-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="fantasy-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="fantasy-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<li class="lv1">Historical
				<div id="historical">
					<li class="lv2">Ambience
					<div id="historical-ambience">
						<li class="lv3">Loop
						<li class="lv3">Non Loop
					</div>
					<li class="lv2">Scene
					<li class="lv2">SFX
					<div id="historical-sfx">
						<li class="lv3">Foley
						<li class="lv3">Design
					</div>
					<li class="lv2">Voices
					<div id="historical-voices">
						<li class="lv3">Speech
						<li class="lv3">FX Design
					</div>
					<li class="lv2">Music
				</div>
				<div><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<input type="hidden" name="cmd" value="_donations">
					<input type="hidden" name="business" value="worldoftwilights@gmail.com">
					<input type="hidden" name="item_name" value="One-A-Month!">
					<input type="hidden" name="no_shipping" value="0">
					<input type="hidden" name="logo_custom" value="http://worldoftwilights.altervista.org/images/bottoni/donations.gif">
					<input type="hidden" name="cn" value="Your Choice">
					<input type="hidden" name="currency_code" value="EUR">
					<input type="hidden" name="tax" value="0">
					<input type="hidden" name="lc" value="IT">
					<input type="hidden" name="bn" value="PP-DonationsBF">
					<input type="image" src="http://worldoftwilights.altervista.org/images/bottoni/donations.gif" border="0" name="submit" alt="PayPal - Il sistema di pagamento online più facile e sicuro!">
					
					</form>
				</div>
			[/list]
		</div>
	</div>
	<div style="clear:both;"></div>
</div>



<div id="footer">
	<div class="termOfUse">E' ammessa la possibilit&agrave; di scaricare o stampare una copia dei materiali contenuti nel sito per uso personale e scopi non speculativi</div>
	<div class="copyright">&copy; 2008 www.vands.org</div>


</div>
</body>
</html>

Voilà..

l'indirizzo è Questo

Grazie mille ancora!

**Mich_** · 22-08-2008, 12:00

Non e` che puoi inventarti la sintassi!!

Hai scelto di scrivere in XHTML Strict: scelta molto valida, ma occorre consocere la lingua che si usa.
Come hai posizionato lo script e` ancora peggio di prima (prima per lo meno era valido in XHTML Transitional, ora non lo e` in nessuna DTD che io conosca). Comunque lo script va messo in un altro file, come ha fatto per il CSS. Ma tieni presente che quello script ti rende la pagina non-accessibile, per cui dovresti cercare di toglierlo del tutto. Prova a vedere le raccolte di menu (alcuni link tra i "link utili", vedi in particolare CSSplay).

Per quanto riguarda l'uso di XHTML, c'e` un'ottimo tutorial, pensato per chi gia` conosce l'HTML, nel sito di HTML.it: ti val la pena investire alcune ore e studiarlo.

Per il menu a sinistra, mi pare sia realizzato tramite JS (inaccessibile): prova a cambiare menu, oppure vedi di sitemare lo script: ci sono cose che non capisco (tipo la ridefinizione due volte di vis.display). E` comunque off-topic in questo forum, per cui se vuoi mantenere il menu in JS dobbiamo spostarti nel forum corretto.

**hasuprobe** · 22-08-2008, 15:40

ohilà!

ho optato per il simpatico "Menu Generator" di CSSPlay!

http://www.cssplay.co.uk/menus/menu_builder_flyout.html

l'unico problema è che nel menu c'è a sx di ogni nome il tipico quadratino da lista, come potrei toglierlo?

ecco il codice del CSS

codice:

/* ======================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
========================================================= */
.menu { margin: 10px; height: 100px; font-size: 10pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 7em; }
.menu li { background-color: #ffffff; float: left; }
.menu li.sub { background-color: #ffffff; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 7em; color: #0099ff; padding-left: 0em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 7em; }
* html .menu a:hover { color: #000000; background-color: #0099ff; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #000000; background-color: #0099ff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #000000; background-color: #0099ff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 3em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

e questo dell'html

codice:

<div class="menu">
<ul>[*]
<a href="#">
&#187;Fantasy<!--[if IE 7]>
<!-->
</a>

<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>[*]
<a href="#">
&#187;Ambience<!--[if IE 7]>
<!-->
</a>

<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>[*]
Loop
[*]
Non Loop
[/list]
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
[*]
Scene
[*]
<a href="#">
&#187;SFX<!--[if IE 7]>
<!-->
</a>

<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>[*]
Foley
[*]
Design
[/list]
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
[*]
<a href="#">
&#187;Voice<!--[if IE 7]>
<!-->
</a>

<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>[*]
Speech
[*]
Design
[/list]
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
[*]
Music
[/list]
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
[/list]
</div>

se guardate al sito si vede il pallino a sx di ogni opzione del menu..

mi appresto alla ennesima valanga di mazzate per errori di ogni genere..

p.s. ho visto che il generatore automatico mi ha messo dei [b] nel codice.. ho anche provato a toglierli ma non era quello il problema.. se li toglievo le freccine andavano a sinistra del nome anzichè a destra..

pronti.. insultiiiiiiii.. viaaaaaa!

Grazie mille
Has

**hasuprobe** · 22-08-2008, 16:01

come non detto! Trovato il colpevole!!

ora rimane da capire come mai i sub del menu si ingrandiscono a mano a mano..

Grazie ancora per l'aiuto.

Hasuprobe

**hasuprobe** · 22-08-2008, 17:17

risolto anche questo.. grazie per i link.. utilissimi!

diciamo che il nome "link utili" doveva suggerire qualcosa :P eheheh

Grazie ancora..
Hasuprobe

Discussione: Problema colonna dx e font (IE, Safari, NO Firefox)

Strumenti discussione

Ricerca discussione

Visualizza

Problema colonna sx e font (IE, Safari, NO Firefox)

Permessi di invio