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

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

AAaron123

<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 said:
<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.
Click to expand...

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 said:
Impossible to say, as you only supply the code for the element, and
not the containing div.
Click to expand...
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.
Click to expand...

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 said:
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.
Click to expand...

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;">
Click to expand...

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;">
Click to expand...

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;
Click to expand...

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







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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

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.
 
Göran Andersson said:
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...

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

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.
 
AAaron123 said:
Because of the IE behavior I thought text-align applied to block
elements - no matter the name!
Are text and <img> inline elements?
Click to expand...

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 said:
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.
Click to expand...

thanks a lot
 
Back
Top