1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed Erroneous Vertical Align in Header.css

Discussion in 'Resolved Bug Reports' started by Jaxel, Nov 4, 2010.

  1. Jaxel

    Jaxel Well-Known Member

    The default header.css template includes the following:
    Code:
    		#logo img
    		{
    			vertical-align: middle;
    		}
    I don't believe this code should exist...

    With this code, my logo image appears as follows:
    Untitled-1.jpg

    If I delete this code... it shows much better like this:
    Untitled-2.jpg

    Take notice to the location of the top of the logo in the first image.
    Untitled-3.jpg

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

    Mike XenForo Developer Staff Member

    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.
     
  3. Jaxel

    Jaxel Well-Known Member

    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.
     
  4. Jaxel

    Jaxel Well-Known Member

    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.
     
  5. Kier

    Kier XenForo Developer Staff Member

    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.
     
  6. Mike

    Mike XenForo Developer Staff Member

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

Share This Page