I have the following html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Firefox vs. Internet Explorer</title> </head> <body style="margin:0px;padding:0px;"> <div style="width:100%;margin:0px;padding:0px;text-align:center;height:125px;background-color:Orange;"> <span style="display:block;margin-top:15px;margin-bottom:15px;font-size:50px;font-weight:bold;">Firefox vs. Internet Explorer</span> </div> </body> </html> Here are screenshots of this code in Firefox and Internet Explorer: As you can see, Firefox places extra space above the <div> even though both the <body> and <div> have margin:0px;padding:0px; in their style attribute. If I remove display:block; from the <span> tag's style attribute, Firefox does not display the extra space. However, because the <span> tag is nested inside the <div>, should it be necessary for me to remove the display:block; from the style attribute (I need it there so that I can specify the the margin in the span rather than the div)? Is this a bug in my code or Firefox's? Thanks. -- Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/
Nathan Sokalski wrote: > > I have the following html code ... > > ... As you can see, Firefox places extra space above the <div> even though > both the <body> and <div> have margin:0px;padding:0px; in their style > attribute. If I remove display:block; from the <span> tag's style > attribute, Firefox does not display the extra space. However, because > the <span> tag is nested inside the <div>, should it be necessary for me > to remove the display:block; from the style attribute (I need it there > so that I can specify the the margin in the span rather than the div)? > Is this a bug in my code or Firefox's? Thanks. Instead of using a SPAN with display:block, just use a DIV.
In the application where I am trying to fix this problem, that would not work for the following reasons: 1. The <div> has more than just the <span> in it 2. I want to be able to set the style for the text in an element other than the <div>, the <div> is there simply as a container and for the background color -- Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/ "C A Upsdell" <""cupsdell\"@nospam@upsdell.com"> wrote in message news:u1ss%23YDaIHA.3940@TK2MSFTNGP05.phx.gbl... > Nathan Sokalski wrote: >> >> I have the following html code ... >> ... As you can see, Firefox places extra space above the <div> even >> though both the <body> and <div> have margin:0px;padding:0px; in their >> style attribute. If I remove display:block; from the <span> tag's style >> attribute, Firefox does not display the extra space. However, because the >> <span> tag is nested inside the <div>, should it be necessary for me to >> remove the display:block; from the style attribute (I need it there so >> that I can specify the the margin in the span rather than the div)? Is >> this a bug in my code or Firefox's? Thanks. > > Instead of using a SPAN with display:block, just use a DIV. > >
Nathan Sokalski wrote: > In the application where I am trying to fix this problem, that would not > work for the following reasons: > > 1. The <div> has more than just the <span> in it > > 2. I want to be able to set the style for the text in an element other than > the <div>, the <div> is there simply as a container and for the background > color In case I did not make myself clear, I was suggesting a DIV inside a DIV instead of a SPAN inside a DIV. You can add whatever you like within the outer DIV.
Start here http://msdn2.microsoft.com/en-us/ie/default.aspx and here http://msdn2.microsoft.com/en-us/ie/aa740476.aspx -- IE General (all versions) newsgroup: news://msnews.microsoft.com/microsoft.public.internetexplorer.general ~Robear Dyer (PA Bear) MS MVP-IE, Mail, Security, Windows Desktop Experience - since 2002 Nathan Sokalski wrote: > I have the following html code...
its a bug in IE (should be fixed in version 8 as it passes the css acid test). firefox is correct. with block elements, the margin (and border) are outside the object content area. as the div has no padding the top of the span content area lines up with the div's content area. but the span has a marign, so this extends beyound the top of the div, and pushes the div down the page. you should read css documentation on borders, margins and padding. -- bruce (sqlwork.com) "Nathan Sokalski" wrote: > I have the following html code: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml" > > <head> > <title>Firefox vs. Internet Explorer</title> > </head> > <body style="margin:0px;padding:0px;"> > <div style="width:100%;margin:0px;padding:0px;text-align:center;height:125px;background-color:Orange;"> > <span style="display:block;margin-top:15px;margin-bottom:15px;font-size:50px;font-weight:bold;">Firefox vs. Internet Explorer</span> > </div> > </body> > </html> > > Here are screenshots of this code in Firefox and Internet Explorer: > > > > > > As you can see, Firefox places extra space above the <div> even though both the <body> and <div> have margin:0px;padding:0px; in their style attribute. If I remove display:block; from the <span> tag's style attribute, Firefox does not display the extra space. However, because the <span> tag is nested inside the <div>, should it be necessary for me to remove the display:block; from the style attribute (I need it there so that I can specify the the margin in the span rather than the div)? Is this a bug in my code or Firefox's? Thanks. > -- > Nathan Sokalski > njsokalski@hotmail.com > http://www.nathansokalski
