Advanced Search

Results 1 to 10 of 10

Thread: Layout problem, padding at the bottom of page?

  1. #1
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Layout problem, padding at the bottom of page?

    Hi guys,

    Developing this site at the moment I want my flash navigation to be at the bottom although for some reason there is a gap and I cant understand why, go here to see the page. The gap is in IE and doesnt show in firefox. I also want the navigation to stay at the bottom and not just be at the bottom of the browser because it is left floating if the users browser is only a few 100px's high.

    HERE

    Thanks a lot!

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    I see the gap in both FF3 and IE7. Also, in FF3 the flash doesn't even work (I'm assuming either z-index or wmode)

    I would recommend "validating" everything before attempting to correct any known issues, as doing so may in fact CORRECT some of your issues.

    Your Markup Results
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey, thanks for the pointer. I made some changes and here is the results:

    http://validator.w3.org/check?uri=ht...idator%2F1.591

    it appears to just be 'problems' with my flash, is there a high chance it could be these problems I have left behind that are causing problems with my layout?

    Thanks,

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    What's all this about? (the highlighted)

    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>ITA</title>
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    <!--
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	vertical-align: bottom;
    }
    #abc {
    	z-index: 80;
    	position: absolute;
    	height: 100%;
    	width: 100%;
    	vertical-align: middle;
    	clip: rect(auto,auto,auto,auto);
    }
    -->
    </style>
    <!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" lang="en" xml:lang="en">
    
    <script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
    <link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="facefiles/facebox.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        jQuery(document).ready(function($) {
          $('a[rel*=facebox]').facebox() 
        })
    </script>
    <script type="text/javascript">
    
    /***********************************************
    * IFrame SSI script-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids=["myframe"]
    
    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide="yes"
    
    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
    
    function dyniframesize() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
    if (document.getElementById){ //begin resizing iframe procedure
    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
    if (dyniframe[i] && !window.opera){
    dyniframe[i].style.display="block"
    if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
    dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
    else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
    dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
    }
    }
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
    }
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", dyniframesize, false)
    else if (window.attachEvent)
    window.attachEvent("onload", dyniframesize)
    else
    window.onload=dyniframesize
    
    </script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #apDiv1 {
    	position:absolute;
    	width:200px;
    	height:115px;
    	z-index:1;
    	left: 5%;
    	top: 5%;
    }
    #apDiv2 {
    	position:absolute;
    	width:100%;
    	height:100%;
    	z-index:10;
    	background-image: url(Images/overlay.png);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    }
    #overlay {
    	height: 120px;
    	width: 100%;
    	z-index: 99;
    	background-position: center bottom;
    	visibility: visible;
    	vertical-align: bottom;
    	position: fixed;
    }
    #apDiv3 {
    	position:absolute;
    	width:130px;
    	height:115px;
    	z-index:99;
    	left: 5%;
    	top: 6%;
    }
    #apDiv4 {
    	position:absolute;
    	width:100%;
    	height:120px;
    	z-index:1;
    }
    #apDiv5 {
    	position:absolute;
    	width:100%;
    	height:120px;
    	z-index:1;
    }
    #Structure #Main #ppp {
    	vertical-align: bottom;
    	height: 120px;
    }
    #footer {
    	width: 100%;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	z-index: 80;
    	margin: 0px;
    	padding: 0px;
    } 
    -->
    </style>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    Also, seeing as how you are not using anything which justifies the XHTML doctype. I would recommend changing your first 4 lines to the following.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
      <title> ITA </title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. The Following User Says Thank You to TheJoshMan For This Useful Post:

    Maynard (10-12-2008)

  6. #5
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I made your suggested changes but still no change to my layout, do you know what may be causeing this gap?

  7. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    those weren't necessarily to affect the layout. Those were to help validate.

    Valid code is much easier to "fix" than invalid code.

    Now, I don't know if I understood you correctly. Are you wanting the navigation to stay at the very bottom of the page even if the user scrolls? Or are you wanting it to be at the bottom and allow the user to "scroll it out of view"?


    P.S. - You're still showing to be in XHTML transitional in the validator. (giving 38 errors)
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  8. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    Ok, i'm getting confused here..

    Which page are we trying to fix?

    I noticed that the last link you posted doesn't match the first page in question.

    First page

    Last link

    Either way, the last link you sent doesn't have a doctype at all... but you have the <html xmls stated (meaning it's assuming xhtml)
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  9. #8
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Basically I am not using the first page anymore, I put it through the validating process, it made some improvments and then resaved the new validated page as markup.html, so basically it is the second page I sent. I just really dont know what could be causing this gap, usually it's something blatent.

    Thanks.

  10. #9
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    For anyone else that has a similar problem. I changed the CSS placement to -5 and it eleminated the gap. Although for some reason the section stages at the bottom of the browser and not the page. Does anyone know how I would overcome this?

    Thanks!

  11. #10
    Join Date
    Aug 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy lol

    hope a better article

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
  •