• Hi,

    I wonder why the footer bar keep moving differently for each page.

    footer.php

    [Code moderated as per the Forum Rules. Please use the pastebin]

    style.css

    #footer-container {
         margin: 700px 0 0 0;
         background: white url(images/footerline.png) repeat-x;
    }	
    
    #footer-nav {
         width: 921px; margin: auto; padding: 0 0 0 0; overflow: hidden;
         font: 11px Arial, Helvetica, sans-serif color: #acacac;
         }
Viewing 14 replies - 1 through 14 (of 14 total)
  • Because of all those non-breaking spaces instead of proper positioning, I would think, and the use of line breaks instead of paragraphs. Using non-breaking spaces like that is just about the biggest no-no in all of HTML.

    If you post a link to your site we will be able to see your HTML and CSS code so you won’t have to paste it.

    HTH

    PAE

    Thread Starter davy_yg

    (@davy_yg)

    The website is not online yet. It’s still in localhost.

    Proper positioning like:

    <div id=”text2″> design by 123 </div>

    #footer #text2 {
    margin 20px 0 0 100px;
    }

    Whatever positioning methods float your boat. You can choose from using margins, padding, floats, absolute/static/relative/fixed positioning, and you can choose the elements on which you want to apply any or all of those in any mixture that works for your site and is suitably economical.

    However, without being able to look at your site’s code it’s well nigh impossible to give specific advice.

    As I’ve said elsewhere, I rarely develop locally. I don’t see any reason to. If I don’t want people to see what I’m doing I install a plugin like ‘Maintenance Mode’ and hide the site from the eyes of the world. I’m sure you have your reasons, though.

    Cheers

    PAE

    Thread Starter davy_yg

    (@davy_yg)

    Well, I prefer working it locally first then transfer it online. Otherwise I will have to keep retransfering file while working the code locally. I also do not have the webhosting information yet.

    your advise is already helpful. ^^.

    <div id="footer-container">
    	<div id="footer-nav">
        <br />
                    Home &nbsp | &nbsp About Us &nbsp | &nbsp Practice Area &nbsp | &nbsp News &nbsp | &nbsp Published Books &nbsp | &nbsp Contact <div id="ftext"> design by towadesign </div>
                    Copyright 2012 OCK & Associates  <br /><br /> 
    
    	</div>
    </div>

    style.css

    #footer-nav #ftext {
    	margin: 0 0 0 790px;
    	}

    I wonder why the text “design by towadesign” is not in the same line as the footer navigation ?

    Just guessing, but it’s probably because of the content width taking after taking into account such things as padding. Also I’d use <p> rather than some number of <br />. You can set padding and or margins to get the spacing.

    Do you know how to use Firebug? It will allow you to see what’s going on and allow you to test other CSS values that might solve the problem.

    Cheers

    PAE

    Thread Starter davy_yg

    (@davy_yg)

    I must installed it in Mozilla right? Some of my css codes are disabled / undetected in mozilla. The layout turns out a little bit different in Mozilla.

    You can also use the Chrome browser, which has similar developer tools built-in.
    If you have problems with layout in Firefox, you’ll likely have problems across all the standards-compliant browsers. Better to start off with a class-A browser, and then add whatever additional hacks for IE later.

    Most serious developers use Firefox, although there is some evidence that Chrome is catching up. I don’t know of any serious developer who uses IE except for testing purposes after making sure the site renders properly elsewhere.

    On the whole, the layout in Firefox is the correct layout according to w3c standards. If you are finding differences between the layouts of various standards compliant browsers then the problem is probably because your code is not standards compliant.

    Your HTML declares the standard that it will adhere to in its <!DOCTYPE... declaration. If the code that follows does not, in fact, adhere to the declared standard, you have broken your contract as it were with the browser’s layout engine. Once this happens, all bets are off and each layout engine will try to guess what you mean rather than simply laying out your page in the way dictated by the standard. Every layout engine will guess differently.

    So the first thing you need to do is to validate your code by submitting your pages to the w3c validator. The easiest way to do this is by installing the Web Developer Toolbar in FireFox and using the facilty located there. When you have the results of the validation you can correct your code (bit-by-bit) and resubmit your pages until you get it right. Some errors are more important than others. Experience will tell you which these are.

    Whatever the results, you need to ensure your pages render correctly in all popular browsers (so Chrome, FF, various version of IE (they all render differently), Safari and possibly Opera). It’s usually only IE that causes any serious problems and you can very often get around those by providing separate style sheets for the various versions of IE. You use conditional comments to include the appropriate IE style sheet(s).

    HTH

    PAE

    Thread Starter davy_yg

    (@davy_yg)

    w3c validator only able to validate HTML file rights ? not php ?

    All of my files are *.php & *.css (They are wordpress themes).

    I have installed Web Developer Toolbar but do not know how to use it.

    I almost get the whole layout correctly in IE, eventhough it still looks a mesh in Firefox.

    Do you understand JQuery by the way? I’m looking for help in modifying JQuery navigation plugin:

    JQuery Forum –> It’s the hardest 😀

    You submit the output. PHP files output HTML.

    To validate a page, navigate to it in your browser and then on the Web Developer Toolbar, click on ‘Tools –> Validate Local HTML’

    IE is on the whole evil and should never be used for serious development work for any HTML that is going to be viewed by anyone with a choice of browser.

    Yes, I understand jQuery, but I wouldn’t go messing with plugins unless you’re prepared to start from a copy and then to maintain it yourself which may mean some serious work on the security front.

    Cheers

    PAE

    Thread Starter davy_yg

    (@davy_yg)

    I am using WebDevToolBar 3.9 – I do not see Tools –> Validate Local HTML

    Which Tools ? SEO Tools or Domain Tools ? On Firefox Tools there is no Validate Local HTML either.

    Do you mean I have to convert the files to html first before submitting them ?

    Do you have the toolbar visible? If not, either make it visible or from the main Firefox menu select Tools –> Web Developer –> Tools –> Validate Local HTML

    No you don’t have to convert anything. Your browser is only capable of displaying HTML so HTML is what you’re submitting.

    Cheers

    PAE

    i like both chrome and firefox developer tools but i tend to use chrome dev tools more as their dev tools interface is more intutive

    Yeah, sure. Whatever floats your boat as long as it ain’t IE!

    🙂

    PAE

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Footer Bar’ is closed to new replies.