problema con il border

**sberm** · 11-05-2007, 19:41

ora non ho il codice sotto mano però vi espongo cmq il mio problema.
ho fatto il layout della pagina con i float (due colonne).
al content volevo dargli un border-top: 1px solid #ccc; e lo stesso per il border-left.
il problema è che mi visualizza solamente il border-top. il left non me lo caga.
ho fatto mille tentativi pensando che magari andasse sotto la colonna di navigazione ma provando ad allontanare con margini e fare le gerarchie con z-index non mi cambia nulla.
avete mica un 'idea di come questo sia possibile?
ciao e grazie

**Vincent.Zeno** · 11-05-2007, 20:19

Originariamente inviato da sberm
avete mica un 'idea di come questo sia possibile?

portremmo farcela se postassi il codice e ci indicassi il DTD

**sberm** · 12-05-2007, 13:23

ecco il codice:

CSS

#container { font-family: Georgia, "Times New Roman", Times, serif; position: relative; width: 960px; margin: 0px auto;}

#navigator {position: absolute; top: 160px; left: 0px; width: 160px; z-index: 2; }
#navigator ul {padding-right : 0px; padding-left: 0px; padding-bottom: 5px; margin: 0px 0px 20px; padding-top: 5px; list-style-type: none;}
#navigator li a {padding-top: 2px; padding-bottom: 2px; padding-right: 4px;}
#navigator ul a {font-size: 10pt; display: block; width: 157px; color: #000;margin-bottom: 4px; text-decoration: none; text-align: right; margin-right: 0px;}
#navigator ul a:hover {color: white; background-color: #ccc; text-decoration: none;}
#navigator ul a#activelink {color: #f00; text-decoration: none;}
#content {margin: 0px 0px 0px 175px; }
#titlex {border-left: 1px solid #ccc; border-top: 1px solid #ccc; position: absolute; top: 150px; left: 170px; width: 790px;}

#header { height: 200px;}
#footer { background-color: #f33; height: 25px; clear: both; }
#footertext { color: black; font-size: 8pt; text-align: right; z-index: 3; visibility: visible; margin: 15px;}
#footertext a { color: white; font-size: 8pt; background-color: transparent; }

img {float: left;}
.boxone1 {width: 450px; margin: 10px 20px 20px 30px; padding: 0px; float: left;}
.boxone1 p {color: red; line-height: 25px; background-color: transparent; padding-left: 6px; border-top: 1px solid #999; border-bottom: 1px dashed #999; display: block; text-decoration: none;}
.boxone1 ul {color: #666; font-size: 10pt; margin: 10px 0px 10px 0px; visibility: visible; list-style-image: url(immagini/li.gif); float:left; display: block;}
.boxone1 li a {color: #666; font-size: 10pt; width: 450px; border-top: inherit; border-bottom: 1px solid white; }
.boxone1 li a:hover { color: red; font-size: 10pt; background-color: transparent; border-top: inherit; border-bottom: 1px dashed #999;}
.boxone1 img {margin: 10px 0px 10px 20px; float: left;}

#posizione { color: #999; font-size: 10pt; height: 20px; width: 190px; left: 215px; top: 82px; position: absolute; visibility: visible; }
#posizione a { color: #999; font-size: 10pt; text-decoration: none;}
#posizione a:hover { color: red; font-size: 10pt; text-decoration: none;}
#posizione { width: 220px; left: 212px; top: 82px; position: absolute; visibility: visible; }

**sberm** · 12-05-2007, 13:35

ecco il codice:

XHTML

<body>
<div id="container">
<div id="header">
[img]../immagini/logo2.jpg[/img]
</div>

<div id="content">
<div id="titlex">
</div>
<div class="boxone1">

Materiale</p>
<ul>
[*]1
[*]2
[*]3
[*]4
[*]5
[*]6
[*]7
[*]8
[/list]
</div>

</div>

<div id="navigator">
<ul>
[*]10
[*]11
[*]12
[*]13
[*]14
[*]15
[*]16
[*]17
[*]18
[*]19
[*]20
[*]21
[/list]
</div>

<div id="posizione">
Piam Onlus > Materiale informativo
</div>

<div id="footer">
<div id="footertext">
© 2005 - Grafica, layout e contenuti sono di esclusiva proprietà del progetto BOOM

Note e informazioni legali
</div>
</div>
</div>

</body>

**Vincent.Zeno** · 12-05-2007, 14:03

Mi pare che questa sia una di quelle situazione in cui il problema di interpretazione da parte dei browser abbia la meglio...

Intanto devo farti notare che non hai definito il DTD e che questo ti crea maggiori problemi.

Ma, per cercare di aiutarti....

ho notato che in div content "desidera" una misura in altezza (su IE) per farsi vedere: ovvero "basta" che difinisci height: 100% e il bordo si vede con dentro i contenuti... questo comporta che devi poi anche rivedere il resto...
Non ho verificato su FireFox.

Ciao

Discussione: problema con il border

Strumenti discussione

Ricerca discussione

Visualizza

problema con il border

Re: problema con il border

Permessi di invio