problemi di visualizzazione in firefox

**vehuel** · 05-12-2007, 10:24

purtroppo ho 2 differenti visualizzazioni della pagina, e quella in firefox non è corretta.
Ho 2 box:
<div id="logo">[img]/images/logo.gif[/img]
</div>
<div class="box">
<h1>Chi siamo</h1>

Lorem ipsum lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing. </p>
<ul style="margin-top:10px;">[*]lorem ipsum[*]lorem ipsum.[*]lorem ipsum[/list]
</div>

questo è il css:

.box {background : #f7f7f7;border : 1px solid #f0e9eb;padding : 15px;}
#logo {margin-bottom :120px;}

il problema è che in firefox il box viene messo molto più in giù rispetto ad explorer, non rispettando quindi il margine di 120px.

spero che qualcuno possa darmi una mano

ciao

**blekm** · 05-12-2007, 10:26

consiglio: è IE che interpreta male, dovresti cercare di ottimizzare per Firefox (magari anche per Opera) e poi "aggiustare" per IE

**vehuel** · 05-12-2007, 10:51

ho risolto a metà dando una larghezza al contenitore dell'immagine esattamente quanto la larghezza dell'immagine:
#logo {margin-bottom :20px; width:203px; }

poi a tentativi ho scoperto che dando un allineamento a sinistra all'immagine si posiziona in entrambi i browser come vorrei:

<div id="logo" >[img]/images/logo.gif[/img]
</div>

il problema è che align=left non è supportato, c'è qualche alternativa?

ciao

**blekm** · 05-12-2007, 10:53

Originariamente inviato da vehuel
ho risolto a metà dando una larghezza al contenitore dell'immagine esattamente quanto la larghezza dell'immagine:
#logo {margin-bottom :20px; width:203px; }

poi a tentativi ho scoperto che dando un allineamento a sinistra all'immagine si posiziona in entrambi i browser come vorrei:

<div id="logo" >[img]/images/logo.gif[/img]
</div>

il problema è che align=left non è supportato, c'è qualche alternativa?

ciao

non si usa align=left in quella maniera

imposta

float: left; sul div LOGO

**vehuel** · 05-12-2007, 11:00

se metto float:left sul div logo

in explorer logo e box si sovrappongono, in firefox box scende giù nella pagina.

funziona come dovrebbe solo con align=left sull'immagine.....

ciao

**blekm** · 05-12-2007, 11:01

se hai un link, postaci quello.

**vehuel** · 05-12-2007, 11:10

purtroppo ci sto ancora lavorando in locale:

questo è il codice della pagina:

<body>
<form id="form1" runat="server">

<div id="wrapper">
<div id="header">
<div id="nav">Home | Dove Siamo |
Peppe Gentile | Servizi | Contatti </div>
<div id="bg" style="background-image: url(images/bg.gif);"></div>
</div>
<div id="main-content">
<div id="left-column">
<div id="logo" >[img]/images/logo.gif[/img]
</div>
<div class="box">
<h1>Chi siamo</h1>

Lorem ipsum lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing. </p>
<ul style="margin-top:10px;">[*]lorem ipsum[*]lorem ipsum.[*]lorem ipsum[/list]
</div>
</div>
<div id="right-column">
<div id="main-image">[img]/images/xxxxx_img.jpg[/img]</div>
<div class="sidebar">
<h3> Navigazione</h3>
<div class="box">
<ul style="list-style-type:none">
<li style="padding:0 12px;background: url(/images/punto_rosso.gif) center left no-repeat ">Immobili in vendita
<li style="padding:0 12px;background: url(/images/punto_rosso.gif) center left no-repeat ">Immobili in fitto
<li style="padding:0 12px;background:url(/images/punto_rosso.gif) center left no-repeat ">Ricerca avanzata
<li style="padding:0 12px;background: url(/images/punto_rosso.gif) center left no-repeat ">Inviaci una richiesta[/list]
</div>

<h3>Area Riservata</h3>
<table width="100%" border="0">
<tr>
<td>
email</td>
<td><label>
<asp:TextBox ID="tbEmail" runat="server" CssClass="text"></asp:TextBox></label></td>
</tr>
<tr>
<td>password</td>
<td>
<asp:TextBox ID="tbPassword" runat="server" CssClass="text" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td><label>
<asp:Button ID="invia" runat="server" CssClass="text" Text="invia" CausesValidation="False" OnClick="invia_Click" />
<asp:Label ID="user" runat="server" CssClass="label"></asp:Label></label></td>
</tr>
<tr>
<td>
</td>
<td>[img]/images/punto_rosso.gif[/img]
<asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="True" Font-Names="Tahoma"
Font-Size="11px" NavigateUrl="~/ricordapwd.aspx">ricorda password</asp:HyperLink>

</td>
</tr>
</table>

<h3>
Newsletter</h3>
<table style="width:100%;" border="0">
<tr>
<td>email</td>
<td><label>
<asp:TextBox ID="tbNewsletter" runat="server" CssClass="text"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbNewsletter"
ErrorMessage="inserire una email">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="tbNewsletter"
ErrorMessage="email non valida" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
</label></td>
</tr>
<tr>
<td></td>
<td><label>
<asp:Button ID="btInvia" runat="server" CssClass="text" Text="iscrizione" OnClick="btInvia_Click" /></label></td>
</tr>
<tr>
<td>
</td>
<td>
[img]/images/punto_rosso.gif[/img]<asp:HyperLink ID="HyperLink2" runat="server"
Font-Bold="True" Font-Names="Tahoma" Font-Size="11px" NavigateUrl="~/cancellamailing.aspx">cancellazione da mailinglist</asp:HyperLink></td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Label ID="lblEsito" runat="server" EnableViewState="False" Font-Bold="True" Font-Names="Tahoma" Font-Size="11px" ForeColor="Red"></asp:Label></td>
</tr>
</table>
<div class="loghino">
[img]/images/fiaip_logo.jpg[/img]</div></div>
</div>
</div>
<div id="footer">Copyright © 2007 Immobiliare xxxx, Tutti i diritti riservati.

XHTML | CSS - <span class="crd">Web site Design</span> by : <a href="http://www.nettechitalia.com/" target="_blank">
Net&Tech Italia</a></div>
</div>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" ShowSummary="False" />
</form>
</body>

**vehuel** · 05-12-2007, 11:11

e questo il css:

#wrapper {margin : 0 auto;width : 816px; border: 1px solid #f0e9eb;border-right : 1px solid #f0e9eb;}
#header {margin : 0 1px;}
#bg {height : 36px;background : url(/images/bg.gif) repeat-x;}
#nav {background : #7a2e40;padding : 10px 20px;text-align : right;color : #f6dde3;}
#nav a:visited, #nav a:link {text-decoration : none;color : #f6dde3;}
#nav a:hover {text-decoration : none;color : #cccccc;}
#main-content {margin : 0 auto;}
#logo {margin-bottom :20px; width:203px; }
.box {background : #f7f7f7;border : 1px solid #f0e9eb;padding : 15px;}

.logotxt1 {font : normal 18px Tahoma, serif;color : #fa7393;margin : 10px 0 0 15px;}
.logotxt2 {font : normal 18px Tahoma, serif;color : #7a2e40; }
#left-column {width : 480px;padding : 0 30px 30px;float : left;}
#right-column {width : 270px;float : right;}
.crd a:visited, .crd a:link, .crd a:hover{text-decoration : none;color : #2a3845;cursor: text;}
#footer {background : #f7f7f7;border-top : 1px solid #f0e9eb;padding : 10px 15px;clear : both;}

/*** SideBAR ***/
#main-image {text-align : center;}
.sidebar {width : 218px;margin : 0 auto;padding : 10px 25px; }
.loghino { text-align:center;}

**vehuel** · 05-12-2007, 12:09

ho risolto:
<div id="logo" >[img]/images/logo.gif[/img]
</div>
<div class="box" style="margin-top:120px;">

ciao

Discussione: problemi di visualizzazione in firefox

Strumenti discussione

Ricerca discussione

Visualizza

problemi di visualizzazione in firefox

Permessi di invio