Twenty Twelve header whitespace under image solution
-
I’m making a custom theme using Twenty Twelve header functionality. I had a whitespace problem which I solved – so I thought I’d pass on the information in case it can help someone else…
I included Twenty Twelve’s custom-header.php file into functions.php and copied and pasted the header code into header.php (except the nav which I deleted – I’ve placed that elsewhere).
It worked – but with a couple of pixels whitespace under the header image (when viewed with Firefox 18, Chrome 24 and IE 10).
I used Firebug to identify that the whitespace was in the header > a element… which was also appearing at the bottom of the header div.
I tried removing the margins and padding on that a element first, but it didn’t work. However, I DID manage to solve this by adding the following TWO rules:
header#main-header > a { display:block; line-height:0; }
I don’t quite understand what’s going-on here, but it works!
- The topic ‘Twenty Twelve header whitespace under image solution’ is closed to new replies.