CSS Height Problem (OF COURSE!!!)

Discussion in 'CSS' started by Mr. Damnation, Aug 1, 2008.

  1. #1
    Oh, CSS. 3 versions and you still can't do height right? What's the matter?

    Anyway, here's what I'm trying to do: http://social-parasite.com/test/

    I need the black part in the middle to be the same height as the rest of that column. Of course, with CSS, that means several hacks and doodads to add. Can anyone help?
     
    Mr. Damnation, Aug 1, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Background image set to center, or did you want something more elaborate?
     
    steelfrog, Aug 1, 2008 IP
  3. Mr. Damnation

    Mr. Damnation Peon

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I need something way more elaborate. I need a bg-image that repeats and then a 800px area that is white for the content. Right now I just have an absolutely fixed header with an ultra high z-index for the banner. So it's essentially on top of the wrapper that makes the entire site 100% height. It's an ok solution, but I don't personally like it.

    What ever happened to the days of 99% height meaning "fill whatever's left?"?
     
    Mr. Damnation, Aug 1, 2008 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Okay, I've re-written the entire thing. Let me know if this works for you. Only took me a few minutes so it's probably not perfect.

    [EDIT] Oh, I didn't include the shadow, but that should only be an extra divider. I've also colored the footer so you would know where it stood.
     
    steelfrog, Aug 1, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    I'm looking at it and still trying to figure out what it is you are even trying to do - since I'm seeing four different appearances in four different browsers. (IE, FF, Opera and Saffy)

    Are you trying to build a 100% min-height page model?
     
    deathshadow, Aug 1, 2008 IP
  6. Mr. Damnation

    Mr. Damnation Peon

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It works in Firefox, but IE has a slight pixel problem. Let me see what you did and try to fix it.
     
    Mr. Damnation, Aug 1, 2008 IP
  7. Mr. Damnation

    Mr. Damnation Peon

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You know what, I think I got the best solution here. I don't like adding images where they aren't needed. Ever. I think its a piss-poor substitute and a horrible design practice, and I don't think the community as a whole should have to settle with this as a solution. I hate grafting text over a background image. And I hope you don't take offense to that, Steelfrog, I appreciate the help and all the effort you put into this for me, but the background image solution is one of my pet peeves, if you can't tell.

    So here's my solution. The banner code goes to the end of the page. This way it's read last and is over the rest of the site. The top: 0 and left: 0 will position it correctly, and the position: absolute will make sure it's like that all day every day. I also hate having to use z-index when I don't have to...or at all really. Unless I'm making layers in CSS I never use it. I dunno why, it just has some kind of stigma to it in my mind. The content gets padded and everyone is happy. Especially me, cause it seems like the most novel solution without having to add an unnecessary image to the site. Although I'm sure the image size is smaller than the code needed to position the header correctly, it still seems like the better solution to me.
     
    Mr. Damnation, Aug 1, 2008 IP