Fixed Erroneous Vertical Align in Header.css

[Jaxel]

The default header.css template includes the following:

		#logo img
		{
			vertical-align: middle;
		}

I don't believe this code should exist...

With this code, my logo image appears as follows:


If I delete this code... it shows much better like this:


Take notice to the location of the top of the logo in the first image.


The existing code serves no purpose and only creates this issue... it should be removed.

 

[Mike]

What you're seeing is probably related to the image being given space for ascenders (and descenders). As such, the image should probably be display block'd, though that may create other issues (and perhaps kill the vertical alignment anyway...). The code is of use though - look at what happens here if you remove it via FireBug.

 

[Jaxel]

What you're seeing is probably related to the image being given space for ascenders (and descenders). As such, the image should probably be display block'd, though that may create other issues (and perhaps kill the vertical alignment anyway...). The code is of use though - look at what happens here if you remove it via FireBug.

When I load up FireFox and FireBug, if I cancel out the vertical-align: middle through FireBug, nothing bad happens. The logo image just moves to where it should. So I don't see what issues it creates, and I don't see the use of leaving it there. All it does is mess up the logo alignment.

On my website, simply deleting the afformentioned code fixed all issues... and didn't create any new ones.

 

[Jaxel]

Okay... I have found a solution that fits both of our needs...

My logo image was 100px, and my Height of Header Logo setting was 100px... Obviously, this code is in there to vertically center logos that are smaller than the Height of Header Logo setting... its why the xenForo logo on this site is centered, instead of resting at the top. Unfortunately, because of the navtab construct, its not actually perfect centered, but centered minus about 3 pixels on top.

My solution was to make my logo image slightly bigger than the Height of Header Logo setting... 105px to be exact. The center of the image, minus 3 pixels puts it flush at the top of the admin/login bar.

 

[Kier]

I've been looking at fixes for this to avoid having to make special images, but so far nothing has worked across all browsers.

The task continues.

 

[Mike]

I have found what appears to be a workaround for this issue that involves manipulating the line height a bit.