SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Final solution for vertical align using CSS.

    (EDIT)Guys this solution for unknown height! It is not the one with height specified that is known for very long time! This is brand new solution! I noticed people think its the old one. (/EDIT)

    Yep, you got that right. There is a solution and I am presenting it to you. Actually it was blogged in Czech Republic allready, but I wont go into much details here (no explaining here, sorry). Here is the link http://portfolio.canlog.cz/works/valign/

    If you have any questions, feel free to ask. Cause I invented it, it will be easy for me to answer the questions. There are few bugs which I will list here later on.

    So, how do you like it?

    By the way it is tested in Safari, IE5+, Firefox 1.0PR (probably works in all versions), Opera 7.5 (well it should work in 7.23, maybe even in lower versions), Konqueror, Netscape 6.2+ ... i guess thats all, if you have any other browser available, go ahead and test it, then write the results...

    btw sorry for my english i am from czech republic (though i moved to canada recently)

    http://www.jakpsatweb.cz/css/css-ver...-solution.html this is the article by Yuhů about this vertical centering, it lacks explanation of some bugs, so I will post them here.. AND his version uses _ so not valid, better use the one I use. or the conditional comments
    Last edited by Xerxos; Sep 23, 2004 at 14:53.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jon Hicks posted a solution to vertical centering way back in July 2003, which uses valid CSS and works across all browsers.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Thats quite a useful trick that takes into account ie's incorrect rendering of 50% in this situation to move the element back to the centre and not ot the top as it should do.( I don't see that left:50% and left:-50% are needed in this situation though.)

    The display: table and table cell are known solutions for compliant browers but you have merged them together quite nicely.

    I'm sure a lot of people will find this useful for vertically centering elements of unknown height.

    Good work

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Buddy Bradley: what the hell are you talking about? have a look at the solution... for his you have to know the height, here you dont have to this is really the first solution for the problem, if you dont see that it is different, then you must be blind...

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh Paul the left centering is just because i wanted to show one guy it can go into middle and forgot to remove it. Anyways i guess you understood that lefts are for horizontal centering

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Yes, I guessed that

    I think the technique is going to prove very useful and thanks for sharing

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul: I hope it does currently working on one more nice thing, I will post it here on SitePoint once I finish

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Look forward to it

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still looking for someone to test it in IE5.2/Mac or some IE for Mac anyone? please...

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Just tried it on my old mac os9.1 ie5.1 mac and I'm afraid it doesn't work. I tried a few things but couldnt coerce it to comply. It was ok on Netscape 7 mac though

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well 5.1 is dead i guess... you wont see many things working in that browser there is 5.2 i guess or am i wrong?
    netscape uses gecko core so it had to be ok

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Xerxos
    well 5.1 is dead i guess... you wont see many things working in that browser there is 5.2 i guess or am i wrong?
    IE/Mac 5.1 and 5.2 have very little difference. The main difference is that 5.2 will only run on OSX, and 5.1 or older will only run on OS8 or 9. Don't think you're getting off scott-free by ignoring 5.1 .

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vgarcia: well many solutions dont support IE/Mac 5.1 or 5.2... except for this browser it works everywhere... maybe someone will find a way to get it working in IE/Mac 5.1 (sadly i dont have it so i cant do it)
    I think this is very good solution for the problem that was unsolved for sooo long. At least that is what I think.

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i thought that maybe if you use "_" hack then it is going to work.. just thinking.. does IE/Mac support html>body and this kind of stuff? if it does that could be the problem...

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it SHOULD work in IE/Mac now.. can you try it again guys? thx a lot

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Xerxos,

    I already tried hiding the child selector as I know mac parses it ok.

    I tried your code again anyway but its the same result. Mac ie5.1 won't recognise any percentage value on your #cont element because it is a pecentage based height itself.

    I forced quirks mode in mac and then it recognises the percentage but it puts the div right back at the top of the page where it started and where iepc should really put it. It seems that ie mac doesn't have the same rendering problems that iepc has and is actually better programmed in this area.

    I tried all the things I can think of but no joy It only does what its supposed to. Unfortunately it doesn't understand display:table so it cant have the same solution as mozilla etc.

    What happens in your example is that the elements top is pust at 50% of the outer div and it just stays there.

    I think your solution is good enough not to worry too much about ie5 mac as they will still get something usable but not quite right. Unless of course there is some way around it and something that you can use just on iemac but I can't think of it at the moment

    Hope that helps anyway.

    Paul

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i suppose there could be an extra style for IE Mac making the footer the classical one using clear: both; and stuff.. u know what I mean ?

  18. #18
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but thx a lot for testing anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •