In FF the top is at 50px realative to the div top but...

Main Page | Report this Page

.NET DotNet Forum Index » ASP.NET Forum » In FF the top is at 50px realative to the div top but...

Page 1 of 1

In FF the top is at 50px realative to the div top but...

Author

Message

AAaron123...

Posted: Sun Oct 25, 2009 6:12 pm

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

Posted: Mon Oct 26, 2009 5:03 pm

Guest

Göran Andersson wrote:

Quote:

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

Quote:

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

Göran Andersson...

Posted: Thu Nov 05, 2009 2:36 am

Guest

AAaron123 wrote:

Quote:

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

AAaron123...

Posted: Thu Nov 05, 2009 3:08 pm

Guest

Göran Andersson wrote:

Quote:

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

Page 1 of 1

All times are GMT - 5 Hours The time now is Mon Nov 30, 2009 12:35 am .NET DotNet Forum Index