tinfanide Posted October 10, 2011 Share Posted October 10, 2011 Here's my css codes:How can I remove the margin-bottom? body {margin: 0 auto;padding: 0; margin-top: 0px;margin-bottom: 0px;text-align: center;width: 1024px;border: 1px solid #CC00FF;border-top: 0px;border-bottom: 0px;}div#wrapper {background-color: #FFC;width: 1024px;height: 768px;overflow: auto;margin: 0 auto;position: relative;text-align:left;}#flashSlideShow {position: absolute;left: 100px;top: 100px;}div#footer {margin: 0 auto;width: 1024px;height: 250px;}#flashContent { width:100%; height:100%; } <body><div id="header"></div><div id="wrapper"> <div id="flashSlideShow"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="720" height="480" id="" align="middle"> <param name="movie" value="" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="" width="720" height="480"> <param name="movie" value="" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div></div><div id="footer"><img src="" /></div></body> Link to comment Share on other sites More sharing options...
eTianbun Posted October 10, 2011 Share Posted October 10, 2011 If you are talking about the space that wrap around the <body> content, then it is padding. add+: Padding:0px to the body{} . Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2011 Share Posted October 10, 2011 you should not any margin at bottom as you have it set to zero Twice! body {margin: 0 auto;padding: 0; margin-top: 0px;margin-bottom: 0px;text-align: center;width: 1024px;border: 1px solid #CC00FF;border-top: 0px;border-bottom: 0px;}Are you talking about the space produced by footer? height: 250px; Link to comment Share on other sites More sharing options...
tinfanide Posted October 10, 2011 Author Share Posted October 10, 2011 Yes. I'm talking about the little space (just a little) beneath the footer.After I set the body margin: 0 and padding: 0there's still some white space. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2011 Share Posted October 10, 2011 Well, I don't see any space at all? Link to comment Share on other sites More sharing options...
Ingolme Posted October 10, 2011 Share Posted October 10, 2011 Does the footer have anything inside it that has a bottom margin? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2011 Share Posted October 10, 2011 Obviously Not! as there's only an image. To clarify if you had elements, such as p, h1-h6, and the footer had top and bottom margin less than these elements, there margins would seep pass the edge of footer element causing it to move by these inner child elements top and bottom margins, it is known as collapsing-margins , which can be fix by using overflow: hidden; or adding 1px top and bottom padding to the footer element. Also because you have a fixed height footer, the image height if higher, would cause the bottom edge to extend beyond the footer bottom edge causing a gap, which can also be fixed by overflow:hidden; Link to comment Share on other sites More sharing options...
Ingolme Posted October 10, 2011 Share Posted October 10, 2011 I was assuming that the code he posted might just be example code. Otherwise, I don't see the use of an empty image in the footer. Link to comment Share on other sites More sharing options...
tinfanide Posted October 11, 2011 Author Share Posted October 11, 2011 No, the code is not a sample code. Just wipe out the img src to keep some pivacy.Maybe it's the image height problem. Anyway, overflow: hidden is a quick fix. Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2011 Share Posted October 11, 2011 According to your CSS; your page has a fixed height of 768 + 250 = 1018 pixels. That's certainly going to exceed the bottom of the window in most screens. On my sites, I don't settle for quick fixes because they could come back to haunt you. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2011 Share Posted October 11, 2011 If its the image height, you could just reset the height of footer to height: auto; if the image is floated you should keep the overflow: hidden; as it helps it to determine the floated element/s area, and adjust its height accordingly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.