Percent-(minus)px height problem

  • bjh23
  • Novice
  • Novice
  • bjh23
  • Posts: 17

Post 3+ Months Ago

I'm using the following code to try to create a div that scales with image resizing. I have fixed heights for my header (115px) and footer (15px) and then a scalable content window. Firefox is giving the hoped-for effect, but IE is defaulting the image to 100% of the window size, rather than 100%-200px. Any ideas? Is there a fix or workaround?

HTML:
<div id="logo"><img src="images/bg/logo-transparent-357x500.png" height="100%" /></div>

CSS:
#logo {position:fixed; top:135px; left:20px; bottom:35px; height:100%-200px; z-index:4;}
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • bjh23
  • Novice
  • Novice
  • bjh23
  • Posts: 17

Post 3+ Months Ago

Going at things a slightly different way, this CSS also produces the same effect, working in Firefox but not IE:

#logo {position:fixed; top:135px; left:20px; bottom:35px; height:100%%; z-index:4;}

Any help would be much appreciated.

EDIT: I tried this code as well in the hope that IE would somehow correct itself but to no avail:

#logo {position:fixed; top:135px; left:20px; bottom:35px; height:1*; z-index:4;}
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Calculation-based measurments aren't supported very widely. I believe they're CSS-3.

http://www.webdevout.net/browser-support
  • bjh23
  • Novice
  • Novice
  • bjh23
  • Posts: 17

Post 3+ Months Ago

I guess what it boils down to, is this: how do you get the top and bottom elements to work correctly in IE?
  • bjh23
  • Novice
  • Novice
  • bjh23
  • Posts: 17

Post 3+ Months Ago

Ok after a little more tinkering I think my problem lies not in the title of this thread, but in the fact that Firefox and IE are interpreting the 100% in the HTML statement in different ways. (I've taken out the height attribute in the CSS.)

Firefox is going with 100% of available space after the top and bottom conditions in the CSS are accounted for. IE is using 100% of the image size that is supposed to be scaling to the available space.

Is there a solution for this? I have yet to find one but I'm sure it's out there.

Any advice (and even criticism of my code) is greatly appreciated.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Personally, I wouldn't stretch a raster image beyond its actual dimensions. Otherwise, I've seen this done before but I haven't seen a good reason for doing it. The only advice I have is to find a page where this is being done and see how they did it.

...If I'm understanding what it is you're trying to accomplish. :shrug:

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.