padding top

**ResianTaxidrive** · 29-08-2008, 10:57

Ho un momento di sclero e non capisco:

explorer non si comporta come dovrebbe.

Questo è il pezzo di html:

codice:

 <div class="oggetto" >[img]../uploads/barca-a-motore.jpg[/img]
            <div class="descrizione" >ANNO:1985

              MODELLO:Barca2

              POSTI:95

              PREZZO:

            </div>
          <div class="visualizza" >VISUALIZZA LA SCHEDA</div>
          </div>

Questo è il css:

codice:

.oggetto {
	width: 324px;
	float: left;
	padding-left: 0px;
	margin-left: 0px;
	height: 92px;
	margin-bottom: 10px;
	margin-right: 22px;
	
}
.oggetto a {
	font-size: 9px;
	color: #FFFFFF;
	text-decoration: none;
}

.oggetto img{
	float: left;
	margin-right: 2px;
	width: 90px;
	 
  }

.descrizione {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	background-color: #6a88ae;
	width: 225px;
	float: left;
	height: 70px;
	margin-bottom: 2px;
	padding-top:5px;
	padding-left:5px;
}

.visualizza {
	background-color: #666666;
	float:left;
	width: 225px;
	height: 20px;
	padding-left:5px;
}

Vi allego la schermata di FF che fa quello che dovrebbe:

**ResianTaxidrive** · 29-08-2008, 10:58

e quella di explorer che fa invece cose strane:

**gengix** · 29-08-2008, 11:22

Hai azzerato i margini e i padding generali?

codice:

* {
margin:0;
padding:0;
}

o

codice:

html, body {
margin:0;
padding:0;
}

**ResianTaxidrive** · 29-08-2008, 11:29

Ho provato a metterli ora ma la cosa no nsi è risolta. Ma il bello è che, se faccio una prova da zero e metto due contenitori uno sopra l'altro e gioco con le altezze e i padding top, tutto si comporta normalmente e in modo uguale nei due browser, in questa pagina invece no; explorer è come se non facesse aumentare l'altezza di un contenitore se viene messo un padding-top. Ma che succede? E' la prima volta che mi capita.

**ResianTaxidrive** · 29-08-2008, 12:17

Oggi è un bad css day, sti margini del cavolo mi fanno impazzire, sarà il php che incasina l'esploratore oltre che me?

**gengix** · 29-08-2008, 12:28

Io non definirei le altezze per i blocchi e giocherei su delle misure di testo scalabili, te lo consiglio.

Prova testare questo layout, non dovrebbe darti il problema che hai te.
Prova inoltre ingrandire le dimensioni del testo, perchè molti utenti lo fanno:

codice:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="formazione_Default6" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html {
    font-size:100%;
    }
    body {
    font: 1em/1.5 Arial, verdana, Tahoma, sans-serif;
    }
    .nascosto {
    position:absolute;
    left:-100000px;
    }
    .oggetto {
    float:left;
    font-size:0.75em;
    width:324px;
    height:1%;
    margin:0 22px 10px 0;
    }
    .oggetto:after {
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    }
    .oggetto img {
    float:left;
    width:7.5em;
    }
    .oggetto span {
    display:block;
    }
    .oggetto ul, .oggetto span {
    margin-left:7.9em;
    color:#fff;
    }
    .oggetto ul, .oggetto span a {
    color:#fff;
    }
    .oggetto ul {
    background-color: #6a88ae;
    list-style:none;
    padding:0.4em;
    }
    .oggetto span {
    background-color: #666666;
    padding:0.16em 0.16em 0.16em 0.41em;
    margin-top:0.25em;
    }
    </style>
</head>
<body>
<div class="oggetto">
	<h2 class="nascosto">Descrizione dell'oggetto</h2>
	[img]../uploads/barca-a-motore.jpg[/img]
	<ul>
		[*]Modello: Barca2
		[*]Posti: 95
		[*]Prezzo:
	[/list]
	<span>VISUALIZZA LA SCHEDA</span>
</div>
</body>
</html>

Le dimensioni e i valori dei padding e dei margini sono a scopo di esempio.

**ResianTaxidrive** · 29-08-2008, 13:40

Adesso provo col tuo sistema; di solito non metto le altezze nei blocchi ma questa volta l'ho fatto perchè ho una serie di oggetti tutti uguali che mi devono formare una sorta di griglia per cui ho messo l'altezza per essere sicura che fossero veramente tutti uguali; inoltre il motivo principale è l'immagine, e siccome devo forzare la dimensione di queste immagini a un valore fisso, la cella grigia mi deve andare a filo con l'immagine. Se non metto quindi una altezza fissa come fanno le celle grigia e quella azzurra ad avere la stessa altezza dell'immagine?

**gengix** · 29-08-2008, 13:56

Io ho salvato la tua immagine e ho ritagliato la foto. Giocando con i margin e i padding riesci ad ottenere il risultato che vuoi, in più se noti ho messo la larghezza dell'immagine impostata in em, così se un utente aumenta le dimensioni del font aumentano tutti gli elementi. Ovviamente l'immagine perderà di risoluzione, ma l'effetto generale è cmq omogeneo.

Un'altra soluzione può essere quella di usare la proprietà min-height utilizzando l'escamotage per farlo "bere" anche a IE6.

codice:

height:auto !important;
min-height:valore;
height:valore;

A mio avviso riesci ad ottenere quello che vuoi con la soluzione che ti ho postato.

EDIT: Alcuni consigli che possono esserti utili:
Utilizza una lista per i dettagli del tuo oggetto e non del testo libero dentro un div.

Dai un titolo alla sezione che informa l'utente, se proprio il titolo ti da fastidio, nascondilo come ho fatto io.
Utenti che utilizzano tecnologie assistive verranno cmq agevolati (idem per la descrizione dell'immagine, utilizza l'attributo alt per descrivere a fondo l'immagine, perchè in questo caso mi sembra che giochi un ruolo fondamentale nel contesto).

**ResianTaxidrive** · 01-09-2008, 12:36

Ok! ha funzionato! Prezioso anche il consiglio di non lasciare testo libero dentro un div! Grazie.

Discussione: padding top

Strumenti discussione

Ricerca discussione

Visualizza

padding top

Permessi di invio