Vertical align problem

HTML & CSS
1

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

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

thanks I changed it and it works well
but not on IE :frowning:
any idea why?

4

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.


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.

5

thank you very much.
I added the code but still IE is way off :frowning:

6

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

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. :smiley:

8

Div tags do not have default margins so there is no need to address them. They work the same in all browsers.:slight_smile:

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. :smiley:

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.:wink: