differenti visualizzazioni con browser diversi [era: Problema strano!]

**DakJak** · 21-11-2012, 20:42

Ciao a tutti ultimamente ero arrugginito con l'html,php e css e ho deciso di darmi una bella spolverata creando un sito, direi che inizialmente problemi non cene sono se non che a fine base succede una cosa stranissima ovvero,
se la pagina non viene visualizzata a tutto schermo le scritte centrali in alto si spostano.
E oltre tutto la tabella sinistra che ho inserito se visualizzo la pagina con F11 scompare...
Vi posto gli screen fra poco, qualcuno sa da cosa può esser dato questo problema?
Saluti DakJak.

**DakJak** · 21-11-2012, 20:52

Come dovrebbe essere (e con firefox a tutto "ingrandito" è così)
Questo è con firefox giù ...
E questo è il full screen (F11)

**Cesar** · 21-11-2012, 21:35

Senza i vari codici (html / css) come facciamo ad aiutarti?

**DakJak** · 21-11-2012, 22:10

Non sapevo se metterli e che è lunghino spetta li metto ora:
HTML

HTML

codice:

<html>
<head>
<title> Red Marylin</title>
<link rel="stylesheet" type="text/css" href="BS.css"/>
</head>
<body>
<div id="containerbig">
<div id="pad">
</div>
<div id="container">
<div id="contenitore2">
<div id="contenuto">
<div id="riga">
<div id="titolomenu">
<div id="titolo">
<span class="titolosito1">
RED MARYLIN
</span>
</div>
<div id="titolocentri">
WEB DESIGNER
</div>
<div id="titolocentro">
HOME | 
DOVE SIAMO | 
CONTATTACI
</div>
</div>
</div>
</div>
</div>
</div>




<div id="navigation">
<div class="contenitore3">
<div class="contenuto3">
<div class="topleft3">
<div class="topright3">
<div class="bottomleft3">
<div class="bottomright3">
<span class="titmen">MENU'</span>
<div class="rigasx"></div>
<div class="menuinterno">
<ul class="menu">[*]........[*]......[*]......[*].....[*].....[*].....[*].....[*].....[*].....
<li class="menuattivosx">.....[*].....[*].....[*].....[/list]</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="contenutopagina">
</div>
</div>
</div>
</body>
</html>

**DakJak** · 21-11-2012, 22:12

CSS:

codice:

