SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical align problem

    Hi

    Please have a look here: 109.64.105.253 /raktext

    I try to align the text of sub_title and nav to the bottom.
    But it doesn't work...

    any idea why?

    thanks!

  2. #2
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using vertical-align in that way is not possible. If your page is always going to be the same height, then use posistion: relative, if it will change or grow, try javascript to align your nav and sub_title.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks I changed it and it works well
    but not on IE
    any idea why?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by scialom View Post
    thanks I changed it and it works well
    but not on IE
    any idea why?
    Remember to take care go the default margins on elements as older IE applies default bottom margins and other browsers apply a default top and bottom margin but all differ. You need to set the margins to zero or some consistent value otherwise browsers will differ.

    e.g.

    Code:
    h1,h2,p{margin:0 0 1em}
    That's why most users use a CSS reset to set some consistent baseline.

    Take care with relative positioning as it doesn't really move anything physically but only visually as the space it leaves behind is always preserved as the element had not moved. Most times margins will suffice.
    Last edited by Paul O'B; Jan 12, 2013 at 03:35.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much.
    I added the code but still IE is way off

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by scialom View Post
    thank you very much.
    I added the code but still IE is way off
    Firefox and IE9 are exactly the same and show the nav lower down the page because you haven't taken into account the default top margin on the ol. Read my previous post as I explicitly mentioned taking care of the default top and bottom margins.

    ol,ul{margin:0}

    In the case of lists you have to take into account the left padding and left margin also as browsers apply either margin or padding as the default space for the bullet and all vary in the amount applied.

  7. #7
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes different browser will add different margin/padding to elements, even the div tag to somtimes! Why your code doest work in IE? Becuase browsers somtimes handle CSS properties, like "posistion" much differently. To tell browsers to handle code the same is pain! Check out IE fallback CSS, that would be start to renending a functional page in IE atleast.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by polyhedra View Post
    Yes different browser will add different margin/padding to elements, even the div tag to somtimes!
    Div tags do not have default margins so there is no need to address them. They work the same in all browsers.

    Why your code doest work in IE? Becuase browsers somtimes handle CSS properties, like "posistion" much differently.
    Apart from the odd bug "position" is handled pretty consistently cross browser.

    To tell browsers to handle code the same is pain! Check out IE fallback CSS, that would be start to renending a functional page in IE atleast.
    Most of the time you don't need to do anything special if you have coded correctly from the start. Take care of the defaults and take care of well known bugs in older browsers if older IE support is needed (haslayout, double margin bug etc). Don't slap alternative code on a layout unless you know its a bug or a browser's peculiarity. Most of the time its the authors fault and not the browser.


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
  •