|
CSS - Footer Moves Up 1px When Window Not Maximised.
I fixed this issue ages ago on another template and now I can't remember what sorted it.
My footer sits at the bottom (or drops down if the page is longer). When the page is maximised it looks fine but when the browser (IE) is not maximised it moves up 1px and you can see the background behind it. Any ideas? Thanks. Similar Tutorialshey all i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page Go Here To See What I Mean the css can be found here any ideas...cus im stumped thanks very much RF Hi, I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out. All help is appreciated. Thanks. E. hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page. The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that. Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down... The main_image is set to relative so the body_copy text can form properly under it. Is there any way to have the image remain stationary despite window size? Thanks for your help!! Suppose this: ----- Header Div Content Dive Footer Div ----- Is there a way to force a footer div to the bottom of the window even when there isn't enough content above to fill the window? Maybe some way to "pad" the content div? Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content. No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| When content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) 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=iso-8859-1" /> <title>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue?? i see i cannot post a url. any help without seeing the problem? Here is the code snippet from the iframe: Code: <div style="margin: 0px;" id="votes"> <ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh"> <li id="xvote-0" style="width: 81.25px;" class="current-rating"></> <span id="mnmc-0"> <li class="one-star-noh"></li> <li class="two-stars-noh"></li> <li class="three-stars-noh"></li> <li class="four-stars-noh"></li> <li class="five-stars-noh"></li> </li> </ul> </div> I've been adding local styles to try and zero any potential problems. i can post all css styles if noone has any ideas. Any help would be much appreciated. Thanks. Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes: Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green. Screenshot: And when minibuttons is hovered over: But as you can see, it moves the login div too. Appropriate CSS: Code: div.logo
{
background-image: url("/images/logo.gif");
border: solid 1px #808080;
border-bottom: none;
border-top: none;
height: 85px;
margin-left: auto;
margin-right: auto;
width: 775px
}
div.login
{
border: solid 1px #00ff00;
height: 75px;
left: 625px;
position: relative;
top: -18px;
width: 145px
}
div.minibuttons
{
border: solid 1px #0000ff;
left: 570px;
position: relative;
top: 70px;
width: 48px
}
div.minibuttons:hover
{
left: 570px;
position: relative;
top: 1px;
width: 48px
}
Appropriate HTML: Code: <div class="logo"> <div class="minibuttons"> <a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a> <a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a> </div> <div class="login"> <form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()"> <fieldset class="login"> <input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br /> <input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br /> <select class="service" name="service"> <option value="2082">cPanel</option> </select> <input type="submit" name="login" value="Login" class="button" /> </fieldset> </form> </div> </div> Appropriate JS: Code: if (document.images)
{
var flipped = new Array();
for(i=0; i< inames.length; i++)
{
flipped[i] = new Image();
if(i <= 7)
flipped[i].src = "/images/roll/"+inames[i]+".gif";
if(i > 7 && i <= 9)
flipped[i].src = "/images/full/"+inames[i]+".gif";
}
}
function over(num)
{
if(document.images)
{
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num)
{
if(document.images)
document.images[inames[num]].src = revert[num];
}
Any ideas people? Thanks, Danny. I want products listed horizontally first, then move to next line if there is to many. But instead, each product listed on a new line. http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: /* products.css */ #products { float: left; } #products .productbox { background-color: #ececec; width: 150px; padding: 10px; margin-top: 10px; } #products .productfooter { background: url(../images/arrow.gif) 20px 0 no-repeat; padding-left: 58px; margin-bottom: 10px;} #products img#product { width:150px; height:150px; border: 0px; } 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 I have a table with 5 columns. I only want the table to cross about 70% of the screen. Whenever I try to re-size it either via css or just 'width = 70%' the table stays the same width and just jumps towards the right of the page. It doesn't matter if I put a width on my body, a div wrapper, or the table.. same results. I've never had these resizing issues before but I admit i haven't coded anything in 6 months Thanks for any help. **Edit** Oh, I forgot to mention the table is initially wider than the screen and its seems to be staying that wide because each column will stay as wide as it's longest entry. Hi, I have spend 2 days trying to figure out why this happens, and i just cant figure it out... My links in my main menu moves 1 - 3px to the right in IE explorer at mouse-over....but only when i set a: hoover to change background color.... if i only change text color with a : hoover its fine. Anyway i just realized that this was a complete waste of time since i'm not allowed to give my URL for people to see the problem... Cheers, Bukit1 Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it. link: http://www.net-force.com/hotest/a1.html any suggestions how to fix it so it displays properly in IE? thx! I swear, its just one of those days. I'm pretty good with CSS/HTML, but I had not touch it in a while. I sat down, and for the life of me I can solve even the simple problems... I know I solved this a buch of times, but now I cant remember how, looking back on my old code/sites dosent tell me much. So I have a div in the header. When I put margin-top (org just margin: x 0 0 0;) the whole page moves down because of the margin. Its like child div is influencing parrent div. I tried positioning every parrent div to relative but no luck... I cant get this child to behave. I know this is an easy question, I'm just not myself today. Hello, I have what I hope is an easy question. I am trying to make a horizontal navigation menu based on code I have found on the net. I got 99% of it working EXCEPT: When sub menu text is displayed it "pushes" the main menu text to the right. my example is located he www(dot)katieandconrad(dot)com I have validated both my HTML and CSS, the errors that are displayed have nothing to do with this issue. However, I will be fixing the HTML error tonight. There's nothing I can do with the CSS errors. Thank you very much for your help. Regards, CB |
|||||||