body {
    background: none repeat scroll 0 0 #000000;
    font-family: arial,sans-serif;
    font-size: 85%;
}
div#contenutopagina {
    background-color: #FFFFCE;
    border: 1px solid #0099CC;
    margin-left: 464px;
    margin-right: 574px;
    min-height: 850px;
    padding: 5px;
    text-align: left;
}
div#pubblicitacasua3 {
    border: 0 none;
    margin: 0 auto;
    padding: 2px;
    width: 468px;
}
#pad {
    padding: 5px 5px 3px;
}
div#containerbig {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
div#container {
    margin: 0 auto;
    width: 980px;
}
div#riga {
    width: 846px;
}
#contenitore1 {
    background: url("sfondo54b.jpg") repeat scroll 0 0 transparent;
    color: #000000;
    width: 100%;
}
#contenitore2 {
    background: url("Red Marilyn.jpg") no-repeat;
    color: #000000;
    width: 100%;
    height: 31%;
}
#contenuto {
    padding: 10px 10px 3px;
    text-align: left;
}
#titolo {
    float: left;
    height: auto;
    text-align: center;
}
.titolosito1 {
    color: white;
    font-family: arial black,arial,sans-serif;
    font-style: italic;
    font-size: 25px;
}
#titolomenu {
    border-top: 1px solid #860217;
    color: #0099CC;
    margin-top: 280px;
    padding: 3px 0 0;
    text-align: center;
}
#titolocentro {
    color: white;
    font-family: arial black,arial,sans-serif;
    text-aling: center;
}
#titolocentri {
    color: white;
    font-family: arial black,arial,sans-serif;
    float: right;
}
a.lk:link{
    color:white;  
    font-family:arial black,arial,sans-serif; 
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
a.lk:visited{
    color:white; 
    font-family:arial black,arial,sans-serif;
    font-size:10pt;
    font-weight: bold;
    text-decoration: none; 
}
a.lk:active{
    color:#00FF00;  
    font-family:arial black,arial,sans-serif;
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
a.lk:hover{
    color:#FF0000;  
    font-family:arial black,arial,sans-serif; 
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
a.wb:link{
    color:white;  
    font-family:arial black,arial,sans-serif; 
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
a.wb:visited{
    color:white; 
    font-family:arial black,arial,sans-serif;
    font-size:10pt;
    font-weight: bold;
    text-decoration: none; 
}
a.wb:active{
    color:#163279;  
    font-family:arial black,arial,sans-serif;
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
a.wb:hover{
    color:#163279;  
    font-family:arial black,arial,sans-serif; 
    font-size:10pt; 
    font-weight: bold;
    text-decoration: none;
}
div#navigation {
    float: left;
    font-size: 95%;
    margin: 17 280px 0 -520;;
    padding: 0;
    width: 180px;
}
.contenitore3 {
    background-color: #007CB4;
    background-image: url("sfondorigamenu.gif");
    background-position: 0 0;
    background-repeat: no-repeat;
    color: #000000;
    width: 100%;  
}
.topleft3 {
}
.topright3 {
    background: url(".png") no-repeat scroll right top transparent;
    height: auto; 
}
.bottomleft3 {
    background: url(".png") no-repeat scroll left bottom transparent;
    height: auto;
}
.bottomright3 {
    background: url(".png") no-repeat scroll right bottom transparent;
    height: auto;
}
.contenuto3 {
    background: url("1.png") no-repeat scroll left top transparent;
    height: auto;
    padding: 8px 1px 8px 8px;
    width: 165px;
}
.menuinterno {
    background-color: #FFFFFF;
    border-color: #00618A #DDDDDD #DDDDDD #00618A;
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    padding: 0 0 1px 2px;
    text-align: left;
}
.menuinterno654 {
    background: url("pentacolo.png") no-repeat scroll right top #FFFFFF;
    border-color: #00618A #DDDDDD #DDDDDD #00618A;
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    padding: 0 0 1px 2px;
    text-align: left;
}
ul.menu {
    color: #000050;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
ul.menu li a {
    border-top: 1px solid #EFEFEF;
    display: block;
    margin: 0;
    padding: 6px 0 6px 15px;
    text-decoration: none;
}
ul.menu li {
    display: inline;
}
ul.menu li a:link, ul.menu li a:visited {
    background: url("pall3.png") no-repeat scroll left center transparent;
    color: #000050;
}
ul.menu li a:hover, ul.menu li a:active {
    background: url("pall4.png") no-repeat scroll left center #FFFFA8;
    color: #004080;
}
.rigadx {
    background-image: url("sfondo555.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    border-top: 2px solid #EAEAEA;
    height: 8px;
    margin: 8px 2px 0 0;
}
div#navigationb {
    float: right;
    font-size: 95%;
    margin: 0 395 0 0;
    padding: 0;
    width: 180px;
}
.contenitore3b {
    background-color: #007CB4;
    background-image: url("");
    background-position: 132px 0;

    background-repeat: no-repeat;
    color: #000000;
    width: 100%;
}
.topleft3b {
}
.topright3b {
    background: url("smusso2.jpg") no-repeat scroll right top transparent;
}
.bottomleft3b {
    background: url("smusso3.jpg") no-repeat scroll left bottom transparent;
}
.bottomright3b {
    background: url("smusso4.jpg") no-repeat scroll right bottom transparent;
}
.contenuto3b {
    background: url("smusso1.jpg") no-repeat scroll left top transparent;
    height: auto;
    padding: 8px 8px 8px 1px;
}
.menuinternob {
    background-color: #FFFFFF;
    border-color: #00618A #00618A #DDDDDD #DDDDDD;
    border-style: solid;
    border-width: 2px 2px 1px 1px;
    padding: 0 2px 1px 0;
    text-align: right;
}
.menuinternob654 {
    background: url("pentacolo.png") no-repeat scroll left top #FFFFFF;
    border-color: #00618A #DDDDDD #DDDDDD #00618A;
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    padding: 0 0 1px 2px;
    text-align: left;
}
ul.menub {
    color: #000050;
    margin: 0;
    padding: 0;
    text-align: right;
    text-decoration: none;
}
ul.menub li a {
    border-top: 1px solid #EFEFEF;
    display: block;
    margin: 0;
    padding: 6px 18px 6px 0;
    text-decoration: none;
}
ul.menub li {
    display: inline;
}
ul.menub li a:link, ul.menub li a:visited {
    background: url("pall3.png") no-repeat scroll right center transparent;
    color: #000050;
}
ul.menub li a:hover, ul.menub li a:active {
    background: url("pall4.png") no-repeat scroll right center #FFFFA8;
    color: #004080;
}
ul li.menuattivosx {
    background: url("menu1.png") no-repeat scroll right center #FFFF51;
    display: block;
    list-style: none outside none;
}
ul li.menuattivodx {
    background: url("menu2.png") no-repeat scroll left center #FFFF51;
    display: block;
    list-style: none outside none;
}
.menuattivo {
    background: none repeat scroll 0 0 #FFFF51;
}
ul.menutop100 {
    color: #000050;
    margin: 0;
    padding: 0;
    text-align: right;
    text-decoration: none;
}
ul.menutop100 li a {
    border-top: 1px solid #EFEFEF;
    display: block;
    margin: 0;
    padding: 5px 3px 5px 0;
    text-decoration: none;
}
ul.menutop100 li {
    display: inline;
}
ul.menutop100 li a:link, ul.menutop100 li a:visited {
    background: url("palltop.png") no-repeat scroll right center transparent;
    color: #000050;
}
ul.menutop100 li a:hover, ul.menutop100 li a:active {
    background: url("palltop2.png") no-repeat scroll right center #FFFFA8;
    color: #004080;
}
div#navigationc {
    float: right;
    font-size: 95%;
    margin: 0;
    padding: 0;
    width: 180px;
}
.contenitore3c {
    background-color: #007CB4;
    color: #000000;
    width: 100%;
}
.topright3c {
    background: url("smusso2.jpg") no-repeat scroll right top transparent;
}
.bottomleft3c {
    background: url("smusso3.jpg") no-repeat scroll left bottom transparent;
}
.bottomright3c {
    background: url("smusso4.jpg") no-repeat scroll right bottom transparent;
}
.contenuto3c {
    background: url("smusso1.jpg") no-repeat scroll left top transparent;
    height: 640px;
    padding: 0 4px 0 0;
    text-align: center;
}
div#menucontenuto {
    background: none repeat scroll 0 0 #E6E6FF;
    border-bottom: 1px solid #FFFF5B;
    border-right: 2px solid #FFFF5B;
    display: inline;
    float: left;
    padding: 6px 4px 0;
    text-align: left;
}
form#formricercalezioni {
    display: inline;
}
input#cerca {
    background: none repeat scroll 0 0 #C0C0C0;
    display: inline;
    font-size: 12px;
    margin: 0 0 5px;
    padding: 1px;
}
input#textriclez {
    background: none repeat scroll 0 0 #FFFFCE;
    border: 1px solid #C0C0C0;
    display: inline;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 2px;
}
form#formargomenticorrelati {
    display: inline;
}
input#cercaargcorr {
    background: url("mirino.jpg") no-repeat scroll 1px 1px #C0C0C0;
    display: inline;
    font-size: 12px;
    margin: 0 0 5px;
    padding: 1px 1px 1px 15px;
}
.pform {
    display: inline;
}
div#pubblicitacasua1 {
    background: none repeat scroll 0 0 #FFFF51;
    border: 1px dotted #C0C0C0;
    float: right;
    margin: 5px 0 5px 5px;
    padding: 5px;
}
div#pubblicitacasua2 {
    float: right;
    margin: 5px 0 5px 5px;
    padding: 5px;
}
div#pubblicitacasua3 {
    border: 0 none;
    margin: 0 auto;
    padding: 2px;
    width: 468px;
}
div#pubblicitacasua4 {
    background: none repeat scroll 0 0 #FFFF51;
    border: 1px dotted #C0C0C0;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
    width: 468px;
}
.esempio {
    background: none repeat scroll 0 0 #FFFFE1;
    border: 1px dotted #8080FF;
    color: #004080;
    font-family: sans-serif,arial;
    font-size: 110%;
    margin: 5px;
    padding: 10px;
}
div#paginaprecedente {
    float: left;
    margin-bottom: 10px;
    margin-left: 140px;
}
div#paginasuccessiva {
    float: right;
    margin-bottom: 10px;
    margin-right: 140px;
}
.linksuccepre {
    color: #8B8B8B;
    font-size: 100%;
    text-decoration: none;
}
div#pubbinf {
    text-align: center;
}
div#numpagine {
    color: #8B8B8B;
    font-size: 100%;
    margin: 40px 0 0;
    text-align: center;
    text-decoration: none;
}
div#footer {
    border: 0 none;
    clear: both;
    color: #C0C0C0;
    font-family: arial,sans-serif;
    font-size: 90%;
    padding: 5px 0;
    text-align: center;
}
.footerlink {
    color: #C0C0C0;
    text-decoration: underline;
}
.internetexplorer {
    font-family: arial,sans-serif;
    font-size: 100%;
}
.esempi {
    color: #004080;
    font-family: sans-serif,arial;
    font-size: 105%;
    font-style: italic;
}

