perdida borde en el lado derecho siempre

Pax-Man · #1 (**permalink**) 08/10/2009, 15:50

Saludos, estoy trabajando en un diseNo usando un 1kbcss (framework de maquetacion css) y estoy algo trabajo con unos divs que al momento de colocarles un borde pierdo el del lado derecho, sim importar el ancho de este... asumo que al tener una dimension fija mi div los pixeles de ancho del borde a la derecha se perderan... pero realmente no se ya como hacer para solucionar esto... realmente es bastante importante para mi desarrollo...

anexo los codigos para que los puedan revisar y me expliquen un poco donde esta el problema.. o como solucionarlo..

Código html:

Ver original<!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>The 1Kb Grid Demo – 12 columns, 80 pixels each, with 10 pixel gutter</title>
    <link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>
    <link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
</head>
<body>
 
<div class="row">
    <div class="column grid_12"><p>12</p></div>
</div>
 
<div class="row">
    <div class="column grid_8"><p>8</p>
        <div class="row">
            <div class="column grid_4"><p>4</p></div>
            <div class="column grid_4"><p>4</p></div>
        </div>
    </div>
    <div class="column grid_4">
        <div class="row">
            <div class="column grid_4 boxhead">4</div>
            <div class="column grid_4 boxbody">45</div>
        </div>
    </div>
</div>
 
</body>
</html>

Css de la la grilla provisto por 1kbcss

Código css:

Ver original/* ================ */
/* = The 1Kb Grid = */     /* 12 columns, 80 pixels each, with 10 pixel gutter */
/* ================ */
 
.grid_1 { width:80px; }
.grid_2 { width:170px; }
.grid_3 { width:260px; }
.grid_4 { width:350px; }
.grid_5 { width:440px; }
.grid_6 { width:530px; }
.grid_7 { width:620px; }
.grid_8 { width:710px; }
.grid_9 { width:800px; }
.grid_10 { width:890px; }
.grid_11 { width:980px; }
.grid_12 { width:1070px; }
 
.column {
    margin: 0 5px;
    overflow: hidden;
    float: left;
    display: inline;
}
.row {
    width: 1080px;
    margin: 0 auto;
    overflow: hidden;
}
.row .row {
    margin: 0 -5px;
    width: auto;
    display: inline-block;
}

Css propio del diseNo...

Código css:

Ver originalbody
{
    background: #f6f6f6;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 10px;
    margin: 0 0 0 0;
}
p
{
    border: 1px solid #000;
    color: #000;
    font: 60px/100px Helvetica;
    margin: 0 0 10px 0;
    text-align: center;
}
.header
{
    background: #000;
    color: #fff;
    line-height: 100px;
}
.nav
{
    background: #f6f6f6;
    color: Gray;
    margin: 5px 0 5px 10px;
}
.nav a,a:link,a:visited
{
    color: Gray;
    font-weight: bold;
}
.boxhead
{
    color: #fff;
    background: #0099ff;
    text-align: center;
    font-size:16px;
    font-weight:bold;
    height:24px;
}
.boxbody
{
    border-bottom:1px solid #dedede;
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;    
    background:#fff;
    }

Mikmoro · #2 (**permalink**) 08/10/2009, 16:04

¿Al aplicar un borde a cuál?

Pax-Man · #3 (**permalink**) 08/10/2009, 16:10

disculpa... es en boxbody y boxhead aunque boxhead no tiene la propiedad de borde, pero si se la agrego tiene el mismo efecto