HTML - Footer Sizing Problem
Hi,
I have made a site recently, its fairly dodgy looking but thats what they wanted, it all worked out well except for one of the pages the 'footer' section of the main table wont resize properly, all the pages are coded exactly the same for the section, but just one page wont work the site is www.thesavergroup.com and the page that wont behave is the eftpos page. Any help would be appreciated i'm going nuts over this. Thanks Chris Similar TutorialsHello, I've been trying to get a footer bar at the fixed bottom position. So far, it seems to work in FF, IE and I also checked in the new Google Chrome browser. However, in IE something strange happens: when a menu in the navigation gets expanded, the footer shifts over the width of the navigation div to the right. You can see the site and the problem at this test page. When you go over "hoofdstukken" in the menu, the footer div moves to the right - at least in my IE7. Any ideas what could cause this - and how to solve it? Thanks in advance. Kind regards, Tom i have a problem in a footer that if the content of the page did not fill the all the page the footer will not be in front of the status bar' but it is not working well on firefox and internet explorer in the same time] so how i can put the footer above the status bar in the pages that not contains alot of data??? to see what i mean plz open this link in internet explorer and firefox th see the difference http://www.graphicano.com/john/index.htm with css: .bodydwn { background-image: url(images/body_dwn.jpg); padding-left: 280px; font-size: 10px; vertical-align: middle; } and http://www.graphicano.com/john/index2.htm with css .bodydwn { background-image: url(images/body_dwn.jpg); padding-left: 280px; font-size: 10px; vertical-align: middle; width: 100%; position: absolute; bottom: 0px; } So my site works in FF, Safari and IE8 (sorta). However, my sticky footer is getting screwed up in IE7. Im sure it has something to do with margins and padding issues but I can't seem to come up with a solution that works. I based the footer on this article: http://www.lwis.net/journal/2008/02/...sticky-footer/ My template is located at: http://current-post.com Everything should be w3 valid. Help! I am just about to ship this template off to a customer but I am having a problem with my footer. The footer is supposed to expand the width of the page at the very bottom of the page. However, the footer is cramming itself in below the content on the right side panel. However, if I add 2 </div> tags in the HTML code directly above the footer code than it works perfect. The problem is that this invalidates the code and I can't figure out why. The validator claims these </div> tags aren't matched with enough <div> tags. Im going nuts and I know this is a really simple issue. Can anybody see what is going on?! Here is the page I am talking about: http://current-post.com/refractive/inner.html Hi, I have a problem with a design (http://www.kinoaguilar.com/james/) where if the webpage is not bigger than what the browser can display, then my footer appears in a really 'crappy' way. The easy way to fix it would be to add blank space, but I'd rather not do that. Does anybody know the 'correct' way to fix it? ~lukis100 Hi Could anyone shed some light on why the footer on this page isn't staying at the bottom of the page? Its ok on the other pages so I'm assuming its got something to do with the contact form on the page. http://www.buckleigh.co.uk/contact.asp Here's the css: http://www.buckleigh.co.uk/screen.css Any help greatly appreciated, thanks. Kev My fault, the padding pushed the div outward covering the links at the bottom. How can I make my forms smaller. I already know how to control length, but how can I make the height lower. Im having problems getting my table to the right size. I want it to be 100% of the page but it only becomes 100% of whats inside the table. Any ideas what to do to solve this? Thanks Jake At the mo, the code is Code: <table summary="News" width="100%"> Hi, I'm using an image for my web background, but I have a little problem. I have to go and size the image correctly in the image editing program for it to look right, but then if you resize the webpage it doesn't look right. Is there a way to make the image automatically resize itself depending on the size of the person's screen? Hi, I have been having issues with a scroll bar on my page, and have tried a few different html codes, and have messed with sizing but am not getting the result I want. Here is the page I am referring to: http://userwww.sfsu.edu/~davidson/ar...tractbody.html I would like for there to be only the horizontal bar, like I have. But I would like the box to be smaller (i've tried making the grid's width smaller, but then the scrollbar doesn't have the pictures side-by-side, but pushes one to the bottom and it creates a vertical scroll bar). I would like it to be so that one picture or one and a half pictures, it doesn't matter, is shown. i want less to be automatically visible. i want it so you just scroll to view the rest, all side by side. Hopefully that makes sense? Thank you!!! Ok I was just informed that on our companies site that there is a new window that pops up when a link is clicked. This is supposed to happen but the one thing I am trying to figure out is that the new window is rather small and the customer has to always enlarge it. They are using IE. I have tested it with IE7 with the same results as reported but it has also been tested with FF and SeaMonkey and the new window is large. Is this an IE thing, perhaps a setting or do I actually have to add something to my CSS/HTML to account for this? Thank you for the help. ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> Is there an HTML script that will automatically proportionately size a graphic? Say you set the Height=100 then the Width=?? would be automatically adjusted depending on the actual size of the parent graphic. How do I make this simple HTML/CSS page look the way I want? If you render this code in a browser, you will see what I'm trying to do. Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Vertical Sizing Test Page</title> </head> <body style="margin: 0; background-color: #FFF; font-family: Verdana; font-size: 10pt;"> <div style="background-color: #FED; padding: 10px; height: 25px;"> Top Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> <div style="background-color: #DEF; padding: 10px; margin: 10px; border: 1px dotted black;"> <h2>Main Content Area</h2> I want this to vertically fill the remainder of the page.<br/> <br/> There should not be any unused space below the bottom banner.<br/> <br/> If there is a lot of dynamic content in this section, the user will need to scroll. However, if there isn't a lot of content, the user shouldn't have to scroll.<br/> <br/> This should also be vertically centered. </div> <div style="background-color: #FED; padding: 10px; height: 25px;"> Bottom Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> </body> </html> I've got an applet with some features, one of which a background image. It's actual size is 10.60 inches wide by 5.30 inches of height. Using WIDTH="744" and HEIGHT="600" (as shown on the code below) does not display the entire image. Can someone tell me the right setting of values to fix it? Is there a code to authomatically capture whatever the size of the .jpg and make it fit? Thanks in advance. Here's the html: <p align="center" <APPLET code=string WIDTH="744" HEIGHT="600"> <param name="para_back" value="background.jpg"> </APPLET> </p> How can I make the browser window that my site is in automatically have specific height/width dimensions? Making toolbar and scrollbar go away would also be nice. Hello. I have an HTML website image background that I am trying to stretch across any screen resolution, while keeping the image "fixed" in one position, so the image does not shrink when the screen window is modified. I got everything to work correctly, however I cannot get the image to stay at a "fixed size" when I shrink the window. Can somebody please help me? I am a beginner programmer, but I have tried numerous processes before resorting to this forum. Here is my code...in case you want to preview it in a web browser. Thanks in advance for any help you can offer me to get the image to stay "fixed" and also to keep it stretched across the entire screen. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- leave DTD out of DOCTYPE to put IE6 in quirks mode --> <html> <head> <title>GIS Disclaimer</title> <style type="text/css"> body { /* for IE; otherwise, BG isn't fully stretched */ margin: 0px; } #background { position: absolute; margin: 0px; border: 0px; padding: 0px; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0; background-repeat: no-repeat; background-attachment: fixed } #background img { padding: 0em; width: 100%; height: 100%; } #body { position: absolute; left: 0px; top: 0px; width: 100%; height:100%; padding: 0px; z-index: 0; } li { margin-bottom: 2em; } </style> <!--[if IE]> <style type="text/css"> body { margin: 0px; overflow: hidden; } </style> <![endif]--> </head> <!-- img must be encased in div to keep proper image aspect ratio --> <div id="background"><img src="file:///C:/Website/Images/Disclaimer_bckgd_5.jpg"></div> <div id="body"> <style fprolloverstyle>A:hover {color: red; font-weight: bold} </style> <div align="left"> <table cellspacing="0" cellpadding="0" align="center"><tr> <td width="100%" nowrap> <b><p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0px; margin-top: 175px; margin-bottom: 0px"; <span style="font-size:21.0pt; color:maroon" >Town of Leprechauns, Confusion<p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0in; margin-top: 40px; margin-bottom: 20px"; align="center"><b><span style="font-size:21.0pt;color:maroon">Online Disclaimer Form</span></b></p> </tr></table> <div align="left"> <table cellspacing="0" cellpadding="0" align="center"><tr> <td width="100%" nowrap> <p style="line-height: 0px; word-spacing: 0in; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 0px"; align="left"><b><span style="font-size:12.0pt; color:black">This site provides access to the Online stuff. The information contained on this site is</p><p> updated periodically, however this town geographic database may NOT reflect the most current</p><p> information available. THE TOWN OF LEPRECHAUNS MAKES NO CLAIMS OR WARRANTIES,</p><p> EXPRESSED OR IMPLIED, CONCERNING THE COMPLETENESS, RELIABILITY, OR SUITABILITY </p><p> OF THESE DATA. THE TOWN OF LEPRECHAUNS DOES NOT ASSUME ANY LIABILITY ASSOCIATED</p><p> WITH THE USE OR MISUSE OF THIS INFORMATION. All information is for planning purposes only. </p><p> It may not be adequate for legal boundary definition, regulatory interpretation, or property conveyance</p><p> purposes. If you believe that any data provided within this site is inaccurate, or if you have any questions </p><p> regarding these data, please contact:</span></b></p> </tr></table> <table cellspacing="0" cellpadding="0" align="center"><tr> <td width="100%" nowrap> <p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:12.0pt; color:maroon">Butch, GISP</span></b></p> <p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">Town of </span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon"> </span></b><b><span style="font-size:10.0pt;color:maroon">GIS</span></b><b><span style="font-size:10.0pt;color:maroon"> Coordinator</span></b></p> <p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">41 Pot O Gold Road</span></b><b><span style="font-size:10.0pt;color:maroon">, </span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon">, </span></b><b><span style="font-size:10.0pt;color:maroon">Confusion</span></b><b><span style="font-size:10.0pt;color:maroon"> </span></b><b><span style="font-size:10.0pt;color:maroon">90210</span></b></p> <p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0" align="left"><b><span style="font-size:10.0pt;color:maroon">Tel: </span></b><b><span style="font-size:10.0pt;color:maroon">555-555-5555</span></b><b><span style="font-size:10.0pt;color:maroon"> Fax: </span></b><b><span style="font-size:10.0pt; color:maroon; nowrap">555-555-5555</span></b><b> </b></p> <p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family: "Times New Roman";color:maroon;mso-ansi-language:EN-US;mso-fareast-language: EN-US;mso-bidi-language:AR-SA">Email:</span><span style="font-size:12.0pt; font-family:"Times New Roman";mso-fareast-font-family:"Times New Roman"; mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA"> </span><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family: "Times New Roman";color:blue;mso-ansi-language:EN-US;mso-fareast-language:EN-US; mso-bidi-language:AR-SA"><a href="mailto:bdawg9674@hotmail.com"><i><span style="color:navy">bdawg9674@hotmail.com</span></i></a></span></b></p> <p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b>Do you agree to the conditions listed above?</b></p> <p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><font face=Arial size=-1 color=#000000><a href="http://xxxxx.xxxxxx.xxx.xxx/website/xxxxx/parcels/login.htm"><input type="submit" value=" I Agree " onclick= "parent.location='http://xxxx.xxxxx.xxx.xxx/website/xxxxx/Parcels/login.htm'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font><font face="Arial"> <a href="file:///C://Website/xxxx.html"> <input type="submit" value="I Do Not Agree" onclick= "parent.location='file:///C://Website/Survey.html'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font></p> </tr> </table> </div> </body> </html> I am using the following code that creates the desired effect in Firefox 2 but not in IE 7. By increasing the height of the image in the "rowspan=2" cell at the bottom-right, I would like only the bottom-left and bottom-center cells to expand vertically. However, this only happens in FF and not IE. In IE the middle-left and middle-center cells also expand. Any ideas how to make this work, and control which cells expand? Code: <table width="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF00FF"> <tr> <td><img src="student01.jpg" width="100" height="100" /></td> <td bgcolor="#9900FF"><img src="student01.jpg" alt="" width="100" height="100" /></td> <td bgcolor="#CC0000"><img src="student01.jpg" alt="" width="100" height="100" /></td> </tr> <tr> <td><img src="student01.jpg" alt="" width="100" height="100" /></td> <td bgcolor="#CC0000"><img src="student01.jpg" alt="" width="100" height="100" /></td> <td rowspan="2" bgcolor="#CCFF33"><img src="student01.jpg" alt="" width="100" height="300" /></td> </tr> <tr> <td bgcolor="#00FF00"><img src="student01.jpg" alt="" width="100" height="100" /></td> <td bgcolor="#FF3300"><img src="student01.jpg" alt="" width="100" height="100" /></td> </tr> </table> |