.titolosito1 {
    color: white;
    font-family: arial black,arial,sans-serif;
    font-size: 50px;
}
.titolosito2 {
    color: white;
    font-family: arial black,arial,sans-serif;
    font-size: 20px;
}
.colxxx {
    color: #FF4040;
}
.colforum {
    color: #FF8000;
}
.und {
    text-decoration: underline;
}
.bol {
    font-weight: bold;
}
.cor {
    font-style: italic;
}
.giochimenu {
    color: #800000;
    font-family: Staccato222 BT,verdana,arial;
    font-size: 120%;
}
.dirmenu {
    color: green;
    font-weight: bold;
}
dl.esempiolist {
    margin: 10px 5px 5px 10px;
    padding: 0;
    text-decoration: none;
}

**DakJak** · 21-11-2012, 22:12

Ecco l'ultima parte del CSS non melo ha fatto mettere in 1 messaggio solo:

codice:

.comes {
    color: #000000;
    font-family: sans-serif,arial;
    font-size: 90%;
    font-style: italic;
}
dl.esempiolist dt {
    border-left: 2px solid #EAEA00;
    color: #004080;
    font-family: sans-serif,arial;
    font-size: 120%;
    font-style: italic;
    margin: 0;
    padding: 0 0 0 13px;
    text-decoration: none;
}
dl.esempiolist dd {
    border-left: 2px solid #EAEA00;
    margin: 0 0 20px;
    padding: 2px 0 0 5px;
}
dl.ricerche {
    margin: 10px 5px 5px 10px;
    padding: 0;
    text-decoration: none;
}
dl.ricerche dt {
    border-left: 2px solid #EAEA00;
    color: #004080;
    font-family: sans-serif,arial;
    font-size: 120%;
    font-style: italic;
    margin: 40px 0 0;
    padding: 0 0 0 13px;
    text-decoration: none;
}
dl.ricerche dd {
    border-left: 2px solid #EAEA00;
    margin: 0 0 20px;
    padding: 2px 0 0 5px;
}
.linktip {
    color: #0080C0;
    font-size: 80%;
}
.linu {
    color: #004080;
    font-family: sans-serif,arial;
    font-size: 95%;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
}
ul.testo {
    margin: 10px;
    padding: 10px;
}ul.testo li {
    margin: 5px;
    padding: 3px;
}
table.tabdati {
    border: 2px solid black;
    border-collapse: collapse;
}
table.tabdati td {
    border: 1px solid black;
    font-family: sans-serif,arial;
    padding: 10px;
    text-decoration: none;
}
table.tabdatib {
    border: 2px solid black;
    border-collapse: collapse;
}
table.tabdatib td {
    border: 1px solid black;
    font-family: sans-serif,arial;
    padding: 2px;
    text-decoration: none;
}
.tabtit {
    background: none repeat scroll 0 0 #F2F9FF;
    color: #000050;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}
.tabdato {
    background: none repeat scroll 0 0 #F2F9FF;
    color: #000050;
    font-weight: bold;
    text-align: center;
}
.sfondi {
    border: 1px solid black;
    cursor: pointer;
    height: 85px;
    width: 85px;
}
.buttinv {
    background: url("invia.png") no-repeat scroll 0 0 white;
    border: 0 none;
    color: #000000;
    cursor: pointer;
    display: inline;
    height: 28px;
    width: 86px;
}
.immrot {
    border: 0 none;
    height: 17px;
    margin-top: 3px;
    width: 72px;
}
.linkrott {
    color: #0066CC;
    cursor: pointer;
    text-decoration: underline;
}
.taberrore {
    border: 2px solid green;
    margin: 10px;
    padding: 8px;
}
h1 {
    color: #000050;
    font-family: verdana,arial;
    font-size: 220%;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
h2 {
    color: #000050;
    font-family: verdana,arial;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
h3 {
    color: #000050;
    font-family: verdana,arial;
    font-size: 140%;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
}
.login {
    background: url("login.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    display: inline;
    height: 23px;
    padding: 3px;
    width: 74px;
}
.logout {
    border: 0 none;
    height: 23px;
    width: 74px;
}
.formlogin {
    background: none repeat scroll 0 0 #E8E8FF;
    font-family: Verdana,arial;
    font-size: 80%;
}

.titmen {
    color: #FFFFCE;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.rigasx {
    background-image: url("sfondo555.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    border-top: 2px solid #EAEAEA;
    height: 8px;
    margin: 8px 0 0 2px;
}

**Mich_** · 22-11-2012, 09:38

Quando il codice e` lungo, e` meglio inserire un link (eventualmente in un sito di prova, se non si ha un sito proprio o se non e` il caso di postare il link vero).

Comunque non hai postato il DOCTYPE, che per questo genere di errori e` molto importante.

Se non hai un DOCTYPE nella pagina e` logico che i browser interpretino come vogliono.
Prova pero` con una DTD Strict (ma verifica poi la congruenza della tua sintassi con la DTD - vedi i validatori HTML e CSS - trovi i riferimenti tra i "link utili")

PS: l'aggettivo strano puo` voler dire tutto e anche niente, per cui non e` da usarsi nel titolo di una discussione. Ora correggo io, ma un'altra volta potremmo chiudere la discussione.

**DakJak** · 22-11-2012, 15:07

Mich grazie, ma non capisco cosa intendi, puoi spiegarti meglio?
Grazie!!

**Mich_** · 22-11-2012, 15:36

Nel tuo file c'e` il DOCTYPE all'inizio?
Nel codice postato non si vede.

**DakJak** · 22-11-2012, 17:44

No non c'è, ma non so cosè è questo il problema

!

Discussione: differenti visualizzazioni con browser diversi [era: Problema strano!]

Strumenti discussione

Ricerca discussione

Visualizza

Problema strano!

Permessi di invio