SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer & Transparency Issues

    Hi All -
    2 issues that I am currently running into...
    First: I would like to implement a sticky footer and can't seem to figure out what I am missing? I tried using this example and had no luck. So currently I have nothing in place, but for some reason I am getting extra margin/padding space below my footer.
    Code CSS:
    #globalfooter {
    	margin: 0 15px 0 15px;
    	padding: 3px 0 5px 0;
    	border-top: 1px dotted #CF9;}
     
    #globalfooter p {
    	margin: 0;
    	padding: 3px;
    	font-size: .65em;
    	color: #CF9;
    	text-transform: uppercase;}
     
    #globalfooter a {color: #FFF}
    #globalfooter a:hover {color: #000; text-decoration: none; background: #CF9}
     
    #globalfooter, .push {
    	height: 4em; /* .push must be the same height as .footer */
    }
    Code HTML4Strict:
    <div id="content">	
    		<div id="content_main">
    		...
    		</div>
    		<div id="globalfooter">
    			<p><a href="#" title="Services">Home</a> | <a href="#" title="Services">Services</a> | <a href="#" title="Products">Products</a> | <a href="#" title="Our Work">Our Work</a> | <a href="#" title="Testimonials">Testimonials</a> | <a href="#" title="Contact Us">Contact Us</a></p>
    			<p>Copyright &copy; 2008 S&amp;J Construction. All Rights Reserved. Site by <a href="http://www.baublitz.com" title="Baublitz Advertising">Baublitz Advertising</a> | <a href="#" title="Your Privacy is Protected">Terms &amp; Conditions</a></p>
    			<p><a href="http://validator.w3.org/check?uri=referer" title="Valid HTML 4.01 Transitional">HTML</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!">CSS</a></p>
    		</div>
    	</div>
    </body>
    </html>

    Second: Is there anyway of making a background that repeats in IE6 to be transparent? Currently I am using filter: alpha(opacity = 50); but that cause everything after to be transparent??? Any suggestion would greatly be appreciated.

    Here is a live example
    Last edited by Siebird; Nov 7, 2007 at 15:57. Reason: **Return wasn't working...disregard the jibberish...

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the footer margin/padding issues. I used negative position on my #content div with 'margin-top:' rather than 'top:' which was causing that extra spacing after the footer.

    One other thing I just noticed, for some reason in IE7 I dont get the bottom red borders on the navigation items?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To fix the border in the nav in ie7 add position:relative here:


    Code:
    #home #headerNav #homeNav a,
    #services #headerNav #servicesNav a,
    #products #headerNav #productsNav a,
    #work #headerNav #workNav a,
    #testimonials #headerNav #testimonialsNav a,
    #contact #headerNav #contactNav a,
    #headerNav li a:hover {
        color: #CF9;
        text-decoration: none;
        border-bottom: 3px solid #900;
        position:relative;
    }
    IE won't show full padding or borders on inline elements unless position:relative is added.

    The footer technique is documented in the FAQ and is probably where all other versions have stemmed from at some time or another. There are also numerous examples in the 3 col sticky thread at the top of the forum.

    econd: Is there anyway of making a background that repeats in IE6 to be transparent?
    In some cases you can use a transparent background png and use the alpha image loader. It won't however repeat images but will scale or crop them.

    You can see an example here:

    http://www.pmob.co.uk/temp/transparent-test4.htm

    The borders and the image have the alpha image loader filter applied.

    Hope that helps.

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    IE won't show full padding or borders on inline elements unless position:relative is added.
    Thanks for the info!

    Quote Originally Posted by Paul O'B View Post
    The footer technique is documented in the FAQ and is probably where all other versions have stemmed from at some time or another. There are also numerous examples in the 3 col sticky thread at the top of the forum.
    I have 2 minor issues still with this...In Safari it seems that positioning the footer with absolute, seems to push the footer beyond the viewing port even if there is enough room for the footer. Secondly, in IE6...the footer pushes back up into the content depending on the view port size, but that is no big deal as I removed this technique for IE6 users.
    Quote Originally Posted by Paul O'B View Post
    You can see an example here:

    http://www.pmob.co.uk/temp/transparent-test4.htm

    The borders and the image have the alpha image loader filter applied.

    Hope that helps.
    I am still not able to achieve this effect in IE6. I have a 1px x 1px background image, I am not sure if this is to small. I believe I might not be declaring it correctly...
    Code CSS:
    #content {
    	position: relative;
    	width: 800px;
    	height: auto;
    	margin:0px auto;
    	margin-top: -79px;
    	padding: 0;
    	text-align: left;
    	color: #FFF;}
     
    html>body #content {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
    }
    Thanks again for all the help!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I have 2 minor issues still with this...In Safari it seems that positioning the footer with absolute, seems to push the footer beyond the viewing port even if there is enough room for the footer.
    Older safari (1.2 and (maybe 1.3)) don't understand min-height so they can't be catered for with this method.

    Secondly, in IE6...the footer pushes back up into the content depending on the view port size, but that is no big deal as I removed this technique for IE6 users.
    Then you are doing it wrong as this technique has now been sold a million times and works fine in iE6 Re-read the explanations to understand how this is working as you are missing some finer points.

    Here is the method again in a slightly different format but basically the same techniques. This method is a little neater.

    http://www.pmob.co.uk/temp/spointfooter.htm

    And here you can see it working in a range of browsers.

    http://www.browsercam.com/public.aspx?proj_id=389788


    [quote]
    Code:
    html>body #content {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
    }
    [quote]

    You are only supposed to be giving the code it ie6 and under yet you have immediately excluded them from using it because you have used the child selector that IE doesn't understand!!


    IE should be given the filter like this
    Code:
    * html #content {
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
    }
    The image will be relative to the alpha filter and not the stylesheet so use an absolute reference.

    The original background image has to be negated which is done with the background:none style.

    Remember that the alpha image loader does not repeat an image it will scale it so a 1px by 1px image isn't going to look very good. Make the image bigger so that t doesn't lose too much when scaled.

    Refer to my example again as you have managed to copy the code incorrectly first time


  6. #6
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Then you are doing it wrong as this technique has now been sold a million times and works fine in iE6 Re-read the explanations to understand how this is working as you are missing some finer points.

    Quote Originally Posted by Paul O'B View Post
    You are only supposed to be giving the code it ie6 and under yet you have immediately excluded them from using it because you have used the child selector that IE doesn't understand!!

    The image will be relative to the alpha filter and not the stylesheet so use an absolute reference.

    The original background image has to be negated which is done with the background:none style.

    Remember that the alpha image loader does not repeat an image it will scale it so a 1px by 1px image isn't going to look very good. Make the image bigger so that t doesn't lose too much when scaled.
    Working...thanks for explaining, it now makes more sense to me. The 1px x 1px background image looks good scaled! Thanks again for all your help, I learn something new everytime I post!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks again for all your help, I learn something new everytime I post!
    No problem, I always have to read things twice before they sink in


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •