In FF the top is at 50px realative to the div top but in IE8 it's at 100

Discussion in 'ASP .Net' started by AAaron123, Oct 26, 2009.

  1. AAaron123

    AAaron123 Guest

    <img style="height: 100px; position: relative; top: 50px;

    border: 0px;" src="h...



    In FF the top appears to be at 50px relative to the div container top.

    But in IE8 it appears to be at 100px



    Is this a know problem?

    I have been able to find it described on the Internet.
    AAaron123, Oct 26, 2009
    #1
    1. Advertising

  2. Re: In FF the top is at 50px realative to the div top but in IE8it's at 100

    AAaron123 wrote:
    > <img style="height: 100px; position: relative; top: 50px;
    > border: 0px;" src="h...
    >
    >
    >
    > In FF the top appears to be at 50px relative to the div container top.
    >
    > But in IE8 it appears to be at 100px
    >
    >
    >
    > Is this a know problem?
    >
    > I have been able to find it described on the Internet.
    >


    Impossible to say, as you only supply the code for the element, and not
    the containing div.

    The position is defined relative to the original position of the
    element, not relative to the parent element. So, if there is a
    difference between browsers, it's most likely because there is a
    difference in the original position, not in the relative positioning.

    If you want to position the element relative to the parent, you should
    use absolute positioning instead.

    --
    Göran Andersson
    _____
    http://www.guffa.com
    Göran Andersson, Oct 26, 2009
    #2
    1. Advertising

  3. AAaron123

    AAaron123 Guest

    Göran Andersson wrote:
    > AAaron123 wrote:
    >> <img style="height: 100px; position: relative; top: 50px;
    >> border: 0px;" src="h...
    >>
    >>
    >>
    >> In FF the top appears to be at 50px relative to the div container
    >> top. But in IE8 it appears to be at 100px
    >>
    >>
    >>
    >> Is this a know problem?
    >>
    >> I have been able to find it described on the Internet.
    >>

    >
    > Impossible to say, as you only supply the code for the element, and
    > not the containing div.

    I appreciate the help I get so I try to make my post short to minimize the
    time required to read it. Sometime that doesn't work so well.

    To make the code shorter so I could supply it here
    I copied the code and pasted it into a page by itself.
    <body>

    <form id="form1" runat="server">


    <div style="position: relative; border: .1em solid red; height: 300px;
    line-height: 300px;

    text-align: center;">

    <p style="border: 5px solid green; position: relative; top: 45px; height:
    200px;

    background-color: pink; line-height: 200px; vertical-align: middle;
    margin-left:auto; margin-right:auto;text-align:center;">

    <img style="height: 100px; position: relative; top: 50px;margin-left:auto;
    margin-right:auto; text-align:center;

    border: 0px;"
    src="http://groups.google.se/intl/en/images/logos/groups_logo.gif"

    alt='TEST' />

    </p>

    </div>


    </form>

    </body>

    In FF the pink <p> box is positioned a little too low to be vertically
    centered in its containing div by about 10px.
    But the imag is vertically and horizontally centered in the pink box.

    In IE8 the pink box is centered in the containing div
    but the image is too low (by 50px)

    In both browsers the div fills the browser's width
    and the pink <p> fills the div's width as desired






    >
    > The position is defined relative to the original position of the
    > element, not relative to the parent element. So, if there is a
    > difference between browsers, it's most likely because there is a
    > difference in the original position, not in the relative positioning.
    >
    > If you want to position the element relative to the parent, you should
    > use absolute positioning instead.


    If I use absolute I can't center horizontally
    margin-left:auto; margin-right:auto;text-align:center; doesn't work

    The width varies so I can't use Left to center.

    --------
    Say there an img inside a p that is inside a div
    if I put margin-left:auto; margin-right:auto;text-align:center;
    on the p, does it center that p within the enclosing div
    or does it center the img in the p?


    I've been testing and concluded:
    Vertical-align:middle applies to what is inside the element.

    Display:inline applies to the element it is on.

    Line height applies to what is inside the element.

    Make the container's Line-height equal to it's height to center one img
    inside the container.

    Text-align: center applies to what is inside the element.



    Do you concur with the above?



    Thanks a lot
    AAaron123, Oct 26, 2009
    #3
  4. Re: In FF the top is at 50px realative to the div top but in IE8it's at 100

    AAaron123 wrote:
    > Göran Andersson wrote:
    >> AAaron123 wrote:
    >>> <img style="height: 100px; position: relative; top: 50px;
    >>> border: 0px;" src="h...
    >>>
    >>>
    >>>
    >>> In FF the top appears to be at 50px relative to the div container
    >>> top. But in IE8 it appears to be at 100px
    >>>
    >>>
    >>>
    >>> Is this a know problem?
    >>>
    >>> I have been able to find it described on the Internet.
    >>>

    >>
    >> Impossible to say, as you only supply the code for the element, and
    >> not the containing div.

    > I appreciate the help I get so I try to make my post short to minimize
    > the time required to read it. Sometime that doesn't work so well.
    >
    > To make the code shorter so I could supply it here
    > I copied the code and pasted it into a page by itself.


    There is some styles to remove from your code, that does nothing or
    makes some browsers behave differently. See notes below.

    You should have a proper doctype tag, an html tag, a head tag and a
    title tag to make it a valid HTML document that renders in standards
    mode. Otherwise it renders in quirks mode, and for IE that makes a huge
    difference, as it will emulate most of the rendering errors from IE 5...

    > <body>
    >
    > <form id="form1" runat="server">
    >
    >
    > <div style="position: relative; border: .1em solid red; height: 300px;
    > line-height: 300px;
    >
    > text-align: center;">


    Don't use text-align on elements that contains block elements. IE
    doesn't handle that correctly, it will center the block elements also.

    The line-height should have no effect, as there is only block elements
    in the div.

    >
    > <p style="border: 5px solid green; position: relative; top: 45px;
    > height: 200px;
    >
    > background-color: pink; line-height: 200px; vertical-align: middle;
    > margin-left:auto; margin-right:auto;text-align:center;">


    The vertical-align style does not apply to a paragraph element.

    >
    > <img style="height: 100px; position: relative; top:
    > 50px;margin-left:auto; margin-right:auto; text-align:center;


    The text-align style has no effect on an image, as it doesn't contain
    any text to align (unless the image is missing an the alt text is
    displayed instead).

    The left and right margins should have no effect, as the image is not a
    block element.

    >
    > border: 0px;"
    > src="http://groups.google.se/intl/en/images/logos/groups_logo.gif"
    >
    > alt='TEST' />
    >
    > </p>
    >
    > </div>
    >
    >
    > </form>
    >
    > </body>
    >
    > In FF the pink <p> box is positioned a little too low to be vertically
    > centered in its containing div by about 10px.
    > But the imag is vertically and horizontally centered in the pink box.
    >
    > In IE8 the pink box is centered in the containing div
    > but the image is too low (by 50px)
    >
    > In both browsers the div fills the browser's width
    > and the pink <p> fills the div's width as desired
    >
    >
    >
    >
    >
    >
    >>
    >> The position is defined relative to the original position of the
    >> element, not relative to the parent element. So, if there is a
    >> difference between browsers, it's most likely because there is a
    >> difference in the original position, not in the relative positioning.
    >>
    >> If you want to position the element relative to the parent, you should
    >> use absolute positioning instead.

    >
    > If I use absolute I can't center horizontally
    > margin-left:auto; margin-right:auto;text-align:center; doesn't work
    >
    > The width varies so I can't use Left to center.
    >
    > --------
    > Say there an img inside a p that is inside a div
    > if I put margin-left:auto; margin-right:auto;text-align:center;
    > on the p, does it center that p within the enclosing div
    > or does it center the img in the p?


    Both. The margins will center the paragraph inside the div, and the
    text-align will center the image inside the paragraph.

    You would have to specify a width for the paragraph for the auto margins
    to become anything other than zero.

    >
    > I've been testing and concluded:
    > Vertical-align:middle applies to what is inside the element.


    That depends on which element you apply it to. For a table cell it
    applies to what's in the element, for an image it applies to the element.

    >
    > Display:inline applies to the element it is on.
    >
    > Line height applies to what is inside the element.
    >
    > Make the container's Line-height equal to it's height to center one img
    > inside the container.


    The line-height will center a text line inside the container, and the
    image is placed on the base line of the text line. If the image height
    is close to the font size, the image will appear centered in the
    container, otherwise not.

    > Text-align: center applies to what is inside the element.
    >
    >
    >
    > Do you concur with the above?
    >
    >
    >
    > Thanks a lot
    >
    >
    >



    --
    Göran Andersson
    _____
    http://www.guffa.com
    Göran Andersson, Nov 2, 2009
    #4
  5. AAaron123

    AAaron123 Guest

    Göran Andersson wrote:
    > AAaron123 wrote:
    >> Göran Andersson wrote:
    >>> AAaron123 wrote:
    >>>> <img style="height: 100px; position: relative; top: 50px;
    >>>> border: 0px;" src="h...
    >>>>
    >>>>
    >>>>
    >>>> In FF the top appears to be at 50px relative to the div container
    >>>> top. But in IE8 it appears to be at 100px
    >>>>
    >>>>
    >>>>
    >>>> Is this a know problem?
    >>>>
    >>>> I have been able to find it described on the Internet.
    >>>>
    >>>
    >>> Impossible to say, as you only supply the code for the element, and
    >>> not the containing div.

    >> I appreciate the help I get so I try to make my post short to
    >> minimize the time required to read it. Sometime that doesn't work so
    >> well. To make the code shorter so I could supply it here
    >> I copied the code and pasted it into a page by itself.

    >
    > There is some styles to remove from your code, that does nothing or
    > makes some browsers behave differently. See notes below.
    >
    > You should have a proper doctype tag, an html tag, a head tag and a
    > title tag to make it a valid HTML document that renders in standards
    > mode. Otherwise it renders in quirks mode, and for IE that makes a
    > huge difference, as it will emulate most of the rendering errors from
    > IE 5...
    >> <body>
    >>
    >> <form id="form1" runat="server">
    >>
    >>
    >> <div style="position: relative; border: .1em solid red; height:
    >> 300px; line-height: 300px;
    >>
    >> text-align: center;">

    >
    > Don't use text-align on elements that contains block elements. IE
    > doesn't handle that correctly, it will center the block elements also.


    Because of the IE behavior I thought text-align applied to block elements -
    no matter the name!
    Are text and <img> inline elements?


    Thanks for using so much of your time.
    I've copied and saved your comments.







    >
    > The line-height should have no effect, as there is only block elements
    > in the div.
    >
    >>
    >> <p style="border: 5px solid green; position: relative; top: 45px;
    >> height: 200px;
    >>
    >> background-color: pink; line-height: 200px; vertical-align: middle;
    >> margin-left:auto; margin-right:auto;text-align:center;">

    >
    > The vertical-align style does not apply to a paragraph element.
    >
    >>
    >> <img style="height: 100px; position: relative; top:
    >> 50px;margin-left:auto; margin-right:auto; text-align:center;

    >
    > The text-align style has no effect on an image, as it doesn't contain
    > any text to align (unless the image is missing an the alt text is
    > displayed instead).
    >
    > The left and right margins should have no effect, as the image is not
    > a block element.
    >
    >>
    >> border: 0px;"
    >> src="http://groups.google.se/intl/en/images/logos/groups_logo.gif"
    >>
    >> alt='TEST' />
    >>
    >> </p>
    >>
    >> </div>
    >>
    >>
    >> </form>
    >>
    >> </body>
    >>
    >> In FF the pink <p> box is positioned a little too low to be
    >> vertically centered in its containing div by about 10px.
    >> But the imag is vertically and horizontally centered in the pink box.
    >>
    >> In IE8 the pink box is centered in the containing div
    >> but the image is too low (by 50px)
    >>
    >> In both browsers the div fills the browser's width
    >> and the pink <p> fills the div's width as desired
    >>
    >>
    >>
    >>
    >>
    >>
    >>>
    >>> The position is defined relative to the original position of the
    >>> element, not relative to the parent element. So, if there is a
    >>> difference between browsers, it's most likely because there is a
    >>> difference in the original position, not in the relative
    >>> positioning. If you want to position the element relative to the parent,
    >>> you
    >>> should use absolute positioning instead.

    >>
    >> If I use absolute I can't center horizontally
    >> margin-left:auto; margin-right:auto;text-align:center; doesn't work
    >>
    >> The width varies so I can't use Left to center.
    >>
    >> --------
    >> Say there an img inside a p that is inside a div
    >> if I put margin-left:auto; margin-right:auto;text-align:center;
    >> on the p, does it center that p within the enclosing div
    >> or does it center the img in the p?

    >
    > Both. The margins will center the paragraph inside the div, and the
    > text-align will center the image inside the paragraph.
    >
    > You would have to specify a width for the paragraph for the auto
    > margins to become anything other than zero.
    >
    >>
    >> I've been testing and concluded:
    >> Vertical-align:middle applies to what is inside the element.

    >
    > That depends on which element you apply it to. For a table cell it
    > applies to what's in the element, for an image it applies to the
    > element.
    >>
    >> Display:inline applies to the element it is on.
    >>
    >> Line height applies to what is inside the element.
    >>
    >> Make the container's Line-height equal to it's height to center one
    >> img inside the container.

    >
    > The line-height will center a text line inside the container, and the
    > image is placed on the base line of the text line. If the image height
    > is close to the font size, the image will appear centered in the
    > container, otherwise not.
    >
    >> Text-align: center applies to what is inside the element.
    >>
    >>
    >>
    >> Do you concur with the above?
    >>
    >>
    >>
    >> Thanks a lot
    AAaron123, Nov 3, 2009
    #5
  6. Re: In FF the top is at 50px realative to the div top but in IE8it's at 100

    AAaron123 wrote:
    >> Don't use text-align on elements that contains block elements. IE
    >> doesn't handle that correctly, it will center the block elements also.

    >
    > Because of the IE behavior I thought text-align applied to block
    > elements - no matter the name!
    > Are text and <img> inline elements?
    >


    Text is the typical example of inline content, as well as elements like
    span and strong that are a natural part of the text flow. Images are
    also inline elements, and an image behaves pretty much as a word in the
    text.

    --
    Göran Andersson
    _____
    http://www.guffa.com
    Göran Andersson, Nov 5, 2009
    #6
  7. AAaron123

    AAaron123 Guest

    Göran Andersson wrote:
    > AAaron123 wrote:
    >>> Don't use text-align on elements that contains block elements. IE
    >>> doesn't handle that correctly, it will center the block elements
    >>> also.

    >>
    >> Because of the IE behavior I thought text-align applied to block
    >> elements - no matter the name!
    >> Are text and <img> inline elements?
    >>

    >
    > Text is the typical example of inline content, as well as elements
    > like span and strong that are a natural part of the text flow. Images
    > are also inline elements, and an image behaves pretty much as a word
    > in the text.


    thanks a lot
    AAaron123, Nov 5, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    8
    Views:
    6,660
    Neredbojias
    Dec 9, 2005
  2. Oliver Hauger
    Replies:
    2
    Views:
    2,765
  3. fred
    Replies:
    3
    Views:
    257
    Zifud
    Mar 17, 2005
  4. cecile

    ie8!=ie8

    cecile, May 24, 2010, in forum: Javascript
    Replies:
    2
    Views:
    175
    David Mark
    May 24, 2010
  5. Replies:
    5
    Views:
    862
Loading...

Share This Page