|
|
|
|
|
|||||||
 |
ASP Net - In FF the top is at 50px realative to the div top but in IE8 it's at 100 |
|
|
Thread Tools | Search this Thread |
10-26-2009, 12:12 AM
|
#1 |
In FF the top is at 50px realative to the div top but in IE8 it's at 100
<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 |
|
|
|
10-26-2009, 09:22 AM
|
#2 |
|
Posts: n/a
|
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 |
|
|
|
10-26-2009, 11:03 PM
|
#3 |
|
Posts: n/a
|
Re: In FF the top is at 50px realative to the div top but in IE8 it's at 100
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 |
|
|
|
11-02-2009, 01:32 PM
|
#4 |
|
Posts: n/a
|
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 |
|
|
|
11-03-2009, 07:44 PM
|
#5 |
|
Posts: n/a
|
Re: In FF the top is at 50px realative to the div top but in IE8 it's at 100
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 |
|
|
|
11-05-2009, 07:36 AM
|
#6 |
|
Posts: n/a
|
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 |
|
|
|
11-05-2009, 08:08 PM
|
#7 |
|
Posts: n/a
|
Re: In FF the top is at 50px realative to the div top but in IE8 it's at 100
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 |
|
|
