0

I have a little issue related to a header where a small height come up and i do not know how to remove it.

HTML:

<div class="wrapper_header">

<div class="left_header">&nbsp;</div>
<div class="central_header fondo_amarillo">
    <div class="aleron_izquierdo"></div>
    <div class="menu_option"><a href="#">Option 1</a></div>
    <div class="menu_option"><a href="#">Option 2</a></div>
    <div class="menu_option"><a href="#">Option 3</a></div>
    <div class="menu_option"><a href="#">Option 4</a></div>
    <div class="menu_option"><a href="#">Option 5</a></div>
</div>
<div class="right_header fondo_amarillo">&nbsp;</div>

CSS:

.wrapper_header {
    width:100%;
    display:table;
}
.central_header {
    width:500px;
    display:table-cell;
}
.left_header {
    display:table-cell;
}
.right_header { display:table-cell; }
.left_header { 
    background-image:url(http://www.alarconrotulos.es/img/amarillo_cabecera_izq.png);
    background-repeat:repeat-x;
}
.aleron_izquierdo {
    width:130px;
    height:69px;
    background-image:url(http://www.alarconrotulos.es/img/pestana_cabecera_peque_960.png);
    position:relative;
    left:-130px;
    float:left;
}
.menu_option a {
    font-size:18px;
    height:69px;
    vertical-align:bottom;
    color:rgb(150,150,150);
    float:right;
    padding:0 5px;
    display: block;
    display: -webkit-box;
    -webkit-box-align: end;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: end;
    -moz-box-pack: center;
    display: box;
    box-align: end;
    box-pack: center;
}
.menu_option a:hover {
    color:rgb(84,84,84);
}
.fondo_amarillo {
    background-color:#FFFF58;
}

Here you run the above code: http://jsfiddle.net/aL447/

When you run the code, you will see that the central_header block has three pixels higher than it should be and I can not understand why.

Any ideas?

Thanks.

4

2 回答 2

1

By default, cells (or elements displayed as cells in CSS) are aligned vertically to baseline.
You expect vertical-align: top in this case, here's a working fiddle

baseline makes sense when you're aligning an input and a label or text and an image and each are of different height. But for layout, it's more likely to be top or bottom values, maybe middle. Be sure to test with an item occupying 2 lines by forcing it with a
(worst case)

于 2013-05-28T10:26:00.783 回答
0

Try to reset it with this reset code

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.wrapper_header {
    width:100%;
    display:table;
}
.central_header {
    width:500px;
    display:table-cell;
}
.left_header {
    display:table-cell;
}
.right_header { display:table-cell; }
.left_header { 
    background-image:url(http://www.alarconrotulos.es/img/amarillo_cabecera_izq.png);
    background-repeat:repeat-x;
}
.aleron_izquierdo {
    width:130px;
    height:69px;
    background-image:url(http://www.alarconrotulos.es/img/pestana_cabecera_peque_960.png);
    position:relative;
    left:-130px;
    float:left;
}
.menu_option a {
    font-size:18px;
    height:69px;
    vertical-align:bottom;
    color:rgb(150,150,150);
    float:right;
    padding:0 5px;
    display: block;
    display: -webkit-box;
    -webkit-box-align: end;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: end;
    -moz-box-pack: center;
    display: box;
    box-align: end;
    box-pack: center;
}
.menu_option a:hover {
    color:rgb(84,84,84);
}
.fondo_amarillo {
    background-color:#FFFF58;
}

I have placed everything here you need to change with your CSS code.

于 2013-05-28T09:43:26.037 回答