CSS - Margin Below Footer Help
I am using an iMac which has a very large screen. The problem that I am having is that the footer (on my screen) appears to have a margin bottom of about 20px set (just estimating). However, when I shrink my screen to closer of that of a laptop, the margin dissapears and the footer aligns nicely to the bottom of the page.
I cannot figure out why the space is only added for larger screens. Any help here would be great. Keep in mind that this site has just begun to take development and will change dramatically by the time I'm done. Here is the site (you may not see the margin below the footer if you have a normal size screen) Beckin4 Here is my stylesheet: stylesheet Thanks! Similar TutorialsI've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Site Test</title> <link rel="stylesheet" type="text/css" href="redo.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> </head> <body> <div id="top_filler"> </div> <div id="left_filler"> </div> <div id="right_filler"> </div> <div id="top_left"> </div> <div id="header"> </div> <div id="top_right"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Etc, etc, etc....</p> </div> <div id="bottom_filler"> </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </body> </html> The CSS Code: * { margin: 0; padding: 0; } body { background: #fdd9e9; } div#top_filler { background: url(images/bg_slice_sm.png) repeat-x; width: 100%; height: 164px; position: fixed; top: 0px; z-index: 5; } div#left_filler { background: url(images/left_slice_sm.png) repeat-y; width: 174px; height: 100%; position:fixed; left:0px; z-index: 5; } div#right_filler { background: url(images/right_slice_sm.png) repeat-y; width: 161px; height: 100%; position:fixed; right: 0px; z-index:5; } div#bottom_filler { background: url(images/bottom_slice_sm.png) repeat-x; width: 100%; height: 76px; position: fixed; bottom: 0px; z-index: 5; } div#header { position: fixed; top: 0px; left: 37%; height: 125px; width: 316px; margin: 0 auto; background: url(pink_logo2.png) no-repeat; z-index: 25; } ul.NoBulletNoIndent { list-style-type: none; margin-left: 0px; padding-left: 0px } div#top_left { height: 314px; width: 221px; background: url(images/left_top_corner_sm.png) no-repeat; position: fixed; top: 0px; left: 0px; z-index: 5; } div#bottom_left { height: 175px; width: 176px; background: url(images/left_bottom_corner_sm.png) bottom no-repeat; position: fixed; bottom: 0px; left: 0px; z-index: 5; } div#top_right{ height:174px; width:174px; background: url(images/right_top_corner_sm.png) top no-repeat; position: fixed; top:0px; right: 0px; z-index:5 } div#bottom_right{ height: 602px; width:198px; background: url(images/right_bottom_corner2_sm.png) bottom no-repeat; position: fixed; bottom: 0px; right: 0px; z-index: 5 } div#content { margin: 40px 164px 0px 180px; position: relative; z-index: 1; } Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */ .lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC} .lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat} .lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat} .lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px} .clear {font-size: 1px; height: 1px} .topform { position: absolute; right: 5px; top: 65px; width: 300px; font-size: 10px; font-family: myriad, verdana, sans-serif; text-align: right; } input, form { font-size: 11px; font-family: myriad, verdana, sans-serif; margin-bottom: 0px; margin: 0px; } /* End of SEARCH Bar */ Which refers to this part of my index.php page: Code: <!-- Top right SEARCH --> <div class="topform"> <div class="lb_bl"> <div class="lb_br"> <div class="lb_tl"> <div class="lb_tr"> <form name="form" id="form" method="post" action=""><input name="search" type="text" /> <input name="search" type="button" value="SEARCH" /></form> </div> </div> </div> </div> <div class="clear"> </div> </div> <!-- End of top right SEARCH --> But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas Hi, Im creating a list that shows a photo and personal data of people. It's he http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros username: fer password: m When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn't any space. Is that the bug of the "doubled margin" of IE6? Regards Javi i am having a serious issue with ie 7 i really need help. i am using a center layout using 900px the center layout looks and works fine in all browsers except for ie7 i have used a border for the wrapper tag. what i have noticed only in the case of ie7 is the left border for the wrapper tag starts a few pixels 2px or 3px before compared to all other browsers and due to this in ie7 the right border ends a few pixels when compared to all other browsers. so if i can fix the left border the right border for the wrapper tag will adjust automatically. i am using a valid xhtml transitional document. following is my 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Background image</title> <style type="text/css"> body { text-align: center; margin: 0; font-family: Verdana; font-size: 10px; } #wrapper { width: 900px; text-align: left; margin: 0 auto; border: 1px solid #ffff00; } p{ margin: 0; padding: 0; } </style> </head> <body> <div id="wrapper"> <p>Content </p> </div></body></html> ------------------------------- can someone please tell me what the issue is and what the code should be. i would highly appreciate any help as this is an issue in ie7 and not in other browsers. thanks. Hi All, I am having a hard time aligning an element on my site. The problem is I am floating an element to the left and it wont cross all the way to the right, its like the margin to the right doesnt exist and the text goes to the next line when there is room (so it seems) to the right. Go to j4media.com to see what I mean...look in the sidebar and the problem is in the first bullet under the 'recent message board posts'. Here's the CSS: Code: .sidecnt { /* individual container in sidebar */ background: #040c0f url(jimg/sb_bg1.jpg) repeat-x; width: 245px; height: auto; border: 1px solid #000000; border-bottom: 6px solid #172e34; padding: 2px 2px 7px 2px; }.sidecnt h2 { /* container title image */ float: left; } .sidecnt h3 { /* container title */ float: right; color:#050608; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 10px; }.sidecnt h4 { /* tag text */ float:left; margin: 25px -12px 2px 1px; /* top, right, bottom, left */ padding-bottom: 5px; font-family:Arial, Helvetica, sans-serif; } .sidecnt1 { /* individual container in sidebar - other than tag box */ background: #FFFFFF url(jimg/sb_bg1.jpg) repeat-x; width: 245px; height: auto; border: 1px solid #000000; border-bottom: 6px solid #172e34; padding: 2px 2px 7px 2px; }.sidecnt1 h2 { /* container title image */ float: left; } .sidecnt1 h3 { /* container title */ float: right; color:#050608; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 10px; }.sidecnt1 h4 { /* text elements */ float:left; margin: 25px -12px 2px 1px; /* top, right, bottom, left */ padding-bottom: 5px; font-family:Arial, Helvetica, sans-serif; } .sidecnt1 ul { float:left; margin-top: 25px; /*top, right, bottom, left*/ padding-bottom: 1px; font-family:Arial, Helvetica, sans-serif; } and here's the HTML: Code: <div class="sidebar"> <div class="sidecnt"> <h2><img src="(URL address blocked: See forum rules)"></h2> <h3>j4media tags</h3> <h4> <?php UTW_ShowWeightedTagSetAlphabetical("coloredsizedtagcloud","",0) ?> </h4> </div> <br> <div class="sidecnt1"> <h2><img src="(URL address blocked: See forum rules)"></h2> <h3>Subscribe</h3> <div class="subscriberss"> <form name="subsform"> <a href="#"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>feedicon.gif" alt="RSS" /></a> <a href="<? echo get_bloginfo('rss_url');?>" class="rsstext">RSS</a> <select name="aggs"> <option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Bloglines</option> <option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Feedness</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">My Yahoo!</option> <option value="(URL address blocked: See forum rules)=rss&ut=<? echo get_bloginfo('rss_url');?>">My MSN</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">NetVibes</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Newsgator</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rezzibo</option> <option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rojo</option> <option value="(URL address blocked: See forum rules)/faves?add=<? echo get_bloginfo('rss_url');?>">Technorati</option> </select> <a href="#" class="btnnofloat" onclick="window.location.href = document.subsform.aggs.options[document.subsform.aggs.selectedIndex].value;"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>okbutton.gif" title="ok btn" alt="ok" /></a> </form> </div> </div> <div class="sidecnt1"> <h3>Recent Message Board Posts</h3> <ul> <?php if (function_exists('wpphpbb_topics')):?> <? wpphpbb_topics();?> <?php endif;?> </ul> </div> <div class="sidecnt1"> <h3>Categories</h3> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </div> <div class="sidecnt1"> <?php /* If this is the frontpage */ if ( is_home() ) { ?> <?php if(get_links(-1,'', '','', false, 'name',false,false,-1, false, false)){ ?> <h3>Blogroll</h3> <ul><? get_links(-1,'<li>', '</li>','', false, 'name',false,false,-1, false, true); ?></ul> <? } ?> </div> <div class="sidecnt1"> <h3>Site Tools</h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="(URL address blocked: See forum rules)" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="(URL address blocked: See forum rules)/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="(URL address blocked: See forum rules)/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <?php wp_meta(); ?> </ul> <?php } ?> </div> </div> <div class="clearfix"></div> <br></div> Thanks in advance for your help! Jrexi I must be really dumb or blind here... For some reason i cant seem to get div.show_listing to actually move up. Sorry for my ignorance here in CSS, but i learn as i go. css Code: Original - css Code .container { display: block; margin-top: -32px; margin-left: 3px; width: 780px; overflow: hidden; border: 1px solid #cccccc; } /* Start Mac IE5 filter \*/ div.left_menu, div.show_listing { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* End Mac IE5 Filter */ div.left_menu { margin-top: -32px; width: 150px; border-left: 1px solid #cccccc; height: 250px; background: #fbfbfb; border: 1px solid #cccccc; } div.show_listing { margin-top: -32px; margin-left: 155px; width: 620px; border: 1px solid #cccccc; }
html Code: Original - html Code <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div> <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div> Again sorry for my ignorance. ( just incase its viewable here ) Hello, I am working on my website w w w . pujckyvcr . c z and there is problem with IE. Firefox is ok, in top menu, there is text with same margin from top and bottom. When you look on it in IE, text is 1px upper and text is more to up. Then hover isn't symmetrical from top and bottom in menu. Do you know how to fix thix IE bug? Thanks you, Jiri Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus 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" xml:lang="en" lang="en"> <head> <title>Title</title> <style type="text/css"> #container{ margin: 0px; padding: 0px; width: 1000px; background: #ccc; } .block { background: #0ff; float: left; height: 100%; margin: 10px; text-align: left; width: 230px; } .block2 { background: #0ff; float: left; height: 100%; padding: 10px; text-align: left; width: 230px; } </style> </head> <body> <p>First:<p> <div id="container"> <div class="block">aaa</div> <div class="block">bbb</div> <div class="block">ccc</div> <div class="block">ddd</div> </div> <p>Second:<p> <div id="container"> <div class="block2">aaa</div> <div class="block2">bbb</div> <div class="block2">ccc</div> <div class="block2">ddd</div> </div> </body> </html> I have a strange css bug in IE 6 and 7 while making a simple two column structure. In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming. This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE. But I want to know is there any other method to fix this issue which uses valid css. Doctype for the HTML is xHTML transitional Here is the css code. #gdsrView{width:456px;} #gdsrView .srchGrpMod{} #gdsrView .grpResHdr{} #gdsrView .grpPagination{} #gdsrView .srCnt{clear:both;float:none;} #gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;} #gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;} #gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;} #gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;} #gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;} #gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;} #gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;} #gdsrView .clearFl{margin-top:1px;} HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <head> <title>IE bug</title> </head> <body> <div id="gdsrView"> <div class="srchGrpMod"></div> <div class="grpResHdr"></div> <div class="grpPagination"></div> <!-- Begin: group results list view --> <div class="srCnt"> <ul id="lstView"> <li style="background:red;zoom:100%;"> <div class="grpPic"> <img src="../images/pic.jpg" alt="Group Image" width="75" height="75" /> </div> <div class="grpInfo"> <dl class="grpMLnk"> <dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt> <dt><a class="actLnk" href="#">Request Invitation</a></dt> </dl> <p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p> <p class="tStamp">Updated 55 Minutes ago</p> </div> <div class="clearFl"></div> </li> </ul> </div> <!-- End: group results list view --> </div> </body> Hi all, I'm not new to CSS in general but quite a novice when it comes to CSS positioning (absolute,relative etc.) I have built one simple web page as follows: http://www.jaysonsgroup.com/ztest/znuvo/z-index.html HTML: Code: <div id='contents'> <div id='main'> <a href='mailto:info@nuvohome.com'>info@nuvohome.com</a><br/><br/><br/><br/> ... *remainder text as you see on the web page**.. </div> <div id='footer'>We are working on that 100% green solution!</div> </div> The CSS as follows: Code: /* CSS global reset for all browsers */ * { padding: 0; margin: 0; } /******* main *******/ html, body, #contents { width: 100%; height: 100%; } /* * The "height" above is a hack for IE5+/Win. Below we adjust * it using the child selector to hide from IE5+/Win */ html>body, html>body #contents { height: auto; } body, p, td { font-family: Century Gothic, Verdana, Arial; font-size:10pt ; font-weight:normal; line-height: 17px; color: #007700; } body { margin: 0; background: url(../images/body/bg.jpg) repeat-y; } a, a:visited { color: #007700; font-size: 11pt; } #contents { margin: 0 auto; width: 500px; } #main { text-align: center; padding-top: 70px; margin-top: 15%; background: url(../images/goinggreen.jpg) no-repeat top center; } #footer { position: absolute; bottom: 0; text-align: center; width: 300px; background: url(../images/bioh-logo.gif) no-repeat top right; padding-top: 68px; padding-right: 160px; padding-bottom: 68px; } This page is done, except in Firefox the text is quite high (because I've set the margin-top: 15%; in the #main div) but in IE6, the main text seems to have a MUCH bigger top margin. Please preview on Firefox and IE to compare - you will notice a considerable margin difference. Just wondering why this is happening? There is an alternate version which I experimented with, using more on CSS positioning, but it still doesn't solve my problem..(and I sort of prefer the other version anyway)... http://www.jaysonsgroup.com/ztest/z...dex-strict.html Any advice on an IE6 hack or something to improve my code? TIA! Hi there..I wanted to print the bottom document using the stated margin but nothing happens...I am now using I.E 5.5.. Pls help... Code: <html><head><title>margin (page)</title> <style type="text/css"> @page { size:21.0cm 14.85cm; margin-top:1.7cm; margin-bottom:1.4cm; margin-left:2cm; margin-right:2cm } </style> </head><body bgcolor="#FFFFFF" text="#000000"> <p>This page is displayed on your screen as a normal web page. However, for print output, margins have been defined for the distance between the content and the edge of the page.</p> </body></html> If I have 2 tables in a div, does margin-top position the bottom table in relation to the top of the div or the bottom of the top table? My top table is absolute positioned top 0px, with a margin-bottom of 50px. The bottom table is positioned relative and has a top-margin of 50px, but is positioned relative to top of the div. Should it be positioned relative to the top table or do I need to put both tables in seperate divs to achieve the margin? I have two divs on a page. Neither div has a set height. I want to maintain a 50px vertical gap between them, regardless of the height of the top div. Can I achieve this with margins? I've tried using a bottom margin on the top div and a top margin on the bottom div, but the top margin of the bottom div seems to be positioning relative to the top of the top div, not the bottom of it. Can someone point out where I'm going wrong with this? Thanks Can someone tell me why margin-top won't work on the administration bar on this page: *** removed *** ? You'll see there's a margin-top of 15px pix on the administration bar, but it butts up against the main nav bar. Thanks! (ps this is a backup, but I'll remove the link shortly anyway). Okay, my problem deals with FireFox and Internet Explorer. If you view my links page (http://jordanmeeter.com/?page=links) in Internet Explorer, everything displays correctly. However, if you look at it in FireFox, none of the CSS works. In my CSS, I put: Code: .noindent { margin-left: 0px; list-style-type: none; } Why doesn't that work in FireFox? Thanks in advance. =) |