By Tino on

I'm creating a personal theme based on Zen. Works great!

But now extra pixels are placed below the logo image in div#logo in Firefox and other non-IE browsers.
The workaround is to define the exact height of div#logo, but that's kinda ugly, because there could be a different image height of the logo upload in the future.

Clues anybody?

⋅ Categories: Drupal 6.x

Comments

Madness’s picture

Madness commented

i'm a noob so don't take all that i say to heart. i haven't used css as much as i am using them now so i'm a tables person. but i tried to do the whole 'all without tables' and let's just say that it's over-rated. because while it looks great in firefox, it looks like shite in IE and i had to keep trying to get them to work the way i wanted.

Finally, i made a div (for example < div id="extra-header" >)within the header (figured if i ever figured it out, i can always go back to it) and i put a table in it. i took off the table width so that it'd be more controllable, also, i made sure and align that < div id="extra-header" > i made to 'text-align: left'. it seems that IE doesn't always align it the way you think. I put some margins to the left (on the div in css) and done. The header is perfect and works where i need it to.

zeta ζ’s picture

zeta ζ commented 
div#logo {
  font-size: 0;
}

___________________
Post a link! – you know it makes sense.
It’s in the detaιls…
demonstration portfolio

Tino’s picture

Tino commented

Zeta, thanks for the hint!

div#logo {font-size: 0;} does not do the trick,
but the 'css-bug-fix' div#logo{line-height: 0;} does!