I wonder if someone can help me here.

 

Please see this link, site being built: barbershopera.com/index.html

 

When viewed in Firefox, there is a margin below the header (basically the gap between the grey border below the logo, and the nav) - this shouldn't be here.

 

View the same page in Chrome to see what it should look like.

 

Any comments much appreciated. Thanks.

You might want to use a css reset so every html block doesn't have a standard margin and/or padding

 

Here is the best from Erik Meyer:

 

http://www.cssreset.com/scripts/eric-meyer-reset-css/

 

I think this will fix it

 

Good luck

Huh. Looks fine in Chrome, Safari (I just checked) -- what about IE?

 

I checked it out with Firebug, and I expected to find inherited margin or padding definitions or something (which would be solved by Row's suggestion, I think), but I didn't find anything there, it's just blank space. I don't understand that.

 

Have you tried Row's suggestion? Did it work?

 

About that, Row, I'm curious, how does this:

 

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;
}

 

compare to this?

* {padding:0;border:0;margin:0;}

Don't use the universal selector as a reset,

 

see here cssreset [dot] com/scripts/universal-selector-css-reset/

I think the idea of targeting specific controls was to improve performance. Apparently the * selector is very expensive.

 

You will always have the styling of the * to all elements, so if you wish to add some margin to a specific class then you already have a 0 margin and 0 padding and then you add your own styles for example margin-right: 10px. You get duplicated code then!

 

If you want something like this:

.container {
    margin: 10px auto;
} 

Then the browser will see it like this:

.container {
    .margin: 0;
    .padding: 0;
    .margin: 10px auto;
} 

This is bad practise in HTML and I would consider not using it

I already have a reset in place.

 

It's quite odd isn't it - only in Firefox does this blank space appear. Does anyone else have any other suggestions?