Div e bordo top, eliminandolo compare uno spazio

**Acraft** · 28-03-2013, 00:07

Ciao a tutti,
mi succede una cosa per me, inesperto, strana..

metto 3 blocchi div in un contenitore... correttamente si mettono uno sotto l'altro
su uno di questi vorrei mettere il bordo sui 3 lati meno che il top.
ma eliminandolo si crea uno spazio.
Qualcuno mi sà aiutare per favore?

grazie

codice:

<!DOCTYPE html>
    <meta charset="UTF-8" />

    <style>
        div.header_tabContainer{
            height: 30px;
            margin: 0px;
            vertical-align: middle;
            color:#ffffff;
        }
        div.body_tabContainer{
            border:#999 1px solid ;
            border-top:none;
            margin: 0px;
        }
        div.tabContainer .line_decorator{
            background-color:#0098D4;
            margin: 0px;
            height: 5px;
            width:300px ;
        }
        div.contenitore_tab{
            margin: 8px 8px;
            min-height: 100px;
        }
        div.tabContainer{
            height: auto;
            width:300px ;
            font-size: 0.6875em;
            color: #666;}
        div.tabContainer ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            white-space: nowrap
        }
        div.tabContainer li{
            display: inline;
            line-height: 30px;
            margin: 0;
            padding:0;
            text-transform: uppercase;
        }
        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 8px 0.5em;
            background: #ccc;
            color:#ffffff;
        }
        div.tabContainer li a:hover{
            background-color: #0098D4;
            color:#ffffff;
        }
        div.tabContainer li.activetab a{
            border-bottom:none;
            background-color:#0098D4;
        }
    </style>
</head>
<body>
<div class="tabContainer">
    <div class="header_tabContainer">
        <ul>
            <li class="activetab">Primo[*]Secondo[*]Terzo[/list]
    </div>
    <div class="line_decorator"></div>
    <div class="body_tabContainer">
        <div class="contenitore_tab"></div>
    </div>
</div>
</body>
</html>

**Acraft** · 28-03-2013, 01:12

mettendo

codice:

        
div.contenitore_tab{
            margin: 0px 8px 8px 8px;
            min-height: 100px;
        }

il problema si risolve, ho provato perchè
mi sono accorto che il bordo partiva dal primo oggetto contenuto..
ma poi mi crea uno spazio di 1/2px tra il line_decorator e header_tabContainer

come posso risolvere?

**pascalman** · 28-03-2013, 12:21

Ho cambiato il padding da 8px a 9px.

Spero sia ok.

Ciao

codice:

        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 9px 0.5em;
            background: #ccc;
            color:#ffffff;
        }

**Acraft** · 28-03-2013, 14:34

Originariamente inviato da pascalman
Ho cambiato il padding da 8px a 9px.

Spero sia ok.

Ciao

codice:

        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 9px 0.5em;
            background: #ccc;
            color:#ffffff;
        }

Ciao grazie della risposta,
ma facendo così non ho compatibilità con tutti i browser,
in quel modo, con Safari e firefox ad esempio, mi sale sopra alla linea il tab,
solo chrome lo vede bene, non pretendo IE ma almeno su Chrome Firefox e safari vorrei vederlo uguale

Altri consigli?

**pascalman** · 28-03-2013, 16:18

Ricordati di aprire il tag <head> in alto.

Potrebbe essere un errore di approssimazione.
Prova cosi (su IE9, Chrome e Safari vanno ok, Firefox non ce l'ho installato ma credo debba andar bene anche in quel caso):

codice:

div.tabContainer{
            height: auto;
            width:300px ;
            /*font-size: 0.6875em;*/
            font-size: 12px;
            color: #666;
}

**Acraft** · 28-03-2013, 16:31

Originariamente inviato da pascalman
Ricordati di aprire il tag <head> in alto.

Si è che ho eliminato un mare di js inutili al nostro scopo

e si è cancellato

Grazie appena riesco provo!

**Acraft** · 28-03-2013, 20:26

Ho provato , ho comunque una leggera sovrapposizione tra tab e linea sottostante
si vede di più su chrome un pò meno su firefox..

Allego l'immagine

il mio codice è il seguente ora ... cosa sbaglio?
css

codice:

   div.header_tabContainer{
            height: 30px;
            margin: 0px;
            vertical-align: middle;
            color:#ffffff;
        }
        div.body_tabContainer{
            border:#999 1px solid ;
            border-top:none;
            margin: 0px;
        }
        div.tabContainer .line_decorator{
            background-color:#0098D4;
            margin: 0px;
            height: 5px;
            width:300px ;
        }
        div.contenitore_tab{
            margin: 0px 8px 8px 8px;
            min-height: 100px;
        }
        div.tabContainer{
            height: auto;
            width:300px ;
            /*font-size: 0.6875em;*/
            font-size: 12px;
            color: #666;}
        div.tabContainer ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            white-space: nowrap
        }
        div.tabContainer li{
            display: inline;
            line-height: 30px;
            margin: 0;
            padding:0;
            text-transform: uppercase;
        }
        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 9px 0.5em;
            background: #ccc;
            color:#ffffff;
        }
        div.tabContainer li a:hover{
            background-color: #0098D4;
            color:#ffffff;
        }
        div.tabContainer li.activetab a{
            border-bottom:none;
            background-color:#0098D4;
        }

