CSS header with Table cell

Question

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.

FelipeAls · Accepted Answer · 2013-05-28 10:26:00Z

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)

answered May 28, 2013 at 10:26

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan de Vries · Accepted Answer · 2013-05-28 09:43:26Z

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.

answered May 28, 2013 at 9:43

Ryan de Vries

6885 silver badges13 bronze badges

4 Comments

Ryan de Vries Over a year ago

It does, it resets your whole css. So it will bring it 5-10px up on top. Did you replace my whole css with yours? Try it out in JSFiddle aswell.

Apalabrados Over a year ago

Yes i did, but the gap already is visible. I run your link and happens the same.

Ryan de Vries Over a year ago

then it might be the browser you are running. running an old browser? everything works fine here with the reset code in chrome.

Apalabrados Over a year ago

I use Chrome and Mac OSX. latest release

Collectives™ on Stack Overflow

CSS header with Table cell

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related