Hi,

I'm trying to build a theme using the STARTERKIT and ran into some problems:

I have a 400x140px logo.png which I want to include. It should vertically fill the header.

If I just upload the file as the logo it won't fill the header vertically, see zen-logo-400x140-firefox.png.
If I try to fix it by specifying

#header
{
height: 140px;
}

the layout in Firefox is broken, see zen-header-height-140-firefox.png.
(I'm actually using Iceweasel Gecko/2008092814 Iceweasel/3.0.3 (Debian-3.0.3-3), the Firefox version in Debian.)

The layout in Firefox on the other hand will not break.

Is it me, changing the wrong parameter, is it Firefox or Zen casuing the issue?

Kind regards,

Felix

CommentFileSizeAuthor
zen-logo-400x140-firefox.png96.45 KBfexpop
zen-header-height-140-firefox.png82 KBfexpop

Comments

fexpop’s picture

fexpop commented

Sorry, "The layout in Firefox on the other hand will not break." should read "The layout in Konqueror(!) on the other hand will not break.

-- Felix

kmonty’s picture

kmonty
He/Him
Location Berlin, DE + SF, CA
commented

Firefox adds a margin to the bottom of images by default. I used to remember why, but I forgot already.

You can solve it like this:

#logo-image
{
  vertical-align: bottom;
}

Or

#logo-image
{
  display: block;
}
dman’s picture

dman commented

The reason is XHTML strict places images in 'text-flow' - which places image bottom at the baseline of the surrounding text. Baseline of text allows for line-height and space for character trailers. Which creates a small margin underneath images that are supposed to be flush-bottom.
Vertical-align is a correct fix.

akalata’s picture

akalata commented
Component: Miscellaneous » CSS/HTML Markup
Status: Active » Closed (won't fix)

Marking this old issue as "won't fix," because it appears to be an isolated support request. fexpop, if this is still an issue, please reopen and update us on your progress.

LiloLilo’s picture

LiloLilo commented
Component: CSS/HTML Markup » layout.css

I can confirm this is still an issue, not only on Firefox but also in Explorer and Chrome. vertical-align: bottom; worked for me.