Allineamento MasterPage con firefox

domenica 01 luglio 2007 - 11.46

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

Giscotech Profilo | Junior Member

140 messaggi | Data Invio: dom 1 lug 2007 - 11:46

Salve a tutti, il mio problema è questo:
mentre con IE 6 riesco a visualizzare la mia pagina collegata alla mia masterpage con allineamento orizzontale centrato, con firefox la stessa pagina la visualizzo con allineamento a sx.

Qualcuno saprebbe dirmi dove sbaglio?

Giuseppe Scordo
Giscotech Informatics

xe Profilo | Newbie

29 messaggi | Data Invio: dom 1 lug 2007 - 13:09

una descrizione1pò vaga....
Deligere oportet quem velis diligere

martinez Profilo | Senior Member

274 messaggi | Data Invio: lun 2 lug 2007 - 20:01

firefox e IE(tutte le versioni) hanno un modo diverso di interpretare i CSS quindi credo che il tuo prob sia questo

se vuoi puoi farci vedere un po di codice della tua master per capire dove sta il problema.

Saluti
Antonio

Giscotech Profilo | Junior Member

140 messaggi | Data Invio: mar 3 lug 2007 - 08:36

Allora , la parte dei css è questa

<%@ Master Language="VB" CodeFile="BrodbeckEVO1.master.vb" Inherits="BrodbeckEVO1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Pagina senza titolo</title>
<style type="text/css">

a:link { font-family: Tahoma; font-size: 10pt; color: #08124e ; text-decoration: none }
a:hover { font-size: 10pt; font-family: Tahoma; color:#ff0000; text-decoration: none }
a { font-family: Tahoma; font-size: 10pt; color: #08124e ; text-decoration: none }
hlk { font-family: Tahoma; font-size: 20pt; color: #08124e ; text-decoration: none }

#dropmenudiv{
position:absolute;
background-color: #91adff;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #191960;
}

/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: square;
width: 135px;
background-color: #FFFFB9;
}

</style>

mentre la parte relativa al corpo (iniziale) è quest'altra

<body style="vertical-align: top; margin-top:0px; text-align: center">
<form id="form1" runat="server" style=" vertical-align:top">
<div style="vertical-align: top; text-align: center;">
<div style=" border-top:0; width: 824px; height: 664px; vertical-align: top; clip: rect(0px auto auto auto); top: 0px;">
<asp:Panel ID="Panel1" runat="server" Height="120px" Width="608px" BackColor="Black">
<img src="Image/header.gif" /></asp:Panel>
<table style="width: 850px; border-collapse: collapse">

martinez Profilo | Senior Member

274 messaggi | Data Invio: mar 3 lug 2007 - 16:43

Ciao

il problema probabilmente = "text-align: center" che con IE centra tutto, compreso box model, quindi mettendo in "doby text-align: center" tutto il contentuo verrà centrato all'interno del body... ma questa regola, non solo non è in sintesi con quanto espresso dalle regole CSS ma viene giustamente disattesa ed interpretata regolarmente sia da firefox che dalla maggior parte dei browser che si limitano alla semplice centratura dei testi all'interno del box model in questione ...

dovrai quindi specificare per i browser diversi da IE il giusto width ed i relativi margini per la centratura del box model

per un'area da 760px dovrai creare ad esempio un div da contenere in body con width: 760px e margin: auto

spero di essere stato d'aiuto.

Saluti
Antonio

Giscotech Profilo | Junior Member

140 messaggi | Data Invio: mar 3 lug 2007 - 17:24

Grazie per l'aiuto, non potresti andare più in dettaglio.
Come faccio a modificare la mia master page?

Giuseppe Scordo
Giscotech Informatics

martinez Profilo | Senior Member

274 messaggi | Data Invio: mar 3 lug 2007 - 19:12

Ciao
Credo di averti già dato per sommi capi la soluzione ...

cmq ... supponiamo che tu voglia realizzare un box centrato nel body da 760px avremo nella parte css della tua master page questo:

html
{
margin: 0;
padding: 0;
}

body
{
margin: 0;
padding: 0;
text-align: center; /* Dovuto alla centratura per IE5.x per Win */
}

#centrato
{
width: 760px; /* qui puoi mettere il valore che ti serve come dimensione del box da centrare (100% se vuoi occupare tutta la pagina)
margin: auto;
text-align: left; /* ripristina le impostazioni di layout per IE5.x per Win */
}

quindi togli tutti i riferimenti CSS dalla tua master page e comincia con questi ... poi vedrai che potrai reinseirere tutti quelli che leggo nella tua masterpage ...
adattando in funzione della centratura fatta ... non è difficile

un consiglio usa una sola locazione per i CSS se li metti nell'HEAD della pagina segui sempre la stessa politica -> se li scrivi in-line col markup non usare l'head oppure cosa migliore utilizza un foglio esterno per inserire tutti i CSS che servono ... ne trarrai grossi vantaggi soprattutto se utilizzerai i temi di asp.net 2.0

una volta scritti tali CSS li mettera in pratica utilizzando il seguente HTML

....
<body>
<div id="centrato">
... qui tutto il resto della tua master
</div>
</body>
....

spero di essere stato chiaro.
saluti

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !