WordPress.org

1. 4evrblu
   Member
   Posted 5 years ago #

   #footer {
   clear:both;
   text-align: center;
   font-size:.8em;
   border: 1px solid #D4DBD3;
   width:99%;
   height:100%;
   margin: 0 auto 0 auto;
   }

   This is my css style for the footer. You would think it would work to force the footer beyond everthing on the page, but it doesn't. Not exactly.

   The only way the footer behaves correctly is it I removed Position:Absolute from the sidebar style, but when I do that, then the sidebar gets wonky and starts to move up and behind the header images in Opera 9.02.

   As long as I leave Position:Absolute in place, the sidebar behaves properly, but then the footer starts acting wonky again and crawels back up the page on short entries.

   I sure would appreciate the help. I have searched the support forums but have yet to find a fix that works.

   Thanks.

   PS : URL = http://bluestravels.com

   css= http://www.bluestravels.com/wordpress/wp-content/themes/travelogue1-0-3/style.css

2. Samuel B
   moderator
   Posted 5 years ago #

   What does this accomplish?
   width:99%;
height:100%;

3. 4evrblu
   Member
   Posted 5 years ago #

   The footer was creating a horizontal scroll bar, even with the wrapper divide tag I added, so I reduced the with of the footer a tad bit to give it some space on either side....horizontal scroll bar gone.

   I also relaced Margin:0 with margin: 0 auto 0 auto; in order to center the footer properly.

   That was my solution at least, and I tried so many things that once this worked I just kept in place.

   Now if I can just get the blasted footer to stay at the bottom.

4. 4evrblu
   Member
   Posted 5 years ago #

   Interesting progress, but still unresolved.

   I added this wrapper div/layer/id to my header.php, and closed it properly with an </div> tag.

   I then added

   #wrapper {
   position:relative;
   margin:0 auto;
   width:100%;
   }

   to my css sheet, which allowed for everything inside it to be positioned absolutely with respect to it.

   I was then able to set sidebar to

   #sidebar {
   position:absolute;
   left:0px;
   top:0px;
   width:279px;
   margin: 0px 0px 5px 0px;
   }

   Now the footer is back up behind the sidebar again.

   Footer is now set to:

   #footer {
   text-align: center;
   font-size:.8em;
   border: 1px solid #D4DBD3;
   width:99%;
   height:100%;
   margin: 0 auto 0 auto;
   clear:both;
   }

   It still is not being sticky.

5. 4evrblu
   Member
   Posted 5 years ago #

   Guys I am twisting in the wind here.

   Would anyone care to chime in?

6. illovich
   Member
   Posted 5 years ago #

   This article might help:

   http://www.positioniseverything.net/easyclearing.html

   It explains how clearing floats works. I sort of understand it now, lol.

7. 4evrblu
   Member
   Posted 5 years ago #

   OK I fixed Blues Travels.

   Have a look:

   http://bluestravels.com

   I will post a lengthy reply here, because the fix requires some explanation.

   The problem was with the prior developer of the theme.

   According to Shelley at http://www.anekostudios.com/about/:

   "position:absolute" takes the element out of the flow of the rest of the
   document, and it's treated like it's own new thing by the browser. The
   only time you can absolutely position an element relative to a div (an
   not the browser screen) is if it's located within a relatively
   positioned element. [position:relative]

   Her email to me had lots more, but I will try my best to simplify by saying that the original author had some position:absolute tags in several places, but no parent <div> that were relatively positioned.

   So, I did my best to address what I thought was the issue buy more or less redoing the style sheet.

   But first I needed a wrapper (<div id="wrapper"></div>) to enclose the whole site. So, I made one. I added it to the header page as a parent div and I closed it in the footer.pho file. Then, I added it to the top of my style sheet.

   With respect to the css sheet, instead of specifying width in pixels, I specified width of wrappers, headers, left and right columns in terms of percentages. The header div tags containing images took on the width of the images in pixels of course, but everthing else was in percentages.

   I gave the wrapper 100%, the sidebar 20%, content 70% and the small container rightcolumn 10%.

   I then made the wrapper position:relative and gave position:absolute to the header tags and subheader tags containing the banner images and form fields you see at the top.

   I made some adjustments with a few margins, not many as I left most margins 0, and the footer began to cooperate while the sidebar displayed evenly in all browsers.

   Working with someone elses code is a pain. But it is worth the effort if you can achieve the results.

   Any questions, drop me a message at my site or here in this thread.

8. 4evrblu
   Member
   Posted 4 years ago #

   I no longer use the same theme that was giving me fits back then. Therefore, the issue is non-existent at present.

9. Root
   Member
   Posted 4 years ago #

   Just as well. It was madness.

10. damianj
    Member
    Posted 4 years ago #

    I'm having what looks like a very similar issue.
    I have posted a thread about it here:
    http://wordpress.org/support/topic/136302

    If anyone could help, it would be greatly appreciated.
    I am also using someone elses code (from the default wordpress theme). I have tried everything.. clear: both; and there are no position: css code anywhere I can see
    It all validates, the html and css. weird crazyness

    I have tried many many things... with some results, I have go it to move to the bottom in Firefox, but not Safari, I don't know what happens in IE.

Topic Closed

This topic has been closed to new replies.