html

codice:

<div class="tabContainer">
    <div class="header_tabContainer">
        <ul>
            <li class="activetab">MANGIARE[*]DORMIRE[*]SHOP[/list]
    </div>
    <div class="line_decorator">
    </div>
    <div class="body_tabContainer">
        <div class="contenitore_tab"></div>
    </div>
</div>

**pascalman** · 28-03-2013, 21:09

Ecco qua il codice, con le modifiche evidenziate

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style>
			div.header_tabContainer{
            /*height: 30px;*/ 
            margin: 0px;
            vertical-align: middle;
            color:#ffffff;
						
            overflow: hidden; 
        }
        div.body_tabContainer{
            border:#999 1px solid ;
            border-top:none;
            margin: 0px;
        }
        div.tabContainer .line_decorator{
            background-color:#0098D4;
            margin: 0px;
            height: 5px;
            width:300px ;
        }
        div.contenitore_tab{
            margin: 0px 8px 8px 8px;
            min-height: 100px;
        }
        div.tabContainer{
            height: auto;
            width:300px ;
            /*font-size: 0.6875em;*/
            font-size: 12px; /* puoi inserire qualsiasi valore o ripristinare font-size: 0.6875em; */
            color: #666;}
        div.tabContainer ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            white-space: nowrap; /* mancava un ; */ 
						
            overflow: hidden; 
        }
        div.tabContainer li{
            /*display: inline;					
            line-height: 30px;*/             margin: 0;
            padding:0;
            text-transform: uppercase;
						
            display: block;
            margin-right: 4px; /* spazio tra i tab */
            float: left; 
        }
        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 9px 0.5em;
            background: #ccc;
            color:#ffffff;
						
            display: block;
         }
        div.tabContainer li a:hover{
            background-color: #0098D4;
            color:#ffffff;
        }
        div.tabContainer li.activetab a{
            border-bottom:none;
            background-color:#0098D4;
        }
		</style>
	</head>

	<div class="tabContainer">
    <div class="header_tabContainer">
        <ul>
            <li class="activetab">MANGIARE[*]DORMIRE[*]SHOP[/list]
    </div>
    <div class="line_decorator">
    </div>
    <div class="body_tabContainer">
        <div class="contenitore_tab"></div>
    </div>
	</div>
</html>

**Nobody33** · 28-03-2013, 21:16

Ad un'occhiata veloce pare che la linea incriminata è

codice:

padding: 9px 0.5em;

nella classe

codice:

div.tabContainer li a

prova a cambiare il padding a 8 px (x chrome) e dovrebbe fungere.

per firefox dovrebbe essere 7px.

per IE non lo so.

Il tutto pare un po un casino, perché ti viene visualizzato diversamente da ogni browser

EDIT

Una possibile soluzione potrebbe essere:

codice:

div.header_tabContainer{
            height: 30px;
            margin: 0px;
    
            vertical-align: middle;
            color:#ffffff;
        }
        div.body_tabContainer{
            border:#999 1px solid ;
            border-top:none;
            margin: 0px;
        }
        div.tabContainer .line_decorator{
      position:relative;   //   modifichi qui  
      z-index:999999;    //   e qui 
            background-color:#0098D4;
            margin: 0px;
            height: 5px;
            width:300px ;
    padding:0px;
    z-index:999999;
        }
        div.contenitore_tab{
            margin: 0px 8px 8px 8px;
            min-height: 100px;
        }
        div.tabContainer{
            height: auto;
            width:300px ;
            /*font-size: 0.6875em;*/
            font-size: 12px;
            color: #666;}
        div.tabContainer ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            white-space: nowrap  // questa qui non ti serve
        }
        div.tabContainer li{
            display: inline;
            line-height: 30px;
            margin: 0;
            padding:0;
            text-transform: uppercase;
        }
        div.tabContainer li a{
            text-decoration: none;
            border:none;
            padding: 8px 0.5em;
            margin:0px;
            background: #ccc;
            color:#ffffff;
            z-index:1;    // se vuoi attivare anche quello, devi aggiungere una posizione
        }
        div.tabContainer li a:hover{
            background-color: #0098D4;
            color:#ffffff;
        }
        div.tabContainer li.activetab a{
            border-bottom:none;
            background-color:#0098D4;
        }

su chrome e FF funziona, al 90% anche su IE

Discussione: Div e bordo top, eliminandolo compare uno spazio

Strumenti discussione

Ricerca discussione

Visualizza

Div e bordo top, eliminandolo compare uno spazio

Permessi di invio